title: string.replace() or jquery.html() acting odd
body: <p>First of all, Sorry for the not-so-descript title, but i couldn't find a way to describe it in a few words.</p>
  
  <p>I'm trying to make a simple Syntax Highlighter, using Javascript and Jquery.</p>
  
  <p>I have a HTML TextArea with some HTML inside, that i want to add classes to, depending on the syntax.</p>
  
  <p>But i have a weird problem with the open and closing tags...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Syntax Highlighter&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css" /&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
      &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container" id="mainWrapper"&gt;
          &lt;div class="container" id="mainContent"&gt;
              &lt;div class="container" id="textareaWrapper"&gt;
              &lt;textarea name="codeInput" id="codeInput" cols="100" rows="1000" class="textarea"&gt;
                  &lt;html&gt;
                  &lt;head&gt;
                      &lt;title&gt;Test page&lt;/title&gt;
                      &lt;link rel="stylesheet" href="css/style.css" /&gt;
                  &lt;/head&gt;
                  &lt;body&gt;
                      &lt;p&gt;I'm a Paragraph&lt;/p&gt;
                      &lt;img src="img/image.jpg" alt="I'm an image!" /&gt;
                  &lt;/body&gt;
                  &lt;/html&gt;
              &lt;/textarea&gt;
              &lt;/div&gt;
              &lt;button id="buttonHighlightSyntax" onClick="addClass()"&gt;Huelight&lt;/button&gt;
              &lt;div class="container" id="syntaxWrapper"&gt;
                  &lt;div id="syntaxContainer"&gt;
  
                      &lt;pre id="highlighted"&gt;
                      &lt;/pre&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  $(document).ready(function(){
  // HTML tags: http://www.w3schools.com/tags/
  var htmlTags = ["!DOCTYPE", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr"];
  
  var code = $('#codeInput').val(); // non-highlighted HTML
  
  code = code.replace(/(&lt;\/|&lt;|\s\/&gt;|\/&gt;|&gt;)/g, "&lt;span class=\"openClose\"&gt;$1&lt;/span&gt;"); // add openClose class to &lt;,&lt;/,&gt;,/&gt;, /&gt; 
  console.log(code);
  $('#highlighted').html(code);
  })
  </code></pre>
  
  <p>Here the weird thing happens when it replaces it, or maybe when it sets the html of #highlighted...</p>
  
  <p>either way, the result is this:</p>
  
  <pre><code>        &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;html&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;head&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;title&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;Test page&lt;span class="openClose"&gt;&lt;!--&lt;/span--&gt;title&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;link rel="stylesheet" href="css/style.css"&lt;span class="openClose"&gt; /&amp;gt;&lt;/span&gt;
          &lt;span class="openClose"&gt;&lt;!--&lt;/span--&gt;head&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;body&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;p&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;I'm a Paragraph&lt;span class="openClose"&gt;&lt;!--&lt;/span--&gt;p&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="openClose"&gt;&amp;lt;&lt;/span&gt;img src="img/image.jpg" alt="I'm an image!"&lt;span class="openClose"&gt; /&amp;gt;&lt;/span&gt;
          &lt;span class="openClose"&gt;&lt;!--&lt;/span--&gt;body&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="openClose"&gt;&lt;!--&lt;/span--&gt;html&lt;span class="openClose"&gt;&amp;gt;&lt;/span&gt;dsdad
      &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The problem there, is that it seems to screw up when it comes to the ,/> and only partially replaces it?</p>
  
  <p>I'm very confuzzled, so if anyone can explain what is going on with the string.replace(), please do =)</p>