JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hpl_content_wrap">
<p class="foobar">this is one word and then another word comes in foobar and then more words and then foobar again.</p>
<p>this is a <a href="http://foobar.com" data-bitly-type="bitly_hover_card">link with foobar in an attribute</a> but only the foobar inside of the link should be replaced.</p>
</div>

JavaScript

var replaceText = function me(parentNode, find, replace) {
    var children = parentNode.childNodes;
    
    for (var i = 0, length = children.length; i < length; i++) {
        if (children[i].nodeType == 1) {
            me(children[i], find, replace);            
        } else if (children[i].nodeType == 3) {
            children[i].data = children[i].data.replace(find, replace);
        }
        
    }
    
    return parentNode;
    
}
    
replaceText(document.body, /foobar/g, "herpderp");