尝试将 html 标签显示为带有 innerHTML 的文本

Question

我有一个包含 HTML 标签的字符串。
我只想将 span 标签（又名<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'><h1>i am green</h1></span>"

见小提琴：https://jsfiddle.net/ytLftxww/1/

Answer 2

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

取消转义 对你有用吗？

updated fiddle

Answer 3

您可以将&lt 用于< 和&gt 用于>。