Jquery replacing text inside html

Question

Is there a more elegant way replacing a text inside an html element than :

$el = $("#myDiv");
$el.html( $el.html().replace("something", "something new") );

• DOK: For anyone who misses the point here (as I did), we want to replace only part of the text, not all of it. It would have been helpful to show the complete text before and after.

Answer 1

$('#myDiv').html(function(index, oldhtml) {
 return oldhtml.replace('something', 'something new');
});

• DOK: Why are you passing in the index?
• Phil: @DOK To be able to set the 2nd argument I'd imagine
• Darin Dimitrov: @DOK, because that's how the signature of the callback is defined. It represents the index in the matched set of elements by the selector. In this case it will always be the same as an id selector was used (which is supposed to be unique).
• ic3: Is this method quicker (or using less resourced) ?
• Darin Dimitrov: @icCube, yes, because the selector is evaluated only once.

Answer 2

If I understand:

oldText = $('#myDiv').html();
$('#myDiv').html( oldText.replace('something','something new') );

http://jsfiddle.net/wmgBN/

• ic3: is replacing in the html all "something" with "something new", not putting "something new" as the new html content
• Naveed: @icCube: is it what your are looking for ?

Answer 3

there is nothing more elegant than the example you wrote! Check this exmple http://blog.chapagain.com.np/jquery-how-to-replace-string-div-content-and-image-src/

• Eugene: I think example of Darin Dimitrov is better (I can't judge the elegance). It's better because there is only one call of .html() method, but in author's example (and example from your link) there are 2 calls of .html() method

Answer 4

you can try

e1.html(function(i,oldHtml){
 return oldhtml.replace("something", "something new");
}

its different but not sure about elegance.