How to decode HTML entities using jQuery

Question

How do I use jQuery to decode HTML entities in a string

User · Answer

You have to make custom function for html entities   function htmlEntities str    return String str  replace   amp  g    amp amp    replace   lt  g    amp lt    replace   gt  g   amp gt    replace    g    amp quot

User · Answer

Use  myString   myString replace     amp amp  g    amp        It is easiest to do it on the server side because apparently JavaScript has no native library for handling entities  nor did I find any near the top of search results for the various frameworks that extend JavaScript    Search for  JavaScript HTML entities   and you might find a few libraries for just that purpose  but they ll probably all be built around the above logic - replace  entity by entity

User · Answer

Here are still one problem  Escaped string does not look readable when assigned to input value  var string     escape   lt img src fake onerror alert  boo    gt        input   val string     Exapmle  https   jsfiddle net kjpdwmqa 3

User · Answer

Without any jQuery    x000D   x000D  function decodeEntities encodedString    x000D    var textArea   document createElement  textarea    x000D    textArea innerHTML   encodedString  x000D    return textArea value  x000D    x000D   x000D  console log decodeEntities  1  amp amp  2         1  amp  2  x000D   x000D   x000D    This works similarly to the accepted answer  but is safe to use with untrusted user input     Security issues in similar approaches  As noted by Mike Samuel  doing this with a  lt div gt  instead of a  lt textarea gt  with untrusted user input is an XSS vulnerability  even if the  lt div gt  is never added to the DOM    x000D   x000D  function decodeEntities encodedString    x000D    var div   document createElement  div    x000D    div innerHTML   encodedString  x000D    return div textContent  x000D    x000D   x000D     Shows an alert x000D  decodeEntities   lt img src  nonexistent image  onerror  alert 1337   gt    x000D   x000D   x000D    However  this attack is not possible against a  lt textarea gt  because there are no HTML elements that are permitted content of a  lt textarea gt   Consequently  any HTML tags still present in the  encoded  string will be automatically entity-encoded by the browser    x000D   x000D  function decodeEntities encodedString    x000D      var textArea   document createElement  textarea    x000D      textArea innerHTML   encodedString  x000D      return textArea value  x000D    x000D   x000D     Safe  and returns the correct answer x000D  console log decodeEntities   lt img src  nonexistent image  onerror  alert 1337   gt     x000D   x000D   x000D       Warning  Doing this using jQuery s  html   and  val   methods instead of using  innerHTML and  value is also insecure  for some versions of jQuery  even when using a textarea  This is because older versions of jQuery would deliberately and explicitly evaluate scripts contained in the string passed to  html    Hence code like this shows an alert in jQuery 1 8     x000D   x000D     lt  -- CDATA x000D     Shows alert x000D      lt textarea gt    x000D   html   lt script gt alert 1337   lt  script gt    x000D   text    x000D   x000D    -- gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   x000D   x000D      Thanks to Eru Penkman for catching this vulnerability

User · Answer

To decode HTML Entities with jQuery  just use this function   function html entity decode txt       var randomID   Math floor  Math random   100000  1          body   append   lt div id  random  randomID    gt  lt  div gt             random  randomID  html txt       var entity decoded       random  randomID  html            random  randomID  remove        return entity decoded      How to use   Javascript   var txtEncoded     amp aacute   amp eacute   amp iacute   amp oacute   amp uacute        some-id   val html entity decode txtEncoded      HTML    lt input id  some-id  type  text    gt

User · Answer

encode   x000D   x000D      lt textarea  gt    html   lt a gt    html       return   amp lt a amp gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt textarea  gt  x000D   x000D   x000D   decode   x000D   x000D      lt textarea  gt    html   amp lt a amp gt   val      return   lt a gt   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt textarea  gt  x000D   x000D   x000D

User · Answer

The question is limited by  with jQuery  but it might help some to know that the jQuery code given in the best answer here does the following underneath   this works with or without jQuery   function decodeEntities input      var y   document createElement  textarea      y innerHTML   input    return y value

User · Answer

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

User · Answer

I just had to have an HTML entity charater   dArr   as a value for a HTML button  The HTML code looks good from the beginning in the browser    lt input type  button  value  Embed  amp  Share   amp dArr   id  share button    gt    Now I was adding a toggle that should also display the charater  This is my solution      share button   toggle      function                share   slideDown              this  attr  value    Embed  amp  Share         lt div gt    html   amp uArr    text             This displays  dArr  again in the button  I hope this might help someone

User · Answer

