将特殊字符解码为 HTML 字符

Question

I have been searching the web for a javascript function that turns something like this:

Hi.  I will show <span style="font-weight: bold;">HTML</span>.

Into this:

Hi.&nbsp; I will show <span style="font-weight: bold;">HTML</span>.

I am using this method:

htmlDecode: function (input) {
    var doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
}

And it works the first time. But if I try it again, on text like this:

Hi.&nbsp; I will show <span style="font-weight: bold;">HTML</span>

It strips out all the html and just leaves me with:

Hi. I will show HTML.

I only want the method to change this:

Hi.  I will show <span style="font-weight: bold;">HTML</span>.

Into this:

Hi.&nbsp; I will show <span style="font-weight: bold;">HTML</span>.

I don't want it to totally strip out the HTML.

Is there a way to do that?

Thanks!

Answer 1

You could check if the parsed result contains DOM elements. If so, then it means the decoding went one step too far, and the original value should be returned:

 function htmlDecode (input) { let doc = new DOMParser().parseFromString(input, "text/html"); let body = doc.querySelector("body"); return body.children.length ? input : body.textContent; } let s = 'Hi.  I will show <span style="font-weight: bold;">HTML</span>.'; s = htmlDecode(s); console.log(s); // decoded s = htmlDecode(s); // apply on the result... console.log(s); // ... no change s = htmlDecode("Hi.  This is normal text."); console.log(s);

An additional check

Another assumption could be that it should be possible to decode the result of a first decoding and get a different result again. If it produces twice the same result, then the original input should be returned.

 function htmlDecode (input) { let parser = new DOMParser(); let doc = parser.parseFromString(input, "text/html"); let { textContent, children } = doc.querySelector("body"); if (children.length) return input; doc = parser.parseFromString(textContent, "text/html"); if (doc.querySelector("body").textContent === textContent) return input; return textContent; } let s = 'Hi.  I will show <span style="font-weight: bold;">HTML</span>.'; s = htmlDecode(s); console.log(s); // decoded s = htmlDecode(s); // apply on the result... console.log(s); // ... no change s = "Hi.  This is normal text."; s = htmlDecode(s); console.log(s); // decoded s = htmlDecode(s); // apply on the result... console.log(s); // ... no change

Answer 2

You can create a div, set it's innerHTML , and then retrieve it's innerText .

 function htmlDecode(text) { var div = document.createElement('div') div.innerHTML = text return div.innerText } console.log(htmlDecode('Hi.  I will show <span style="font-weight: bold;">HTML</span>.'))