Replace text in HTML page with jQuery
JqueryJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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 - Jquery
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 - Jquery
>...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 - Jquery
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);
});
Solution 5 - Jquery
$("#elementID").html("another string");
Solution 6 - Jquery
var replaced = $("body").html().replace(/-1o9-2202/g,'The ALL new string');
$("body").html(replaced);
for variable:
var replaced = $("body").html().replace(new RegExp("-1o9-2202", "igm"),'The ALL new string');
$("body").html(replaced);
Solution 7 - Jquery
Check out Padolsey's article on DOM find and replace, as well as the library to implement the described algorithm.
In this sample usage, I replace all text inside a <div id="content"> that looks like a US telephone number with a tel: scheme link:
findAndReplaceDOMText(document.getElementById('content'), {
find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
replace:function (portion) {
var a = document.createElement('a');
a.className = 'telephone';
a.href = 'tel:' + portion.text.replace(/\D/g, '');
a.textContent = portion.text;
return a;
}
});