How to Find text and replace using jQuery

Question

Im trying to find a solution to search for a text string "Tony" contained in the DOM and replace it with a text String "Tiger".

Anyone have any insight or ideas of how to do so? Im guessing it will take an each statement coupled with a replace function and possibly contains?

Thanks Jake

Answer 1

Page wide, you can use something like this:

var $body = $('body');
var html = $body.html();
var newHtml = html.replace('Tony', 'Tiger');
$body.html(newHtml);

Or, if you have a more specific container, use jQuery to select that child container and do the same thing.

Either way, it is sort of a shotgun approach. It will change the string in both visible text and html element attributes. A more detailed approach might be needed if the string needed to be ignored in certain locations.

Answer 2

You can use this to search all children of the body element and replace the text...

$('body').children().each(function(){$(this).text( $(this).text().replace('Tony','Tiger') )});

It uses jQuery. It also should only alter the textual content of elements and none of the HTML formatting...

You can also use this method which uses a RegExp and will get all nested elements:

 $('body').html( $('body').html().replace(/Tony/gi,'tiger') );