正则表达式 javascript 结果与预期不同[重复]答案

【问题标题】：Regex javascript result different than expected [duplicate]正则表达式 javascript 结果与预期不同[重复]
【发布时间】：2018-06-04 09:32:26
【问题描述】：

我有这个正则表达式

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

我在这个字符串上运行

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

如果我在 RegExr 这样的网站上测试它，它可以正常工作，但如果我在 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);

它只匹配">$name<"。如何让它在网站上一网打尽？

这不是重复的。我没有使用查询字符串，除了它可以在网站上在线使用。

【问题讨论】：

避免对 HTML 文本使用正则表达式。
不要对 HTML 文本使用正则表达式。
仅供参考，您无需转义 > 和 <。
而且你几乎不需要{1}。
@Barmar 没有区别，只是一个偏好......

标签： javascript regex

【解决方案1】：

Regexp.prototype.exec() 只是返回匹配项的第一次出现，您必须在循环中调用它才能获取所有匹配项。

更简单的是使用String.prototype.match()，它返回一个包含所有匹配项的数组。

如果您还需要获取捕获组，则只需使用exec()。

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);

【讨论】：

【解决方案2】：

.exec() 方法只返回第一次出现，如果你想返回所有出现的次数，请使用 .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);

【讨论】：

【解决方案3】：

您应该将 HTML 文本转换为 DOM 并对其进行解析。

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);

您可以使用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);

【讨论】：