是否可以读取 JSON 对象中的 HTML 标签，并将它们显示在网页上？答案

【问题标题】：Is it possible to read in HTML tags within a JSON object, and display them on a webpage?是否可以读取 JSON 对象中的 HTML 标签，并将它们显示在网页上？
【发布时间】：2016-10-15 23:14:52
【问题描述】：

我有一个如下所示的 JSON 对象：

id:
text: <h1>This is my text</h1> <p> I want to include HTML 
            and reflect those tags on the page. </p>

我正在使用 Angular2 的 HTTP_PROVIDER 从 JSON 中读取数据。

在我的 HTML 模板中，我在网页上显示 JSON.dataString。如何在网页上反映 HTML 标签，目前标签显示为纯文本。

<p>{{jsonObject.text}}</p>

有没有办法读取包含在 JSON 对象中的那些 HTML 标签，并将它们反映在网页上？

【问题讨论】：

也许有帮助：stackoverflow.com/questions/15754515/…

标签： html json angular angular2-http

【解决方案1】：

类似：

<div [innerHTML]="jsonObject.text"></div>

应该将文本对象显示为原始 HTML。当你做这样的事情时要小心 XSS 注入。

更多详情请访问this question。

【讨论】：

谢谢！这在没有方括号的情况下工作..
我相信它最初应该是<div [innerHTML]="jsonObject.text"></div>"。不，没有必要担心 XSS，Angular 会处理这个问题。
@estus 通过使用 innerHTML，你绕过了 Angular 的 HTML 编码，这意味着你绕过了它的 XSS 保护。
这不是真的。 innerHTML 绑定的结果是未转义的、经过净化的标记。不能以这种方式将有害的东西（包括任何与脚本相关的东西）添加到文档中。如果您发现他们可以，请随时提出问题。见more on the subject。

【解决方案2】：

你可以尝试这样做：

function textHtml(input) {
    var el = document.createElement("textarea");
    el.innerHTML = input;
    return el.value;
}

然后使用这个函数来获取带有标签的文本

【讨论】：

【解决方案3】：

我不使用 Angular，但会做类似的事情。

<p id="myId"></p>
<script>
document.getElementById("myId").appendChild(jsonObject.text);
</script>

我没有测试它。

【讨论】：