How to render html inside Template literals?

Question

I explain my scenario, the users enter content through a WYSIWYG editor that is persisted in the database, in another place of the application this content and another one is obtained through an ajax request, here I use template literals to build a html structure with the data that is finally inserted into the view using innerHTML in a destination DOM element.

I require that the content that was added through the WYSIWYG editor be displayed as html, with lodash function _.unescape () I get the free content of html special characters, but this is not shown as html but as a html string

I share the general idea of ​​the implementation:

Template literal

`...
<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;
}

Output

[object HTMLDocument]

If instead of the dom variable I return the html variable in the view I get for example <p>some content <strong>goes here</strong></ p> and I require this content to be displayed as regular view html

Any idea please about showing the content as html?

Thanks

Answer 1

The reason this happens is because DOMParser returns a HTMLDocument object and when you try to set HTMLDocument object as innerHTML of any element it calls toString() of this object - which is [object HTMLDocument] .

You can try this yourself:

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

Good news is, that in your case you don't need the DOMParser at all. All you need to unescape the given string and set it as innerHTML of your element:

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