JSFiddle - React, Tailwind, and code Playground

HTML

<b>
    <input type="checkbox" value="" />
    I NEED replaced and I need it twice.
</b><br />
<b>
    <input type="checkbox" value="" />
    I need replaced
</b><br />
<b>
    <input type="checkbox" value="" />
    I need replaced
</b><br />
<b>
    <input type="checkbox" value="" />
    I need replaced
</b><br />
<b>
    <input type="checkbox" value="" />
    I need replaced
</b>

JavaScript

var highlightSomeText = function(needle, node){
        node = node || document.body; // initialize the first node, start at the body

        if(node.nodeName == 'SCRIPT') return; // don't mess with script tags 

        if(node.nodeType == 3){ // if node type is text, search for our needle
            var parts = node.nodeValue.split(new RegExp('(' + needle + ')','i')); // split text by our needle
            if(parts.length > 1){ // if we found our needle
                var parent = node.parentNode
                for(var i = 0, l = parts.length; i < l;){
                    var newText = document.createTextNode(parts[i++]); // create a new text node, increment i
                    parent.insertBefore(newText, node);
                    if(i != l){ // if we're not on the last part, insert a new span element for our highlighted text
                        var newSpan = document.createElement('span');
                        newSpan.className = 'textSearchFound';
                        newSpan.style.color = '#0095DA';
                        newSpan.innerHTML = parts[i++];
                        parent.insertBefore(newSpan, node);
                    }
                }
                parent.removeChild(node); // delete the original text node
            }
        }

        for(var i = node.childNodes.length; i--;) // loop through all child nodes
            highlightSomeText(needle, node.childNodes[i]);
    };

    highlightSomeText('I need');