Question

I have a string contaning some html markup, like this:

var html = "<div>
    <img src="http://test.com/image1.png" />
    <h1>SOME TEXT</h1>
    <img src="http://text.com/image2.jpg" />
</div>";

i want to replace all urls inside src="..."

It is ok if i do html = html.replace(/[^-]src\=["|'](.*?)['|"]/g, "SOME_URL");
then all src="..." become src="SOME_URL"

But now i want to replace each match with a different string, taken from an array, but i’m having trouble with this.
I think i have to use a function for the replacement, but not sure how to implement it.
Something like:
html = html.replace(/[^-]src\=["|'](.*?)['|"]/g, function ($0, $1){ //what do i do here??? });

So, if i have:

var arr = [];
arr['http://test.com/image1.jpg']='file1';
arr['http://test.com/test.jpg']='file3';

the html string from above will become:

"<div>
    <img src="file1" />
    <h1>SOME TEXT</h1>
    <img src="http://text.com/image2.jpg" />
</div>"

Note that ‘http://text.com/image2.jpg’ is not a key of the array, so it does not gets replaced.

Any help appreciated, thank you in advance.

Answer 1

var html = '<div><img src="http://test.com/image1.jpg" />...</div>';

var arr = { 
 'http://test.com/image1.jpg' : 'file1',
 'http://test.com/test.jpg'   : 'file3'
}

html = html.replace(/[^-]src\=["|'](.*?)['|"]/g, function ($0, $1){ 
  return ' src="' + (arr[$1] || $1) + '"';
});

console.log(html) returns

"<div><img src="file1" /><h1>SOME TEXT</h1><img src="http://text.com/image2.jpg" /></div>"