Like Mike Samuel said  don t use jQuery html   text   to decode html entities as it s unsafe   Instead  use a template renderer like Mustache js or decodeEntities from  VyvIT s comment   Underscore js utility-belt library comes with escape and unescape methods  but they are not safe for user input     escape string     unescape string

User · Answer

I think you re confusing the text and HTML methods  Look at this example  if you use an element s inner HTML as text  you ll get decoded HTML tags  second button   But if you use them as HTML  you ll get the HTML formatted view  first button     lt div id  myDiv  gt      here is a  lt b gt HTML lt  b gt  content   lt  div gt   lt br   gt   lt input value  Write as HTML  type  button  onclick  javascript     resultDiv   html     myDiv   html        gt   amp nbsp  amp nbsp   lt input value  Write as Text  type  button  onclick  javascript     resultDiv   text     myDiv   html        gt   lt br   gt  lt br   gt   lt div id  resultDiv  gt      Results here    lt  div gt    First button writes   here is a HTML content    Second button writes   here is a  lt B HTML lt  B  content    By the way  you can see a plug-in that I found in jQuery plugin - HTML decode and encode that encodes and decodes HTML strings

User · Answer

The easiest way is to set a class selector to your elements an then use following code     function            classSelector   each function a  b             b  html   b  text                   Nothing any more needed   I had this problem and found this clear solution and it works fine

User · Answer

Security note  using this answer  preserved in its original form below  may introduce an XSS vulnerability into your application  You should not use this answer  Read lucascaro s answer for an explanation of the vulnerabilities in this answer  and use the approach from either that answer or Mark Amery s answer instead   Actually  try  x000D   x000D  var encodedStr    This is fun  amp amp  stuff   var decoded       lt div  gt    html encodedStr  text    console log decoded   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div  gt  x000D   x000D   x000D

User · Answer

You can use the he library  available from https   github com mathiasbynens he  Example   console log he decode  J amp  246 rg  amp amp J amp  xFC rgen rocked to  amp amp  fro         Logs  J  rg  amp  J  rgen rocked to  amp  fro    I challenged the library s author on the question of whether there was any reason to use this library in clientside code in favour of the  lt textarea gt  hack provided in other answers here and elsewhere  He provided a few possible justifications    If you re using node js serverside  using a library for HTML encoding decoding gives you a single solution that works both clientside and serverside  Some browsers  entity decoding algorithms have bugs or are missing support for some named character references  For example  Internet Explorer will both decode and render non-breaking spaces   amp nbsp   correctly but report them as ordinary spaces instead of non-breaking ones via a DOM element s innerText property  breaking the  lt textarea gt  hack  albeit only in a minor way   Additionally  IE 8 and 9 simply don t support any of the new named character references added in HTML 5  The author of he also hosts a test of named character reference support at http   mathias html5 org tests html named-character-references   In IE 8  it reports over one thousand errors   If you want to be insulated from browser bugs related to entity decoding and or be able to handle the full range of named character references  you can t get away with the  lt textarea gt  hack  you ll need a library like he  He just darn well feels like doing things this way is less hacky

User · Answer

For ExtJS users  if you already have the encoded string  for example when the returned value of a library function is the innerHTML content  consider this ExtJS function   Ext util Format htmlDecode innerHtmlContent

User · Answer

Suppose you have below String   Our Deluxe cabins are warm  cozy  amp amp  comfortable  var str      p   text       get the text from  lt p gt  tag    p   html str  text        Now decode html entities in your variable i e    str and assign back to  tag   that s it

User · Answer

Try this      x000D   x000D  var htmlEntities     amp lt script amp gt alert  hello    amp lt  script amp gt    x000D  var htmlDecode    parseHTML htmlEntities  0   wholeText    x000D  console log htmlDecode   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D    parseHTML is a Function in Jquery library and it will return an array that includes some details about the given String    in some cases the String is being big  so the function will separate the content to many indexes    and to get all the indexes data you should go to any index  then access to the index called  wholeText    I chose index 0 because it s will work in all cases  small String or big string

User · Answer

Extend a String class   String  decode   - gt        lt textarea   gt    html this  text     and use as method     amp lt img src  myimage jpg  amp gt   decode

User · Answer

Alternatively  theres also a library for it    here  https   cdnjs com libraries he  npm install he                   using node js   lt script src  js he js  gt  lt  script gt     or from your javascript directory   The usage is as follows        to encode text  he encode     Ande  amp  Nonso   Company LImited 2018         to decode the  he decode   amp copy  Ande  amp amp  Nonso amp reg  Company Limited 2018      cheers

[javascript] How to decode HTML entities using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html