HTMLタグをinnerHTMLのテキストとして表示しよう

Question

HTMLタグを含む文字列があります。
スパンタグaka <span></span>のみをHTML要素としてレンダリングしたいとします。 スパンタグではない他のすべてのタグは、通常のテキストとして扱う必要があります。

私が達成しようとしているのは、HTMLタグが含まれていても必要なテキストに色を付けることです。

私は失敗します。

他にも私が試してみたいことや回避策がありますか？で

var problem = ["<h1>","</h1>"]; 

var red_text = "<span style='color:red'>i am red </span>"; 

var green_text = "<span style='color:green'>" + 
           problem[0] + 
           "i am green" + 
           problem[1] + 
           "</span>"; 

//the real result should have <h1> </h1> 
var expected_text = red_text + "<span style='color:green'>|h1|i am green|/h1|</span>"; 

document.getElementById("demo").innerHTML = red_text + green_text; 

document.getElementById("expected").innerHTML = expected_text; 

HTMLとJavaScriptコード：
https://jsfiddle.net/ytLftxww/1/

Answer 1

あなたはこれらのタグで<と>を逃れるためにHTMLエンティティを使用する必要があります。例えば

："<span style='color:green'>&lt;h1&gt;i am green&lt;/h1&gt;</span>"

はフィドルを参照してください：https://jsfiddle.net/ytLftxww/1/

Answer 2

var problem = ["<h1>","<h1>"]; 

はあなたのために<>仕事をアンエスケープしますか？

updated fiddle

Answer 3

あなたは>ため<と& &gtため&ltを使用することができます。