javascript regex - replace each match of given expression with different string

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.

Fabrizio Calderan · Accepted Answer · 2012-03-30 11:10:06Z

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>"

answered Mar 30, 2012 at 11:10

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CdB Over a year ago

Just perfect! I thought i should assign something in there (eg $0=arr[$1];), should have thought of the return... Thanks Fabrizio, saved my day!

Elias Van Ootegem · Accepted Answer · 2012-03-30 11:16:57Z

1

I'd forget about regex in this case, if you have an array containing all urls and their individual replacements in an object, why not do something like:

for (i in replaceObj)
{
    html = html.split(i).join(replaceObj[i]);
}

tried it in console:

html = '<div><img src="imgs/img.jpg"/></div>';
replaceObj = {};
replaceObj['imgs/img.jpg'] = 'file';
for(i in test){html = html.split(i).join(replaceObj[i])};

output: <div><img src="file"/></div>. You could split on src="'+i'"' and concat. the same when joining to be on the safe side... but bottom line: keep it simple, whenever you can

answered Mar 30, 2012 at 11:16

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

2 Comments

CdB Over a year ago

Thanks Elias for bothering with my question. Interesting approach, but i would prefer not to change my initial design, as far as this is possible. Thanks again for replying though ;)

Elias Van Ootegem Over a year ago

Though I don't know your initial design, and without wanting to be pushy or offensive: the only thing that I leave out is the regex, as far as I can tell... I can't help it, really... whenever I see someone using regex in situations where I wouldn't, I have to react... call it OCD if you like ;-)... good luck with your project!

Collectives™ on Stack Overflow

javascript regex - replace each match of given expression with different string

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related