JSFiddle - React, Tailwind, and code Playground
JavaScript
// Reusable generic function
function traverseElement(el, regex, textReplacerFunc) {
// script and style elements are left alone
if (!/^(script|style)$/.test(el.tagName)) {
var child = el.lastChild;
while (child) {
if (child.nodeType == 1) {
traverseElement(child, regex, textReplacerFunc);
} else if (child.nodeType == 3) {
textReplacerFunc(child, regex);
}
child = child.previousSibling;
}
}
}
// This function does the replacing for every matched piece of text
// and can be customized to do what you like
function textReplacerFunc(textNode, regex, text) {
textNode.data = textNode.data.replace(regex, "FOO");
}
// The main function
function replaceWords(html, words) {
var container = document.createElement("div");
container.innerHTML = html;
// Replace the words one at a time to ensure each one gets matched
for (var i = 0, len = words.length; i < len; ++i) {
traverseElement(container, new RegExp(words[i], "g"), textReplacerFunc);
}
return container.innerHTML;
}
var html = "Lorem ipsum dolor span sit amet, consectetuer <span class='dolor'>dolor</span> adipiscing elit.";
alert( replaceWords(html, ["dolor"]) );