如何在模板字面量中渲染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吗？

谢谢。

- Mario

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。您只需要取消转义给定的字符串并将其设置为您元素的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>

- user3210641

---

在这种情况下，您只需在模板文字中调用更新后的 getHTML 函数。 - user3210641

这是否使用下划线？ - Liam

仅使用unescape函数的lodash - Mario

Op没有提到iodash，你不应该使用未标记的库。或者至少要解释一下。 - Liam

你好，用户3210641，感谢你在这个问题上投入的时间，但遗憾的是我在本地并没有得到相同的结果，我已经改变了逻辑以适应你的例子，但仍然得到HTML文本字符串而不是渲染后的HTML。 - Mario

Answer 2

没错，这个会起作用 return dom.firstChild.innerHTML;

- Hira Kumar Maharjan

---

请编辑您的答案，而不是直接编写另一个答案。 - Liam