JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>

CSS

p{ color:red; }

JavaScript

//$('div:contains("John")').wrapInner('<p></p>');

// Find text in descendents of an element, in reverse document order
// pattern must be a regexp with global flag
//
function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(document.body, /\bJohn\b/g, function(node, match) {
    var p= document.createElement('p');
   // node.splitText(match.index+6);
    p.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(p, node.nextSibling);
});