Unescape html character entities

Question

I'm trying to store values from a database into HTML5 data attributes.

I can escape them fine because of this answer, but how do I reverse that?

score 9 · Accepted Answer · answered Apr 22 '13 at 13:59

9

Just reverse the function:

function unescapeHtml(unsafe) {
    return unsafe
        .replace(/&amp;/g, "&")
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&quot;/g, "\"")
        .replace(/&#039;/g, "'");
}

DEMO: http://jsfiddle.net/wazXb/

answered Apr 22 '13 at 13:59

Ian

50,146
13
101
111

Except maybe don't name the function argument `unsafe` in this case. – Peter Eisentraut Dec 19 '14 at 02:58
1

Can't believe why would 8 people upvote this answer: there are dozens of html entities in HTML5, this code only covers (very unefficiently) 5 of them. See the complete list of HTML5 entities to confirm this answer is plain wrong: https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML – Clint Eastwood Jun 16 '16 at 20:12
@ClintEastwood Before you claim such ridiculous things, **please** read the Question and Answer carefully. The Question simply asks how to reverse the functionality of the code from the main answer from the posted link. The OP is not asking "How do I unescape **all** HTML entities?". I simply answered the Question. – Ian Jun 16 '16 at 21:02
1

@Ian you're right. The question is really poor as it's based on a very limited (and inefficient) function. Your answer, in that sense, is technically correct but we know that the problem this guy has, is not fully solved. Thousands of apps in the world suck just because of this patchy and reckless programming style. I prefer solving problems once and for all but well... – Clint Eastwood Jun 27 '16 at 21:05
1

Agreed. That's a really bad answer. For a more general solution, create an element (detached from the DOM) and then use innerHTML to set its contents to the chunk of HTML, and use innerText to obtain the text equivalent. – dgatwood Jun 27 '16 at 21:21
More significantly, if the original string contains tags mixed in with this text, then what you're doing in this answer is downright dangerous, because you'll end up with those < symbols decoded as "<" signs, which will then be interpreted as part of the markup. The *only* safe way to handle that is to strip the markup while you decode the < stuff. – dgatwood Jun 28 '16 at 19:54
1

To keep it short - you guys are right and I like @dgatwood 's answer :) – Ian Jun 28 '16 at 20:15

score 8 · Answer 2 · edited Sep 20 '16 at 13:48

8

To handle all potential characters (instead of a "known" list), use the natural escaping of the browser by letting it convert HTML strings to text with this:

function unescapeHTML(string) {
   var elt = document.createElement("span");
   elt.innerHTML = string;
   return elt.innerText;
}

References:

document.createElement - https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
*.innerHTML - https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
*.innerText - https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText

edited Sep 20 '16 at 13:48

Ian

50,146
13
101
111

answered Jun 27 '16 at 21:20

dgatwood

10,129
1
28
49

It's like you didn't even read the question. The OP's database data contains HTML, and they want the HTML characters encoded. Using your answer, you **lose** all HTML (`"
Stuff
"` becomes `"Stuff"`), which seems way off. – Ian Jun 28 '16 at 18:40
1

No, that isn't "way off". If you *don't* do what I'm talking about, then if you decode "
A < B
", you would get "
A < B
", which is not valid HTML! You *cannot* entity-decode the text of HTML content without stripping the tags and hope to have something that is useful at the end. It just doesn't work that way. And if that really is what the original poster is asking for, then the entire question needs to be deleted as dangerous. – dgatwood Jun 28 '16 at 19:50
1

However, if what they have in the database is (bizarrely) "<div>Stuff</div>" and they want to get back "
Stuff
', then the code I posted above will give them that. – dgatwood Jun 28 '16 at 19:52
Nope, you are right, I'm an idiot. I think I confused myself trying to think this through. If you edit your answer (maybe add a quick demo with jsFiddle or something), I'd be happy to reverse my vote. There's an example in the link that the OP posted, using basically the reverse of your answer (which is probably a better answer than the one accepted for that question too), using text nodes and innerHTML – Ian Jun 28 '16 at 20:14

Unescape html character entities

2 Answers2