Question

Background:

I have string of html with about 10 image tags that passes through some JavaScript as a string at runtime before being injected into a containing element. The data-thumb tag of each image is slightly incorrect and needs to be altered before making it into the DOM. Here is an example:

<img src="foo_lg_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_lg_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_lg_db.jpg" data-large="fizz_lg_db.jpg" />

Needs to become:

<img src="foo_tn_db.jpg" data-large="foo_lg_db.jpg" />
<img src="bar_tn_db.jpg" data-large="bar_lg_db.jpg" />
<img src="fizz_tn_db.jpg" data-large="fizz_lg_db.jpg" />

Question:

In JavaScript (jQuery is OK), how do I achieve this search and replace?

THE ANSWER:

Thanks to Mark’s answer I learned that it is possible to instantiate a jQuery object before it hits the DOM so, rather than using regex, I did something like this:

var stringHtml = "<img . . .";
var div = $("<div>").html(stringHtml );
$.each(div.find('img[src]'), function () {
    $(this).attr('src', $(this).attr('src').replace('_lg', ''));
});

return div.html();

Answer 1

$('img[data-thumb]').each(function() {
    $(this).attr('data-thumb', $(this).attr('data-thumb').replace('_lg_','_tn_'));
});

Something like that in jQuery.

Sounds like a problem you should be fixing server-side if possible though.

---

If you give jQuery an HTML element like $('<div>') it will essentially create the HTML element for you and then you can manipulate it before inserting it into your DOM. I don’t know if it will handle multiple elements, but you can create a container first (like above) and then set the content like so

$('<div>').html(yourHtml).find('img[data-thumb'])./* code above */