如何在模板文字中呈現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;