Question

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

这是我到目前为止所拥有的

＆＃13;

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

＆＃13;

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

＆＃13;

但是它只替换了最后一个图像元素的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更明确来解决它。 Greedy matching generally performs the best，并且必须使用延迟评估（非贪婪）通常表明您的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>

不完全确定我正在使代码标签正确。仍在学习使用它们。

正则表达式仅替换最后匹配

2 个答案: