0

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?

Priya
  • 1,359
  • 6
  • 21
  • 41
kamilws
  • 171
  • 1
  • 16
  • use regex for matching and replacing – boomcode Apr 13 '16 at 10:29
  • @boomcode NOOOOOOOOO! [Tony the pony... he comes](http://stackoverflow.com/a/1732454/519413) – Rory McCrossan Apr 13 '16 at 10:30
  • @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 Apr 13 '16 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 Apr 13 '16 at 10:43

2 Answers2

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
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);
Munawir
  • 3,346
  • 9
  • 33
  • 51
  • 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 – kamilws Apr 13 '16 at 11:48