JSFiddle - React, Tailwind, and code Playground

by fkling

HTML

<div>
    hey <a href="#user">user</a>, what are you doing?
    <span>The <em>user</em> is doing nothing.</span>
</div>
<div> Click the on the <button>user button</button>
<div>
    Is this site userfriendly?
</div>

CSS

.high {
    color: red;
}

JavaScript

$.fn.highlight = function(word) {
    var pattern = new RegExp(word, 'g'),
       repl = '<span class="high">' + word + '</span>';
   
    this.each(function() {
        $(this).contents().each(function() {
            if(this.nodeType === 3 && pattern.test(this.nodeValue)) {
                        $(this).replaceWith(this.nodeValue.replace(pattern, repl));
            }
            else if(!$(this).hasClass('high')) {
                $(this).highlight(word);
            }
        });
    });
    return this;
};

$('div').highlight('user');
$('button').click(function() {
    alert('Still works');
});