Free Online HTML, JavaScript and XML Escape and Unescape

There is a well known shortcut for unescaping HTML entities in a browser: make an element, set its innerHTML to the text, and read back textContent. It is three lines and it handles every entity the browser knows, which is all of them. It is also an XSS hole the moment the text is not yours.

The reason is that innerHTML does not decode a string, it parses HTML. Give it <img src=x onerror=alert(1)> and the browser builds an image element, tries to load x, fails, and runs the handler. Script tags inserted that way do not run, which is what makes people think the trick is safe, but event handlers on other elements do, and so do a dozen other constructions. On a page where the input is pasted by the person using it the damage is limited to themselves; in a shared component, or anywhere the text arrived from a URL, a database or another user, it is a real vulnerability.

So the unescaping here is done the long way: a table of names to code points, written into the page, and a scan that replaces one reference at a time. It costs a few hundred lines and it cannot run anything, because nothing is ever handed to the HTML parser. Use DOMParser with text/html if you need the browser's own table in your own code, and never innerHTML on text you did not write.

About Escaping and Unescaping

Escaping is what keeps text as text. A few characters mean something to whatever is going to read the string next, and if they are passed through untouched the reader stops treating them as content and starts treating them as structure. That is the whole of how cross site scripting works, and it is also why a single apostrophe in a surname can break a page that has worked for years. The fix is never to remove the character; it is to write it in the form that particular reader understands.

Which form depends entirely on who is reading. HTML wants entities, and in practice wants five of them. A JavaScript string wants backslash escapes, and it also wants the closing script tag broken up, which has nothing to do with JavaScript at all and everything to do with the HTML parser that gets there first. XML wants entities too, but it defines only five names and refuses a document containing any other, so text that is perfect HTML is often unusable XML. One escape button cannot serve all three, which is why this page asks where the text is going.

The unescaping is the part that took care, and not because the formats are hard. The obvious way to decode HTML entities in a browser is to let the browser do it through innerHTML, and that is a genuine security hole on untrusted text, so this page builds its own table instead and scans the string by hand. It costs more code, it is limited to the names in that table, and it cannot execute anything, which is the trade worth making.