title: try to show html tags as text with innerHTML
body: <p>I have a string that contains HTML tags.<br>
  I want to render as an HTML element only the span tags aka <code>&lt;span&gt;&lt;/span&gt;</code>.
  every other tag that is not a span tag should be treated as regular text.</p>
  
  <p>The result I'm trying to achieve is to color any text that I want even if it contains HTML tags.</p>
  
  <p>I fail.</p>
  
  <p>is there any other technique that I can try or a workaround?</p>
  
  <pre><code>var problem = ["&lt;h1&gt;","&lt;/h1&gt;"];
  
  var red_text = "&lt;span style='color:red'&gt;i am red &lt;/span&gt;";
  
  var green_text = "&lt;span style='color:green'&gt;" +
                                  problem[0] + 
                                  "i am green" +
                                  problem[1] +
                                  "&lt;/span&gt;";
  
  //the real result should have &lt;h1&gt; &lt;/h1&gt;
  var expected_text = red_text + "&lt;span style='color:green'&gt;|h1|i am green|/h1|&lt;/span&gt;";
  
  document.getElementById("demo").innerHTML = red_text + green_text;
  
  document.getElementById("expected").innerHTML = expected_text;
  </code></pre>
  
  <p>HTML and JavaScript code at :<br>
  <a href="https://jsfiddle.net/ytLftxww/1/" rel="nofollow noreferrer">https://jsfiddle.net/ytLftxww/1/</a></p>