title: Why does RegEx output escaped text instead of HTML
body: <p>I am writing a Chrome extension which adds a <code>&lt;span&gt; ... &lt;/span&gt;</code> around every string that matches a certain regular expression. The RegEx match works perfectly, but I cannot seem to find a way to correctly add the <code>span</code> tag around the text.</p>
  
  <p>My code thus far is:</p>
  
  <pre><code>// main.js
  var regex_pattern = new RegEx('(apple)', 'g'); // Let's pretend I want to match every instance of 'apple'
  var textNodes = getTextNodes(); // A function that returns a list of every text node from the DOM
  for (var i = 0; i &lt; textNodes.length; i++) {
      if (textNodes[i].nodeValue.match(regex_pattern)) {
          textNodes[i].nodeValue = textNodes[i].nodeValue.replace(regex_pattern, "&lt;span class='highlight'&gt;$&amp;&lt;/span&gt;");
      }
  }
  </code></pre>
  
  <p>This will correctly identify every match of my RegEx pattern (in this case 'apple') and output <code>&lt;span class="highlight"&gt;apple&lt;/span&gt;</code>. The only problem is that this is not treated as HTML by Chrome, it's treated as text - so instead of seeing the world 'apple' styled according to the <code>highlight</code> class, one would see the literal output: <code>&lt;span class="highlight"&gt;apple&lt;span&gt;</code></p>
  
  <p>Why does this happen, and how can I fix it so that the style is correctly applied? Realizing that this was less than desirable, I tried using the <code>insertBefore()</code> method to wrap the matched text in a span, but this didn't do anything, it would either error or fail to add the <code>span</code> node, depending on how I tweaked the code. Thanks for any insight you can provide!</p>