title: javascript highlighting of characters
body: <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>