JSFiddle - React, Tailwind, and code Playground

HTML

<div>Patrick</div>

<div>Something with Patrick</div>

<div> patrick lowercase </div>

<div> 
    <span class="abc"> Have you met Patrick?</span>
</div>

CSS

.name {
    border: 1px solid #f00;   
}

JavaScript

$('*').contents().filter(function() {
    return this.nodeType == 3;
}).each(function() {
    var node = this;
    this.data.replace(/\bPatrick\b/i, function(all, offset) {
        var chunk = node.splitText(offset);
        chunk.data = chunk.data.substr(all.length);
        var span = $('<span />', {
            'class': 'name',
            text: all
        });
        $(node).after(span);
    });
});