comments (not for humans)

[CSS/HTML/Js] Unescaping HTML in javascript

July 6, 2006 - 10:38 UTC   -   Tags: javascript jquery escaping You may sometimes need to unescape HTML escaped strings in javascript. I found a neat trick to do this using the browser internal escaping.

This entry in the blog ecmanaut presents a neat way to unescape HTML without calling homebrewed methods replacing each character. Using this I created the following javascript function:

function unescapeHTML(html) {
var htmlNode = document.createElement("DIV");
htmlNode.innerHTML = html;
if(htmlNode.innerText !== undefined)
return htmlNode.innerText; // IE
return htmlNode.textContent; // FF
}Update 2007-07-07: Added HG's version which should work properly in both IE and FF
Update: Adding Marcus Phillips suggestion for testing against undefined

jQuery versions for both ways

Update 2010-04-28:function unescapeHTML(html) {
return $("<div />").html(html).text();
}
function escapeHTML(html) {
return $("<div />").text(html).html();
}
Permalink |
July 11, 2006 - 20:46 UTC
Brian Ritchie

Doesn't work with Firefox

Using Firefox 1.5.0.4, it results in a value of "undefined"
June 21, 2007 - 14:41 UTC
Dud

Thank you!

very clever trick! thank youthankyou
July 6, 2007 - 16:30 UTC
HG

Works

In IE and Firefox:

function unescapeHTML(html) {
var htmlNode = document.createElement("DIV");
htmlNode.innerHTML = html;
if(htmlNode.innerText)
return htmlNode.innerText; // IE
return htmlNode.textContent; // FF

}
July 7, 2007 - 12:51 UTC Erlend

Re: Works

Thanks. I'll update
November 11, 2007 - 04:39 UTC
Rob Hildyard
Cheers for this!
February 1, 2008 - 04:42 UTC
Mario Di Vece

Great!

Thanks so much. very useful! I spent almost an hour scratching my head on the option.innerHTML bug in IE.
March 14, 2008 - 12:43 UTC
Starkom

bug

It doesn\'t work in Mozilla 1.7 :(
March 14, 2008 - 13:39 UTC
Starkom

bug

Because problems in Mozilla, I tried such variant:
function unescapeHTML(html) {
var htmlNode = document.createElement(\"DIV\");
htmlNode.innerHTML = html;
return htmlNode.innerHTML;
}
And all looks fine. Is this any wrong?
July 9, 2008 - 12:43 UTC
EdU

THANKS!!!!

THANKS! THANKS! VERY USEFUL!
July 17, 2008 - 09:51 UTC
Noah

Thank you so much!

Just saved me writing a big switch statement... Clever!
May 9, 2009 - 01:29 UTC
Marcus Phillips

BUGFIX for whitespace rendering as "undefined"

If the content you want to translate is whitespace only, it will collapse to an empty string and evaluate to false in the browser-agent detection, causing IE to erroneously check the .textContent variable.

Instead of testing for truthiness, test for existence:

function unescapeHTML(html) {
var htmlNode = document.createElement("DIV");
htmlNode.innerHTML = html;
if(htmlNode.innerText !== undefined)
return htmlNode.innerText; // IE
return htmlNode.textContent; // FF
}
July 23, 2009 - 11:11 UTC
Jim
Great! Thanks a lot!
January 20, 2010 - 14:05 UTC
Akash

thanks mate

godlike :)
January 20, 2010 - 14:06 UTC
Akash

Java Method

public String unescapeHTML(String html) {
com.google.gwt.dom.client.Element htmlNode = DOM.createElement(\"DIV\");
htmlNode.setInnerHTML(html);
return htmlNode.getInnerText();
}
February 8, 2010 - 01:00 UTC
do
gre=unescape("%72%69%6D%62%61%75%64"); what does it mean?
April 8, 2010 - 14:05 UTC
user

Nice job...

...helped me a lot! Thx...
September 12, 2011 - 15:11 UTC TheHuge_
Thanks a lot!
Comments closed for this post