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.

Kristoffer Sall-Storgaard · Accepted Answer · 2009-10-17 11:57:18Z

3

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)

answered Oct 17, 2009 at 11:57

Kristoffer Sall-Storgaard

10.7k5 gold badges39 silver badges46 bronze badges

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

Comments

user180100 · Accepted Answer · 2009-10-17 11:59:14Z

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

answered Oct 17, 2009 at 11:59

user180100

Comments

bobince · Accepted Answer · 2009-10-17 12:54:15Z

0

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');
    });
});

answered Oct 17, 2009 at 12:54

bobince

538k111 gold badges675 silver badges846 bronze badges

1 Comment

Mr. Flibble Over a year ago

Thanks. The accepted solution seems to have solved my problem. If I run into difficulties down the road I will revisit your answer.

Collectives™ on Stack Overflow

jQuery replace strings in many classes

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related