jQuery replace strings in many classes

Question

I'm trying to use jQuery to replace all occurrences of a particular string that occurs in a certain class. There are multiple classes of this type on the page.

So far I have the following code:

var el = $('div.myclass');
if(el  != null && el.html() != null )
{
    el.html(el.html().replace(/this/ig, "that"));
}

This doesn't work if there is more than one div with class myclass. If there is more than one div then the second div is replaced with the contents of the first! It is as if jQuery performs the replacement on the first div and then replaces all classes of myclass with the result.

Anyone know how I should be doing this? I'm thinking some kind of loop over all instances of mychass divs - but my JS is a bit weak.

Answer 1

I think what you are looking for is something like this:

$('div.myclass').each(function(){
    var content = $(this).html();
    content = content.replace(/this/ig,'that');
    $(this).html(content);
});

(not tested)

Answer 2

slightly different of previous answer:

$('div.myclass').each(function(i, el) {
  if($(el).html() != "" ) {
    $(el).html($(el).html().replace(/this/ig, "that"));
  }
});

should work

Answer 3

If the contents of your .myclass elements are purely textual, you can get away with this. But if they contain other elements your regex processing might change attribute values by mistake. Don't process HTML with regex.

Also by writing to the innerHTML/html(), you would lose any non-serialisable data in any child element, such as form field values, event handlers and other JS references.

function isTextNode(){
    return this.nodeType===3; // Node.TEXT_NODE
}

$('div.myclass, div.myclass *').each(function () {
    $(this).contents().filter(isTextNode).each(function() {
        this.data= this.data.replace(/this/g, 'that');
    });
});