Question

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

我要求通过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]

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

请将内容显示为html吗？

由于

Answer 1

发生这种情况的原因是DOMParser returns a HTMLDocument object，当您尝试将HTMLDocument对象设置为任何元素的innerHTML时，它会调用此对象的toString() - [object HTMLDocument]。

您可以自己试试：

＆＃13;

const html = '<div>Some html content</div>';

const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");

console.log(doc.toString()); // [object HTMLDocument]

＆＃13;

好消息是，在您的情况下，您根本不需要DOMParser。您只需要浏览给定的字符串并将其设置为元素的innerHTML：

＆＃13;

// 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;

＆＃13;

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

＆＃13;

Answer 2

是的，这将有效return dom.firstChild.innerHTML;

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

2 个答案: