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

Question

我解释一下我的场景，用户通过持久化在数据库中的所见即所得编辑器输入内容，在应用程序的另一个地方这个内容和另一个是通过 ajax 请求获得的，这里我使用模板文字来构建一个 html最终使用目标 DOM 元素中的innerHTML 将数据插入到视图中的结构。

我要求通过所见即所得编辑器添加的内容显示为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]

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

关于将内容显示为 html 的任何想法？

谢谢

Answer 1

发生这种情况的原因是因为DOMParser returns a HTMLDocument object 并且当您尝试将 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。您只需要对给定的字符串进行转义并将其设置为元素的 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

是的，这将工作return dom.firstChild.innerHTML;