正则表达式替换仅适用于最后一场比赛

Question

我正在尝试用纯文本替换许多图像html元素的src（在浏览器中呈现它们之前）。

这是我到目前为止的

 var base = './images'; var sample = '<p><img src="1.png" alt="image-1"></p><p><img src="2.png" alt="image-1"></p><p><img src="3.png" alt="image-1"></p>'; sample = sample.replace(/(<img.+src=")(?!http:\\/\\/)(.*?)"/g, '$1' + base + '/$2"'); $('pre').text(sample); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre></pre> 

但是，它仅替换最后一个图像元素的src。 我在这里想念什么？

Answer 1

<img.+src的贪婪匹配捕获了第一个img和最后一个src之间的所有内容； 因此，您的$1是

<img src="1.png" alt="image-1"></p><p><img src="2.png" alt="image-1"></p><p><img src="

更改为非贪婪匹配：

sample = sample.replace(/(<img.+?src=")(?!http:\/\/)(.*?)"/g, '$1' + base + '/$2"');

 var base = './images'; var sample = '<p><img src="1.png" alt="image-1"></p><p><img src="2.png" alt="image-1"></p><p><img src="3.png" alt="image-1"></p>'; sample = sample.replace(/(<img.+?src=")(?!http:\\/\\/)(.*?)"/g, '$1' + base + '/$2"'); $('pre').text(sample); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre></pre> 

Answer 2

正如@elclanrs在评论中提到的那样，似乎您在这里使用了错误的方法。 通过jQuery等通过DOM更改它似乎是更合适的方法。

话虽如此，如果由于某种原因这是解决它的合适方法（我不知道所有变量），则应通过使RegEx更明确地解决它。 贪婪的匹配通常表现最佳 ，并且必须使用惰性评估（非贪婪）通常表明您的RegEx不够具体，或者您正在使用RegEx解决某些不应由RegEx解决的问题。 这应该可以解决问题：

 var base = './images'; var sample = '<p><img src="1.png" alt="image-1"></p><p><img src="2.png" alt="image-1"></p><p><img alt="image-1" src="3.png"></p>'; sample = sample.replace(/(<img[^>]+src=")(?!http:\\/\\/)([^"]+)"/g, '$1' + base + '/$2"'); $('pre').text(sample); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <pre></pre> 

不确定我是否正确地执行了代码标记。 还在学习使用那些。