javascript highlighting of characters
<p>How do you highlight (or give any special markup) special characters like <code>‘’“”‛‟′″˝</code>? Thanks. Using a find and replace <code>.innerHTML.replace()</code> doesn't work as it ruins the event handlers and the DOM.</p>

<hr>

<p>I've tried the following, but that just ends up with the <code>span</code>'s in plain text instead of code.</p>

<pre><code>function highlightText(node, find, rep){
    if(node){
        node= node.firstChild;
        while(node!= null){
            if(node.nodeType== 3){
                node.data= node.data.replace(find, rep);
            }
            else highlightText(node, find, rep);
            node= node.nextSibling;
        }
    }
    return true;
}

highlightText(document.body,/‘/g, "&lt;span style='background: red; color: white;'&gt;‘&lt;/span&gt;")
highlightText(document.body,/’/g, "&lt;span style='background: red; color: white;'&gt;’&lt;/span&gt;")
highlightText(document.body,/“/g, "&lt;span style='background: red; color: white;'&gt;“&lt;/span&gt;")
highlightText(document.body,/”/g, "&lt;span style='background: red; color: white;'&gt;”&lt;/span&gt;")
highlightText(document.body,/‛/g, "&lt;span style='background: red; color: white;'&gt;‛&lt;/span&gt;")
highlightText(document.body,/‟/g, "&lt;span style='background: red; color: white;'&gt;‟&lt;/span&gt;")
highlightText(document.body,/′/g, "&lt;span style='background: red; color: white;'&gt;′&lt;/span&gt;")
highlightText(document.body,/″/g, "&lt;span style='background: red; color: white;'&gt;″&lt;/span&gt;")
highlightText(document.body,/˝/g, "&lt;span style='background: red; color: white;'&gt;˝&lt;/span&gt;")
</code></pre>
