JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="searchField" />
<div id="someContainer">
    <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>
</div>

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]);
};

$('#searchField').on('keyup', function(e){
    // unwrap previously found terms and normalize parent
    $('.textSearchFound').each(function(i, el){
        $(el).contents().unwrap().
        parent()[0].normalize();
    });
    var sanitized = this.value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    if(sanitized)
        highlightSomeText(sanitized, $('#someContainer')[0])
});