HTML Entity Decode

Question

How do I encode and decode HTML entities using JavaScript or JQuery   var varTitle    Chris amp apos  corner     I want it to be   var varTitle    Chris  corner

User · Answer

Inspired by Robert K s solution  this version does not strip HTML tags  and is just as secure   var decode entities    function            Remove HTML Entities     var element   document createElement  div         function decode HTML entities  str             if str  amp  amp  typeof str      string                     Escape HTML before decoding for HTML Entities             str   escape str  replace   26 g   amp    replace   23 g      replace   3B g                    element innerHTML   str              if element innerText                   str   element innerText                  element innerText                    else                     Firefox support                 str   element textContent                  element textContent                                       return unescape str             return decode HTML entities

User · Answer

jQuery provides a way to encode and decode html entities.

If you use a "<div/>" tag, it will strip out all the html.

function htmlDecode(value) {
    return $("<div/>").html(value).text();
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

If you use a "<textarea/>" tag, it will preserve the html tags.

function htmlDecode(value) {
    return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
    return $('<textarea/>').text(value).html();
}

User · Answer

To add yet another  inspired by Robert K  to the list  here is another safe version which does not strip HTML tags  Instead of running the whole string through the HTML parser  it pulls out only the entities and converts those   var decodeEntities    function            this prevents any overhead from creating the object each time     var element   document createElement  div            regular expression matching HTML entities     var entity     amp     x a-f0-9     0-9    a-z0-9      ig       return function decodeHTMLEntities str               find and replace all the html entities         str   str replace entity  function m                element innerHTML   m              return element textContent                          reset the value         element textContent                return str

User · Answer

Because  Robert K and  mattcasey both have good code  I thought I d contribute here with a CoffeeScript version  in case anyone in the future could use it       String  unescape    strict   false  - gt                    Take escaped text  and return the unescaped version                  param string str   String to be used          param bool strict   Stict mode will remove all HTML                 Test it here          https   jsfiddle net tigerhawkvok t9pn1dn5                  Code  https   gist github com tigerhawkvok 285b8631ed6ebef4446d                   Create a dummy element       element   document createElement  div         decodeHTMLEntities    str  - gt          if str  and typeof str is  string            unless strict is true               escape HTML tags             str   escape str  replace   26 g   amp    replace   23 g      replace   3B g                else             str   str replace   lt script   gt    gt    S s     lt   script gt  gmi                  str   str replace   lt     w        gt                     gt  gmi                element innerHTML   str           if element innerText               Do we support innerText              str   element innerText             element innerText                else               Firefox             str   element textContent             element textContent              unescape str          Remove encoded or double-encoded tags       fixHtmlEncodings    string  - gt          string   string replace    amp amp   mg    amp       The rest  for double-encodings         string   string replace    amp quot  mg               string   string replace    amp quote  mg               string   string replace    amp  95  mg               string   string replace    amp  39  mg               string   string replace    amp  34  mg               string   string replace    amp  62  mg    gt            string   string replace    amp  60  mg    lt            string         Run it       tmp   fixHtmlEncodings this        decodeHTMLEntities tmp    See https   jsfiddle net tigerhawkvok t9pn1dn5 7  or https   gist github com tigerhawkvok 285b8631ed6ebef4446d  includes compiled JS  and is probably updated compared to this answer

User · Answer

Here is a full version   function htmldecode s       window HTML ESC MAP          nbsp       iexcl        cent        pound        curren        yen        brvbar        sect        uml        copy        ordf        laquo        not        reg        macr        deg        plusmn        sup2        sup3        acute        micro        para        middot        cedil        sup1        ordm        raquo        frac14        frac12        frac34        iquest        Agrave        Aacute        Acirc        Atilde        Auml        Aring        AElig        Ccedil        Egrave        Eacute        Ecirc        Euml        Igrave        Iacute        Icirc        Iuml        ETH        Ntilde        Ograve        Oacute        Ocirc        Otilde        Ouml        times        Oslash        Ugrave        Uacute        Ucirc        Uuml        Yacute        THORN        szlig        agrave        aacute        acirc        atilde        auml        aring        aelig        ccedil        egrave        eacute        ecirc        euml        igrave        iacute        icirc        iuml        eth        ntilde        ograve        oacute        ocirc        otilde        ouml        divide        oslash        ugrave        uacute        ucirc        uuml        yacute        thorn        yuml        fnof        Alpha       Beta       Gamma   G   Delta       Epsilon       Zeta       Eta       Theta   T   Iota       Kappa       Lambda       Mu       Nu       Xi       Omicron       Pi       Rho       Sigma   S   Tau       Upsilon       Phi   F   Chi       Psi       Omega   O   alpha   a   beta        gamma       delta   d   epsilon   e   zeta       eta       theta       iota       kappa       lambda       mu        nu       xi       omicron       pi   p   rho       sigmaf       sigma   s   tau   t   upsilon       phi   f   chi       psi       omega       thetasym       upsih       piv       bull         hellip         prime       Prime       oline       frasl       weierp   P   image   I   real   R   trade         alefsym       larr       uarr       rarr       darr       harr       crarr       lArr       uArr       rArr       dArr       hArr       forall       part       exist       empty        nabla       isin       notin       ni       prod       sum       minus   -   lowast       radic   v   prop       infin   8   ang       and       or       cap   n   cup       int       there4       sim       cong       asymp        ne       equiv       le       ge       sub       sup       nsub       sube       supe       oplus       otimes       perp       sdot        lceil       rceil       lfloor       rfloor       lang      loz       spades       clubs       hearts       diams            quot   amp    amp    lt    lt    gt    gt    OElig        oelig        Scaron        scaron        Yuml        circ        tilde        ndash         mdash         lsquo         rsquo         sbquo         ldquo         rdquo         bdquo         dagger         Dagger         permil         lsaquo         rsaquo         euro              if  window HTML ESC MAP EXP          window HTML ESC MAP EXP   new RegExp   amp    Object keys HTML ESC MAP  join            g        return s s replace window HTML ESC MAP EXP function x           return HTML ESC MAP x substring 1 x length-1    x         s      Usage  htmldecode   amp sum  amp nbsp  amp gt  amp euro

User · Answer

You could try something like    x000D   x000D  var Title       lt textarea   gt    html  Chris amp apos  corner   text    x000D  console log Title   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D    JS Fiddle   A more interactive version    x000D   x000D     form   submit function     x000D    var theString       string   val    x000D    var varTitle       lt textarea   gt    html theString  text    x000D        output   text varTitle   x000D    return false  x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form action     method  post  gt  x000D     lt fieldset gt  x000D       lt label for  string  gt Enter a html-encoded string to decode lt  label gt  x000D       lt input type  text  name  string  id  string    gt  x000D     lt  fieldset gt  x000D     lt fieldset gt  x000D       lt input type  submit  value  decode    gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D   x000D   lt div id  output  gt  lt  div gt  x000D   x000D   x000D    JS Fiddle

User · Answer

Original author answer here   This is my favourite way of decoding HTML characters  The advantage of using this code is that tags are also preserved   function decodeHtml html        var txt   document createElement  textarea        txt innerHTML   html      return txt value      Example  http   jsfiddle net k65s3   Input   Entity  amp nbsp Bad attempt at XSS  lt script gt alert  new nline    lt  script gt  lt br gt    Output   Entity   Bad attempt at XSS  lt script gt alert  new nline    lt  script gt  lt br gt

User · Answer

I think that is the exact opposite of the solution chosen   var decoded       lt div  gt    text encodedStr  html      Try it

User · Answer

Inspired by Robert K s solution  strips html tags and prevents executing scripts and eventhandlers like   lt img src fake onerror  prompt 1   gt  Tested on latest Chrome  FF  IE  should work from IE9  but haven t tested    var decodeEntities    function                create a new html document  doesn t execute script tags in child elements          var doc   document implementation createHTMLDocument              var element   doc createElement  div             function getText str                element innerHTML   str              str   element textContent              element textContent                   return str                     function decodeHTMLEntities str                if  str  amp  amp  typeof str      string                     var x   getText str                   while  str     x                        str   x                      x   getText x                                     return x                                  return decodeHTMLEntities              Simply call   decodeEntities   lt img src fake onerror  prompt 1   gt     decodeEntities   lt script gt alert  aaa    lt  script gt

User · Answer

A more functional approach to  William Lahti s answer   var entities        amp     amp       apos             x27             x2F            39             47           lt     lt       gt     gt       nbsp           quot          function decodeHTMLEntities  text      return text replace   amp          gm  function  match  entity        return entities entity     match

User · Answer

I know I m a bit late to the game  but I thought I might provide the following snippet as an example of how I decode HTML entities using jQuery   var varTitleE    Chris amp apos  corner   var varTitleD       lt div  gt    html varTitleE  text     console log varTitleE     vs      varTitleD                Don t forget to fire-up your inspector firebug to see the console results -- or simply replace console log      w alert       That said  here s what my console via the Google Chrome inspector read   Chris amp apos  corner vs  Chris  corner

User · Answer

To do it in pure javascript without jquery or predefining everything you can cycle the encoded html string through an elements innerHTML and innerText  textContent  properties for every decode step that is required    lt html gt     lt head gt       lt title gt For every decode step  cycle through innerHTML and innerText  lt  title gt       lt script gt  function decode str      var d   document createElement  div      d innerHTML   str     return typeof d innerText      undefined    d innerText   d textContent         lt  script gt     lt  head gt     lt body gt       lt script gt  var encodedString     amp lt p amp gt name amp lt  p amp gt  amp lt p amp gt  amp lt span style   font-size xx-small    amp gt ajde amp lt  span amp gt  amp lt  p amp gt  amp lt p amp gt  amp lt em amp gt da amp lt  em amp gt  amp lt  p amp gt         lt  script gt       lt input type button onclick  document body innerHTML decode encodedString    gt     lt  body gt   lt  html gt

User · Answer

I recommend against using the jQuery code that was accepted as the answer. While it does not insert the string to decode into the page, it does cause things such as scripts and HTML elements to get created. This is way more code than we need. Instead, I suggest using a safer, more optimized function.

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

To use this function, just call decodeEntities("&") and it will use the same underlying techniques as the jQuery version will—but without jQuery's overhead, and after sanitizing the HTML tags in the input. See Mike Samuel's comment on the accepted answer for how to filter out HTML tags.

This function can be easily used as a jQuery plugin by adding the following line in your project.

jQuery.decodeEntities = decodeEntities;

User · Answer

Here s a quick method that doesn t require creating a div  and decodes the  most common  HTML escaped chars   function decodeHTMLEntities text        var entities               amp     amp               apos                     x27                     x2F                    39                     47                   lt     lt               gt     gt               nbsp                   quot                    for  var i   0  max   entities length  i  lt  max    i           text   text replace new RegExp   amp   entities i  0        g    entities i  1         return text

User · Answer

Like Robert K said  don t use jQuery html   text   to decode html entities as it s unsafe because user input should never have access to the DOM  Read about XSS for why this is unsafe   Instead try the Underscore js utility-belt library which comes with escape and unescape methods     escape string   Escapes a string for insertion into HTML  replacing  amp    lt    gt         and   characters     escape  Curly  Larry  amp  Moe      gt   Curly  Larry  amp amp  Moe      unescape string   The opposite of escape  replaces  amp amp    amp lt    amp gt    amp quot    amp  96  and  amp  x27  with their unescaped counterparts     unescape  Curly  Larry  amp amp  Moe      gt   Curly  Larry  amp  Moe    To support decoding more characters  just copy the Underscore unescape method and add more characters to the map

User · Answer

here is another version    x000D   x000D  function convertHTMLEntity text   x000D      const span   document createElement  span    x000D   x000D      return text x000D       replace   amp   A-Za-z0-9    gi   entity position text   gt    x000D          span innerHTML   entity  x000D          return span innerText  x000D          x000D    x000D   x000D  console log convertHTMLEntity  Large  amp lt   amp  163  500     x000D   x000D   x000D

User · Answer

Injecting untrusted HTML into the page is dangerous as explained in How to decode HTML entities using jQuery?.

One alternative is to use a JavaScript-only implementation of PHP's html_entity_decode (from http://phpjs.org/functions/html_entity_decode:424). The example would then be something like:

var varTitle = html_entity_decode("Chris&apos; corner");

[javascript] HTML Entity Decode

The answer is

Examples related to javascript

Examples related to jquery

Examples related to html

Tags