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

Question

我解释了我的场景，用户通过持久存储在数据库中的WYSIWYG编辑器输入内容，在应用程序的另一个地方输入此内容，另一个通过ajax请求获取，这里我使用模板文字构建一个html结构最终使用innerHTML在目标DOM元素中插入到视图中的数据。

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

我赞同实施的一般想法：

模板文字

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

使用Javascript

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

    return dom;
}

产量

[object HTMLDocument]

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

有任何想法请将内容显示为HTML？

谢谢

Answer 1

发生这种情况的原因是因为DOMParser返回HTMLDocument对象 ，当您尝试将HTMLDocument对象设置为任何元素的innerHTML时，它调用此对象的toString() - 即[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 。 所有你需要unescape给定的字符串并将其设置为元素的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> 

Answer 2

Yeap这将起作用return dom.firstChild.innerHTML;