up vote 0 down vote favorite
share [g+] share [fb]

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.

link|improve this question
92% accept rate
feedback

2 Answers

up vote 1 down vote accepted 
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>"
link|improve this answer
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! – CrisDeBlonde Mar 30 at 11:19
glad to be useful. – F. Calderan Mar 30 at 11:23
feedback
up vote 1 down vote

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

link|improve this answer
1  
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 ;) – CrisDeBlonde Mar 30 at 12:10
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! – Elias Van Ootegem Mar 30 at 12:19
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.