Replace text in HTML page with jQuery
How do I replace any string in jQuery?
Let's say I have a string "-9o0-9909" and I want to replace it with another string.
Solution 1:
You could use the following to replace the first occurrence of a word within the body of the page:
var replaced = $("body").html().replace('-9o0-9909','The new string');
$("body").html(replaced);
If you wanted to replace all occurrences of a word, you need to use regex and declare it global /g:
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);
If you wanted a one liner:
$("body").html($("body").html().replace(/12345-6789/g,'<b>abcde-fghi</b>'));
You are basically taking all of the HTML within the <body> tags of the page into a string variable, using replace() to find and change the first occurrence of the found string with a new string. Or if you want to find and replace all occurrences of the string introduce a little regex to the mix.
See a demo here - look at the HTML top left to see the original text, the jQuery below, and the output to the bottom right.
Solution 2:
Like others mentioned in this thread, replacing the entire body HTML is a bad idea because it reinserts the entire DOM and can potentially break any other javascript that was acting on those elements.
Instead, replace just the text on your page and not the DOM elements themselves using jQuery filter:
$('body :not(script)').contents().filter(function() {
return this.nodeType === 3;
}).replaceWith(function() {
return this.nodeValue.replace('-9o0-9909','The new string');
});
this.nodeType is the type of node we are looking to replace the contents of. nodeType 3 is text. See the full list here.
Solution 3:
...I have a string "-9o0-9909" and I want to replace it with another string.
The code below will do that.
var str = '-9o0-9909';
str = 'new string';
Jokes aside, replacing text nodes is not trivial with JavaScript.
I've written a post about this: Replacing text with JavaScript.
Solution 4:
The html replace idea is good, but if done to the document.body, the page will blink and ads will disappear.
My solution:
$("*:contains('purrfect')").each(function() {
var replaced = $(this).html().replace(/purrfect/g, "purrfect");
$(this).html(replaced);
});