the first attempt
<style>
.bar {
background: grey;
}
</style>
<div>foo bar rar <button>baz</button></div>
<script>
document.querySelector("button").addEventListener("click", function () {
alert("I'm baz");
});
function wr(textNode, word, html) {
var parent = textNode.parentNode,
nodeValue = textNode.nodeValue,//data, wholeText
pos = nodeValue.indexOf(word),
fragment = document.createDocumentFragment(),
el = document.createElement( html );
el.classList.add("bar");
el.innerHTML = word;
fragment.appendChild( document.createTextNode( nodeValue.substr(0, pos) ) );
fragment.appendChild( el );
fragment.appendChild( document.createTextNode( nodeValue.substr( pos + word.length ) ) );
parent.insertBefore(fragment, textNode);
parent.removeChild(textNode);
}
setTimeout(function () {
wr(document.querySelector("div").firstChild, "bar", "span");
alert("hello, Mr. baz");
}, 3000);
</script>