Javascript find and replace src variables

Question

imagine we have a variable in javascript

var html = "<html>...<img src="a"></img>...<a><img src="b"></img></a></html>"

we never know when img tag are located. We don't have any id's. They only have different src, and we know this src because we have them stored in a database.

How to write a method that will take every html content from 'html' variable defined above and change only src's there. For example if I know that src has a value 'a' then I want to invoke some method that will write there 'c' instead of an 'a' and so on . With some loop I would like to change src's only.

Any thoughts?

@RoryMcCrossan parsing and replacing seem to be different things, there is nothing about parsing html-tags in this question, it is about replacing one known substring to another. There is nothing to do with RegExp, and as OP says he knows the values, then he can simply replace() them — teran
– teran, Commented Apr 13, 2016 at 10:42
The OP didn't mention Regex, boomcode did. Also I would advise against using replace for this as it's simply too brittle. One extra attribute in the img element and the replace won't find it, as per the comment noted on my answer below. OP may know the HTML right now, but it's always best to code defensively so that by simply changing the input you won't break the logic. — Rory McCrossan
– Rory McCrossan, Commented Apr 13, 2016 at 10:43

Munawir · Accepted Answer · 2016-04-13 12:17:06Z

1

From your question, you know the current src.

we know this src because we have them stored in a database

with curSources storing current src's and having new src's in newSources array, you can loop through the string to replace the src of every img tag

var html = '<html>...<img class="someclass" src="a"></img>...<a><img src="b"></img></a></html>';
var count = (html.match(/<img/g) || []).length;  //number of img tags

var curSources = ['a','b'];
var newSources = ['c','d'];

for (i=1; i<=count; i++) {
  a = html.split('<img', i).join('<img').length;  //index of i'th occurance of <img
  b = html.indexOf('src',a);                      //index of i'th occurance of src
  c = html.substring(a,b+5);                      //split from <img to src="
  html = html.replace(c+curSources[i-1]+'"',c+newSources[i-1]+'"');
}

alert(html);

edited Apr 13, 2016 at 12:17

answered Apr 13, 2016 at 10:42

Munawir

3,3569 gold badges36 silver badges51 bronze badges

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

1 Comment

kamilws Over a year ago

thanks. How could I foreach all the img tags ? because your code is prepared fro 'img src=..." sometimes in my code there is some attributes between. And I want to call another method (invoke with src) and return another src that will put into ti

Rory McCrossan · Accepted Answer · 2016-04-13 10:32:36Z

1

Once you put that string in a jQuery object you can use standard DOM traversal methods on it. Try this:

var html = '<html>...<img src="a"></img>...<a><img src="b"></img></a></html>';
$(html).find('img[src="a"]').prop('src', 'c');

Thanks to @Tushar for pointing out that you need to also be careful with the quotes you use in the HTML string. If you use " within the string you should use ' to delimit it, as in the example above.

edited Apr 13, 2016 at 10:32

answered Apr 13, 2016 at 10:28

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

2 Comments

Xiflado Over a year ago

If html is a string variable, you can also use the old plain replace html.replace('img src="a"', 'img src="something_else"');.

Rory McCrossan Over a year ago

@Xiflado true, but that would break where there is <img class="foo" src="a" />. The above is more robust

Collectives™ on Stack Overflow

Javascript find and replace src variables

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

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

Linked

Related