JSFiddle - React, Tailwind, and code Playground
HTML
<div id="textoid">
Hola, este texto es un texto de prueba, <span class="clase1"> la prueba consiste </span> en reemplazar en <span class="clase2"> este texto </span>
</div>
CSS
#textoid span{
color:red;
}
JavaScript
var matchText = function(node, regex, callback, excludeElements) {
var child = node.firstChild;
do {
if (child.nodeType === 3) {
//alert( child.textContent );
//alert( child.data );
child.data.replace(regex, function(all) {
var args = [].slice.call(arguments),
offset = args[args.length - 2];
if(offset > child.data.length){
offset = child.data.indexOf(all);
}
var newTextNode = child.splitText(offset);
newTextNode.data = newTextNode.data.substr(all.length);
callback.apply(window, [child].concat(args));
child = newTextNode;
});
}
} while (child = child.nextSibling);
return node;
}
var searchTerm = 'texto';
matchText(document.getElementById("textoid"), new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
var span = document.createElement("span");
span.textContent = match;
node.parentNode.insertBefore(span, node.nextSibling);
});