Replace words in the body text
To replace a string in your HTML with another use the replace method on innerHTML:
document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');
Note that this will replace the first instance of hello
throughout the body, including any instances in your HTML code (e.g. class names etc..), so use with caution - for better results, try restricting the scope of your replacement by targeting your code using document.getElementById or similar.
To replace all instances of the target string, use a simple regular expression with the g
lobal flag:
document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
I ended up with this function to safely replace text without side effects (so far):
function replaceInText(element, pattern, replacement) {
for (let node of element.childNodes) {
switch (node.nodeType) {
case Node.ELEMENT_NODE:
replaceInText(node, pattern, replacement);
break;
case Node.TEXT_NODE:
node.textContent = node.textContent.replace(pattern, replacement);
break;
case Node.DOCUMENT_NODE:
replaceInText(node, pattern, replacement);
}
}
}
It's for cases where the 16kB of findAndReplaceDOMText
are a bit too heavy.