JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div class="spamcontainer">
        Eggs and spam is better than ham and spam.
        <img src="spam-and-eggs.jpg"> I do not like green eggs and spam, though.
    </div>
</div>
<h3>
<h3>
Resultant HTML
</h3>
</h3>
<textarea style="width:100%; height:400px"></textarea>

CSS

.meat-product {
    color: red;
    background: yellow
}

JavaScript

var reg = /ham|spam/g;

$('.content').children().contents().each(function() {
    if (this.nodeType === 3) {
        var txt = this.textContent;
        if (txt.match(reg)) {
            $(this).replaceWith(textToHtml(this));
        }
    }


});

$('textarea').val($('.content').html())


function textToHtml(node) {
    return node.textContent.replace(reg, function(match) {
        return '<span class="meat-product">' + match + '</span>';
    })
}