JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://johannburkard.de/resources/Johann/jquery.highlight-3.js"></script>
To highlight all occurrances of “bla” (case insensitive) in all li elements, use the following code

CSS

.red { background-color: red }
.blue { background-color: blue }
.green { background-color: green }

JavaScript

jQuery.fn.highlight = function(pat, css) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = css;
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        } else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        return skip;
    }
    return this.each(function() {
        innerHighlight(this, pat.toUpperCase());
    });
};

jQuery.fn.removeHighlight = function() {
    return this.find("span.highlight").each(function() {
        this.parentNode.firstChild.nodeName;
        with(this.parentNode) {
            replaceChild(this.firstChild, this);
            normalize();
        }
    }).end();
};

$(function() {
    
     $('body').highlight('bla', 'red');    
     $('body').highlight('occurrances', 'blue');  
     $('body').highlight('highlight', 'green');    
    
});