[bes]

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>