JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="testHighlight">
    <h1>Hello</h1>
    <button id="b">qq</button>
</div>
<button id="h">hh</button>

CSS

.highlight{
    color:red;
}

JavaScript

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};
$("#h").click(function(){
	$(".testHighlight *").highlight("hello", "highlight");
});

$("#b").click(function(){alert('da')});