Can't figure out regex match, how far off am I? - javascript

Super basic question (which I admittedly probably shouldn't post on SO, but here goes): I'm trying to create a regex to match (and exclude from a function) all links that begins with //images, but I cannot for the life of me get it to work.
Right now I have:
$('a:not([href^=/\/\images])').each(function(){
But since that clearly isn't correct, and I really don't know where to begin looking to set it straight, I'm asking for advice. I'm used to escaping strings etc., but this seems to be quite different(?).
Also, I tried using http://regexr.com/ and https://txt2re.com/ (didn't even understand how to work the latter...) but honestly I feel like I have no clue as to what to put where at this point since I'm basically guessing.
Again, sorry for posting such a basic question, but right now this is all gibberish to me, sadly.

This has little to do with jQuery or regular expressions. What you're asking about is a CSS selector which has different behaviour altogether. Your problem is with /\/\ vs \/\/.
Note that you don't actually have to escape the slashes here.
let images = document.querySelectorAll('a:not([href^="//images"])');
console.log(images);
cat
dog
fox
fox

That is not regex, that is JQuery selector. This is how you can match them:
$("a:not([href^='//images'])").each(function(){
console.log($(this).attr('href'));
});

Related

Find all urls except markdown link to autolink

I'm looking for a way to find all urls to replace them with a markdown link. However, in my string I already have some URLs already wrapped by the markdown syntax. So I need to ignore those cases. Is it possible with JS regex to do that?
Here's what I currently have:
(?:[^\]\)]|^)(htt\ps?:\/\/(www\.)?[-a-zA-Z0-9#:%._\+~#=]{1,256}\.[a-zA-Z0-9]{1,6}\b([-a-zA-Z0-9#:%_\+.~#?&//=]*))
Only the last line of text shouldn't be captured here:
https://regex101.com/r/qgm8jN/1
I truncated your regex a little bit (I was trying to remove variables), feel free to add stuff back as you see fit.
https://regex101.com/r/iVQvEu/1
primarily what you need to know is negative look behinds (http://www.regular-expressions.info/lookaround.html)
(?<!not)website
will match website as long as it is not preceded by not
so in your case, i used (?<!\]\() which looks for ]( and will return the website as long as the markdown symbols are not in front of it.
Again feel free to add/subtract to it, but that should at least point you in the right direction.

document.querySelectorAll polyfill

I was asked in a telephonic interview to write a document.querySelector/ document.querySelectorAll polyfill, utilizing the following
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
The polyfill should be able to take any combination of css selectors, for example .foo p.bar.baz span.qax.
I could not come up with a proper solution.
My approach ...
... was to parse the selector and start for the right.
With respect to .foo p.bar.baz span.qax
I wanted to parse the selector in something like ['.foo', ['p', '.bar',
'.baz'], ['span', '.qax']
take the right most element,
if it is an array, for the right most element of the array, fetch nodes with the available methods.
otherwise for the right most element of the array, fetch nodes with the available methods
and filter the available node with respect to the remaining selectors in the left
Where did I fail?
I could not figure out the regex to parse the selector
I guess I should have started from the left instead of right of the parsed selectors.
I searched for document.queryselector polyfill but could not comprehend {x:expression(document.__qsaels.push(this))} in most of the available solutions.
Any pointer would be helpful. Thanks!
Updates w.r.t. comments
Thanks everyone for your suggestions/comments.
#Sitian Liu, my primary query is 'how to implement querySelectorAll with strictly document.getElementById, document.getElementsByClassName, document.getElementsByTagName' I thought I could club {x:expression(document.__qsaels.push(this))} Thanks #RobG for the pointer to What does {x:expression(...)} do?.
#SravanS, I sorry, I don't know what is your definition of heavy, but the selector that was given to me had classes, tags, and child selector.
Polyfill intentionally omits attribute selectors
#guest271314 I don't remember if attribute selector was present. I guess it was intentionally omitted
#SravanS I appreciate your comments, but I am afraid to state, that you are assuming too much. Interviewer did want to dry run the code with respect to an HTML markup.
#SravanS #jfriend00 I am aware of sizzle, I thought I could get easy to comprehend answer here in StackOverflow, than reading through a 2242 lines of code. :)
#RobG echoed my concerns.
After going through all the comments, I am wondering if this question should be part of an 30 mins telephonic interview process, that too when you have to code it live in a Google Doc.
Where did I fail?
I could not figure out the regex to parse the selector
I believe in Google interview in 2017, the interviewer specifically told me “we are not looking for regex experts, so don’t invest time there”
In my case they were expecting me to break down the problem into simpler ones, I did this. I wrote seperate helper functions to do multiple things. And the unit functions which actually did finding part as leveregeable code, to be reused in all helpers recursively. The interviewer liked this and I cleared that round.
I will update the solution here in a week. In a gist, first you need to split the strings by spaces and > child selectors. For this splitting too, you can write a O(n) for-loop to go through the whole string. And not use the JS .split (not because it’s algorithm related, but because splitting that way will need further logic) For example, create child arrays only when you find one >.
Selectors on left has to be found. So I started with left first. I vaguely remember using t

Javascript RegExp parse URL make hyperlinks ignore img src

I am not very good with Regular Expressions, some times I can figure them out but...
I need to parse text strings (for a chat room project).
So as you would imagine any pasted URLs need to be converted to click-able hyper links.
I use this RegExp for that, cobbled together from examples I have found on the net. It appears to work quite well :
/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:~;#'#%&.=\]\[\*\$\!\?\/\,]+/g
Now another part of my project has to insert images in other words :
<img src="http://path/to/image" alt="alt" />
So I need the reg exp to ignore those, and I tried this :
/(?!src=")[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:~;#'#%&.=\]\[\*\$\!\?\/\,]+/g
But it doesn't work. Perhaps my expression is faulty or I am going about it the wrong way.
I may just mask out 'src="http' and run my expression then reapply what I masked out.
But before I do that I thought I would see if anyone here has any ideas.
Many thanks.
(?!src=")
is a negative lookahead, what you want there is a lookbehind, which javascript does not support.

Syntax Highlighter Numbering off and Closing List<Object> "tags"

This is kind of weird. I'm trying to get my code up on my website using Syntax Highlighter. I've come up against two weird problems.
1 - Code lines are off, in some cases worse than others
2 - Syntax Highlighter wants to close what it thinks are xml / html tags. If you go to the following link and look at the numbers and the bottom of the screen, you'll know what I mean.
http://kentcdodds.com/projectsamples/BankGUI/GUI.html
I'm not sure what's wrong. But I also just noticed it changed my capital S on String to a lower case s. I'm developing a program in Java to add all the html necessary before and after each of my .java files for my school projects this last year so I can put the code up for the world to see and hopefully help. So if I could get some help from someone with this Syntax Highlighter problem, that would be great.
It seems as though there is no real solution using this technology. So the best I can do is say hard-code changes for when String goes to lowercase and don't use line numbers. I'm sorry if this isn't helpful for people in the future. You might try one of these alternatives.

Backreference each character

For the sake of simplicity & learning something new, please don't suggest using two separate replace functions. I know that's an option but I would rather also know how to do this (or if it's not possible).
'<test></test>'.replace(/<|>/g,'$&'.charCodeAt(0))
This is what I've got so far. This sample code is, as you can tell, for another piece of code to escape HTML entities while still using innerHTML (because I do intend to include a few HTML entities such as small images, so again please don't suggest textContent).
Since I'm trying to replace both < and >, the problem is converting each individual one to their respective character codes. Since regular expressions allow for this "OR" condition as well as backreferences to each one, I'm hoping there's a way to get the reference of each individual character as they're replaced. $& will return <><> (because they're replaced in that order), but I don't know how to get them as they're replaced and take their character codes for the HTML entities. The problem is, I don't know what to use in this case if anything.
If that explanation wasn't clear enough, I want it to be something like this (and this is obviously not going to work, it'll best convey what I mean):
Assuming x is the index of the character being replaced,
'<test></test>'.replace(/<|>/g,'$&'.charCodeAt(x))
Hopefully that makes more sense. So, is this actually possible in some way?
'<test></test>'.replace(/[<>]/g,function(a) {return '&#'+a.charCodeAt(0)+';';});
I've put the characters in a square-bracket-thing (don't know it's proper name). That way you can add whatever characters you want.
The above will return:
<test></test>

Categories

Resources