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

Question

我有一个 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 标签，并将它们反映在网页上？

Answer 1

您可以尝试这样做：

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

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

Answer 2

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

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

我没测试过

Answer 3

类似于：

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

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

详情请见。

Is it possible to read in HTML tags within a JSON object, and display them on a webpage?