javascript - 尝试使用 innerHTML 将 html 标签显示为文本

Question

我有一个包含 HTML 标签的字符串。
我只想将 span 标签呈现为 HTML 元素 <span></span> . 不是 span 标签的所有其他标签都应被视为常规文本。

我想要达到的结果是为我想要的任何文本着色，即使它包含 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>"

参见 fiddle :https://jsfiddle.net/ytLftxww/1/