如何在模板文字中呈现HTML？

Question

我解释了我的情况，用户通过持久化在数据库中的WYSIWYG编辑器输入内容，在应用程序的另一个位置，此内容和另一个通过ajax请求获得，这里我使用模板文字来构建带有最终使用innerHTML目标DOM元素插入视图中的数据。

我要求通过WYSIWYG编辑器添加的内容显示为html，使用lodash函数_.unescape ()可以获取html特殊字符的免费内容，但这不是显示为html，而是显示为html字符串

我分享实现的总体思路：

模板文字

`...
<div>${getHTML(dataset.message)}</div>
...`

Java脚本

function getHTML(message) {
    const html = _.unescape(message).replace('\\', '');
    const parser = new DOMParser();
    const dom = parser.parseFromString(html, 'text/html')

    return dom;
}

输出量

[object HTMLDocument]

例如，如果dom我html在视图中返回变量而不是变量，则<p>some content <strong>goes here</strong></ p>需要将该内容显示为常规视图html

关于将内容显示为html有什么想法吗？

谢谢

Answer 1

发生这种情况的原因是因为DOMParser 返回一个 HTMLDocument 对象，并且当您尝试将 HTMLDocument 对象设置为它调用toString()该对象的任何元素的innerHTML（即[object HTMLDocument].

你可以自己尝试一下：

const html = '<div>Some html content</div>';

const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");

console.log(doc.toString()); // [object HTMLDocument]

好消息是，就您而言，您DOMParser根本不需要。您只需取消转义给定的字符串并将其设置为元素的innerHTML：

// Your modified getHTML function
const getHTML = message => _.unescape(message).replace('\\', '');

// Container in which your want to render the HTML
const container = document.getElementById('container');

// Dummy HTML representing your data from the database
const html = _.escape('<h1>Your content</h1>');

// Dummy template representing your template literal
const template = `
<div>
  ${getHTML(html)}
</div>
`;

// Set the resolved dummy template as content of the dummy container
container.innerHTML = template;

<div id="container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>