Regex Replace only working on Last Match

Question

I'm trying to replace the src of a number of image html elements in plain text (before they are rendered in the browser).

Here's what I have so far

 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> 

However it only replaces the src of the last image element. What am I missing here?

Answer 1

The greedy match in <img.+src is catching everything between the first img and the last src ; your $1 is therefore

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

Change to a non-greedy match:

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

As @elclanrs metions in a comment, it seems like you are using the wrong approach here. Changing it trough the DOM via jQuery or the like seems a more appropriate method.

That being said, if, for some reason, this is the opportune way to solve it (I do not know all the variables), you should solve it by making the RegEx more explicit. Greedy matching generally performs the best , and having to use lazy evaluation (non-greedy) is generally a sign that either your RegEx is not specific enough, or that you are using RegEx to solve something that should not be solved with RegEx. This should do the trick somewhat:

 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> 

Not exactly sure I'm doing the code tags correct though. Still learning to use those.