title: javascript replace fails to work with "<"
body: <p>I am trying to replace <code>"&lt;"</code> and <code>"&gt;"</code> in a string using javascript's replace function. I am using it as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body onload="myFunction()"&gt;
  &lt;p id="demo"&gt;#include &lt;iostream&gt;&lt;/p&gt;
  
  &lt;script&gt;
  function myFunction() {
      var str = document.getElementById("demo").innerHTML; 
      var res = str.replace(/&lt;/g, '&amp;lt; ').replace(/&gt;/g, '&amp;gt; ');
      document.getElementById("demo").innerHTML = res;
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I expect the output to be <code>"#include &lt;iostream&gt;"</code>, but a corresponding <code>&lt;/iostream&gt;</code> is appended to the desired output. </p>
  
  <p>What is going on? How do I avoid this behaviour?</p>