4

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

jrutter
  • 3,173
  • 9
  • 42
  • 51
  • 2
    More details, please. Do you have any idea of _where_ in the DOM it might be? Do you want to replace _every_ occurrence of `Tony` with `Tiger` no matter where it occurs? – Matt Ball Dec 15 '10 at 22:29
  • do you the html container for that?? or its straight replace all – kobe Dec 15 '10 at 22:31
  • Yes, I want to replace every occurence of "Tony" with "Tiger" - where ever in the DOM it lies - must probably within the .container element. – jrutter Dec 15 '10 at 22:35
  • You should probably clarify, but I assume you only want to replace **text nodes** that contain the string "Tony"... i.e. don't replace if it appears in an attribute – David Tang Dec 15 '10 at 23:18

3 Answers3

18

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') );
exoboy
  • 2,040
  • 2
  • 21
  • 29
  • This won't work because `children()` doesn't recursively search through the DOM - it only gives you the immediate children. – David Tang Dec 15 '10 at 23:14
  • Its not working on my page: http://www.laithwaiteswine.com $('.container').children().each(function(){$(this).text( $(this).text().replace('Laithwaites','Tiger') )}); - It is removing all the DOM or breaking it. – jrutter Dec 16 '10 at 00:04
  • 1
    @jrutter: Not sure why that is happening to you without seeing your code. However, I have upated my solution with an alternate one using a RegExp approach ---> $('body').html( $('body').html().replace(/Tony/gi,'tiger') ); – exoboy Dec 16 '10 at 00:18
  • 1
    I tested it and it worked well even if items are nested multiple times. – exoboy Dec 16 '10 at 00:18
3

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.

slolife
  • 19,520
  • 20
  • 78
  • 121
2

Is it possible to couple this with a server-side solution? You could wrap every occurence of the word server side with a special class, like <span class="replaceme">texttoreplace</span>.

Running a javascript replace on the resulting classes only should speed things up.

Simon
  • 937
  • 1
  • 8
  • 25
  • 1
    If this was a possibility, why wouldn't he replace the string on the server side to begin with? Adding unnecessary dom elements seems excessive – ximi May 31 '12 at 05:54