正则表达式 while-loop 仅将 1 个值推送到我的数组

Question

我的变量htmlContent 包含一个字符串，其内容采用格式正确的 HTML 代码，它包含多个 img 标记。

我正在尝试获取图像src 属性的所有值并将它们放入数组srcList。

但是，我在使用以下代码时遇到的问题是，它总是提醒一个只有 1 个源值的数组，而我将它设置为将 all 源 URL 推送到数组，而不仅仅是一个。

let srcList = [],
    imgSrc,
    regex = /<img.*src="(.*?)"/gi;

while ((imgSrc = regex.exec(htmlContent)) !== null) {
    srcList.push(imgSrc[1]);
}

alert(JSON.stringify(srcList));

我怎样才能按照我的预期进行这项工作？

Answer 1

您的正则表达式中img 和src 之间的.* 贪婪地匹配从第一个img 到最后一个src 的所有内容——否则您的代码基本上是正确的，但只会捕获最后一个图像出于这个原因的来源。

将贪心匹配替换为仅在每个 <img> 标记内匹配的内容的示例（如果如 cmets 中所述，html 字符串是单行）：

let srcList = [],
  imgSrc,
  regex = /<img[^>]*src="(.*?)"/gi;

let htmlContent = '<img src="foo"><img class="bat" src="bar"><img src="baz">';


while (imgSrc = regex.exec(htmlContent)) {
  srcList.push(imgSrc[1]);
}

console.log(srcList);

（我觉得有必要在此处插入强制性的“don't try to parse HTML with regular expressions”警告。请考虑使用类似$('img').each(function() {srcList.push($(this).attr('src'))} 的内容。）