на ум приходит только рекурсивный обход по DOM-дереву
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.highlight {
background: yellow;
}
</style>
<script type="text/javascript">
var highlightText = (function(){
var div = document.createElement("div");
var replaceWith = '<span class="highlight">$1</span>';
return function ( elem, re ) {
var i = 0, node,
nodeType = elem.nodeType,
previousSibling;
if ( nodeType ) {
if ( nodeType === 1 || nodeType === 9 ) {
for ( elem = elem.firstChild; elem; elem = elem.nextSibling) {
previousSibling = elem.previousSibling;
if ( previousSibling && (previousSibling.nodeType === 3 || previousSibling.nodeType === 4) && previousSibling.nodeValue === '' ) {
previousSibling.parentNode.removeChild( previousSibling );
}
highlightText( elem, re );
}
} else if ( (nodeType === 3 || nodeType === 4) && re.test( elem.nodeValue ) ) {
div.innerHTML = elem.nodeValue.replace( re, replaceWith );
while ( div.firstChild ) {
elem.parentNode.insertBefore( div.removeChild(div.firstChild), elem );
}
elem.nodeValue = '';
}
} else {
for ( ; (node = elem[i++]); ) {
if ( node.nodeType !== 8 ) {
highlightText( node, re );
}
}
}
}
})();
var unHighlightText = function ( elem ) {
var i = 0, node,
nodeType = elem.nodeType,
highlightNodeList, highlightNode;
if ( nodeType ) {
if ( nodeType === 1 || nodeType === 9 ) {
highlightNodeList = elem.getElementsByTagName("span");
for ( ; (highlightNode = highlightNodeList[i++]); ) {
if ( (" " + highlightNode.className + " ").indexOf(" highlight ") > -1 ) {
highlightNode.parentNode.replaceChild( document.createTextNode(highlightNode.firstChild.nodeValue), highlightNode );
i--;
}
}
}
} else {
for ( ; (node = elem[i++]); ) {
if ( node.nodeType !== 8 ) {
unHighlightText( node, re, replaceWith );
}
}
}
};
</script>
</head>
<body>
<div id="test">
Chocolate Lorem lipsum dollar Chocolate Chocolate
<a href="Chocolate" title="Chocolate">>Chocolate Chocolate!</a>Chocolate <span class="Chocolate">Lorem lipsum dollar</span>
<p>Chocolate Lorem lipsum dollar Chocolate</p>
<ul id="Chocolate">
<li>Chocolate Lorem lipsum dollar</li>
</ul>
</div>
<button onclick='highlightText ( document.getElementById("test"), new RegExp( "("+"Chocolate" + ")", "g" ) )'>Highlight</button>
<button onclick='unHighlightText( document.getElementById("test"))'>Unhighlight</button>
</body>
</html>
