0

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();
Matt Cashatt
  • 23,490
  • 28
  • 78
  • 111
  • If this is all a string, does it contain stuff that would prevent you from simply doing a string replacement of `_lg_db` to `_tn_db`? – Michael Berkowski Mar 25 '12 at 18:24
  • Yes there something preventing my doing that--I need to maintain the "_lg_db" in the `data-large` attribute but change it in the `src` attribute. Thanks. – Matt Cashatt Mar 25 '12 at 18:27

1 Answers1

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 */
mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • Thanks Mark, but this code needs to execute on the 'string' of html before hitting the DOM and I would think that means I cant use jQuery selectors on it. Am I missing something here? – Matt Cashatt Mar 25 '12 at 18:21
  • 1
    You can also pass a function to `.attr` so as to make it more concise: http://api.jquery.com/attr/#attr2. – pimvdb Mar 25 '12 at 18:22
  • @MatthewPatrickCashatt: Ah..you said "jQuery is OK" so I assumed you actually had a DOM to work with. – mpen Mar 25 '12 at 18:24
  • Agree that this should be fixed server side but that is not possible in this case with out a great deal of work (long story). Thank for your help though. If you happen to know how to work the `regex` magic that would be a huge help. – Matt Cashatt Mar 25 '12 at 18:25
  • @MatthewPatrickCashatt: Why can't you insert into the DOM first, and then "fix" it right away? – mpen Mar 25 '12 at 18:25
  • @Mark--I *can* do that, but would rather not because it starts loading these enormous image files into tiny (20px X 20px) thumbnails and their is a lag as they load. In writing this I am realizing that my example is reversed it should be the thumbnails that load in `src` and the large file path in `data-large`. I will correct. – Matt Cashatt Mar 25 '12 at 18:30
  • @MatthewPatrickCashatt: See my update. You don't actually have to put it into your DOM before you can start manipulating it. I'm hesitant to recommend a regex [because](http://stackoverflow.com/a/1732454/65387) – mpen Mar 25 '12 at 18:31
  • Thanks Mark! I got it working. I did not know that you could instantiate a jQuery object before it is in the DOM! – Matt Cashatt Mar 25 '12 at 18:44