Regex javascript result different than expected

Question

I have this regex

 var reg = new RegExp('["\\>]{1}\\$([^"\\<\\> ]*)["\\<]{1}', 'g');

That I run on this string

'<span>$name</span><img src="$images[0].src"><img src="$images[1].src"><img src="$images[2].src">'

If I test it on sites like RegExr it works properly but if I test it in FireFox

var reg = new RegExp('["\\>]{1}\\$([^"\\<\\> ]*)["\\<]{1}', 'g');
var match = reg.exec('<span>$name</span><img src="$images[0].src"><img src="$images[1].src"><img src="$images[2].src">');
console.log(match);

It only matches ">$name<". How to have it catch all like on the site?

This is not a duplicate. i'm not working with query strings, beside it works online of the site.

Note that in the example you gave from RegExr, you have the `g` (global) flag turned on — smac89, Dec 21 '17 at 17:01
Why are you using `new RegExp` instead of a literal in `//`? — Barmar, Dec 21 '17 at 17:02
Not a duplicate, not working with query strings. Also it works online on regexr which is using JS I believe — Eric, Dec 21 '17 at 17:05
You should look at that link again, the problem you are facing lies in not using a while loop with `exec` to retrieve all the matches. It may not be an exact duplicate, but it points to the reason why your single call to `exec` is not finding all the matches — smac89, Dec 21 '17 at 17:06
They're much easier to read in literal format, since you don't have to double all the backslashes. — Barmar, Dec 21 '17 at 17:09

score 5 · Accepted Answer · answered Dec 21 '17 at 17:07

Regexp.prototype.exec() just returns the first occurrence of a match, you have to call it in a loop to get all the matches.

Simpler is to use String.prototype.match(), it returns an array of all the matches.

You only need to use exec() if you also need to get the capture groups.

var reg = new RegExp('[">]\\$[^"<> ]*["<]', 'g');
var str = '<span>$name</span><img src="$images[0].src"><img src="$images[1].src"><img src="$images[2].src">';
var match = str.match(reg);
console.log(match);

score 4 · Answer 2 · answered Dec 21 '17 at 17:07

The .exec() method return only the first occurrence, if you want to return all occurences use .match() :

var reg = new RegExp('[>"]\\$([^"<> ]*)["<]', 'gm');
var my_string = '<span>$name</span><img src="$images[0].src"><img src="$images[1].src"><img src="$images[2].src">';
var match = my_string.match(reg);

console.log(match);

score 3 · Answer 3 · answered Dec 21 '17 at 17:09

You should convert HTML text to DOM and parse it.

var div = document.createElement('div');
div.innerHTML = '<span>$name</span><img src="$images[0].src"><img src="$images[1].src"><img src="$images[2].src">';
var result = [];
result.push(div.querySelector('span').innerText);
var src = Array.from(div.querySelectorAll('img')).map(img => img.getAttribute('src'));
result = result.concat(src);
console.log(result);

You can use string#match.

var reg = new RegExp('["\\>]{1}\\$([^"\\<\\> ]*)["\\<]{1}', 'g');
var match = '<span>$name</span><img src="$images[0].src"><img src="$images[1].src"><img src="$images[2].src">'.match(reg);
console.log(match);

Regex javascript result different than expected

3 Answers3