Please Explain Why JS RegEx Doesn't Work

Question

Trying to extract the urls contained within all img, link, and script tags in a source code string. Using Sublime Text regex (img|link|script).+?(href|src)="(.+?)" finds the correct results:

=>

link rel="stylesheet" type="text/css" href="assets/css/dynbm.css"
img src="assets/img/sponsor-image.png"
img class="logo" src="assets/img/sponsor-logo.png"

but using the following code via JS returns a random number of urls (even some but not all a tag urls):

var res,
    lnks = [],
    lnk_exp = new RegExp('(img|link|script).+?(href|src)="(.+?)"', 'gi');
while (res = lnk_exp.exec(src)) {
    lnks.push(res[3]);
}
console.log(lnks);

=>

[
      "assets/css/dynbm.css", 
      "/click?url=http://www.website.com/imglink", 
      "assets/img/sponsor-image.png", 
      "/click?url=http://www.website.com/link1", 
      "/click?url=http://www.website.com/link3", 
      "/click?url=http://www.website.com/cta", 
      "assets/img/sponsor-logo.png"
]

Full string for those interested:

Without knowing what the source is it's impossible to know why, or if, the code is doing what it should. Also, you're looking only for double-quoted values, which may or may not be correct. — Dave Newton, Jan 02 '14 at 16:36
Playing around with a [regex tester](http://regexpal.com/) might help — Drew Stephens, Jan 02 '14 at 16:37
Try looking at `res[0]` instead of `res[3]`. `res[3]` will only return the part after the = sign. — Scott Mermelstein, Jan 02 '14 at 16:38
You're not looking for tags in your regex as far as I can tell...? Is that what you're looking to do, get tags? — dudewad, Jan 02 '14 at 16:43
read this on why reg exp to match html is bad. http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not — epascarello, Jan 02 '14 at 16:45
I'm not trying to parse an HTML document. I'm simply trying to prepend a base url to some urls contained within a simple HTML string, and for that RegEx works just fine. — tenub, Jan 02 '14 at 16:50

score 1 · Accepted Answer · edited May 23 '17 at 12:19

I think all you need is a < at the beginning of your regex, which will keep it from inadvertently matching things with the substring img|link|script, but that aren't those types of tags, like this, from your example source:

img_right"><a href="/click?url=http://www.website.com/imglink"

Thus, the regex should be:

<(img|link|script).+?(href|src)="(.+?)"

Of course, HTML doesn't require a tag's named to be directly adjacent to the opening angle bracket, so you should have an optional number of spaces, too:

< *(img|link|script).+?(href|src)="(.+?)"

Do remember that HTML ought not be parsed with regex for Real Work™.

score 0 · Answer 2 · answered Jan 02 '14 at 16:39

First, your headline is a bit sensationalist. Of course JS RegEx works, it just doesn't work like Sublime Text's regex.

In this case, it does exactly what it says it will. res[1]...res[n] returns:

The parenthesized substring matches, if any. The number of possible parenthesized substrings is unlimited.

Your 3rd substring in the search is everything after the equals, which it looks like you're getting output. Just push res[0] instead, and you'll get the full match.

score 0 · Answer 3 · answered Jan 02 '14 at 16:41

0

foolish me, found the problem myself. needed to include a < before img/link/script so that things like /click?url=http://www.website.com/link1 aren't counted toward a <link> match.

answered Jan 02 '14 at 16:41

tenub

3,386
1
16
25

Please Explain Why JS RegEx Doesn't Work

3 Answers3