HtmlSpecialChars equivalent in Javascript

Question

Apparently  this is harder to find than I thought it would be  And it even is so simple     Is there a function equivalent to PHP s htmlspecialchars built into Javascript  I know it s fairly easy to implement that yourself  but using a built-in function  if available  is just nicer   For those unfamiliar with PHP  htmlspecialchars translates stuff like  lt htmltag  gt  into  amp lt htmltag  amp gt   I know that escape   and encodeURI   do not work this way

User · Answer

function htmlspecialchars str     if  typeof str      string       str   str replace   amp  g    amp amp        must do  amp amp  first      str   str replace    g    amp quot       str   str replace    g    amp  039       str   str replace   lt  g    amp lt       str   str replace   gt  g    amp gt          return str

User · Answer

String prototype escapeHTML   function             return this replace   amp  g    amp amp                        replace   lt  g    amp lt                        replace   gt  g    amp gt                        replace    g    amp quot                        replace    g    amp  039             sample     var toto    test lt br gt    alert toto escapeHTML

User · Answer

For Node JS users  or users utilizing Jade runtime in the browser   you can use Jade s escape function   require  jade   runtime escape         No sense in writing it yourself if someone else is maintaining it

User · Answer

With jQuery it can be like this   var escapedValue       lt div  gt    text value  html      From related question Escaping HTML strings with jQuery  As mentioned in comment double quotes and single quotes are left as-is for this implementation  That means this solution should not be used if you need to make element attribute as a raw html string

User · Answer

Underscore js provides a function for this     escape string            Escapes a string for insertion into HTML  replacing  amp    lt         and   characters       http   underscorejs org  escape  It s not a built-in Javascript function  but if you are already using Underscore it is a better alternative than writing your own function if your strings to convert are not too large

User · Answer

This isn t directly related to this question  but the reverse could be accomplished in JS through   gt  String fromCharCode 8212    gt   quot     quot   That also works with TypeScript

User · Answer

That s HTML Encoding  There s no native javascript function to do that  but you can google and get some nicely done up ones   E g  http   sanzon wordpress com 2008 05 01 neat-little-html-encoding-trick-in-javascript   EDIT  This is what I ve tested   var div   document createElement  div      var text   document createTextNode   lt htmltag  gt       div appendChild text     console log div innerHTML     Output   amp lt htmltag  amp gt

User · Answer

Worth a read  http   bigdingus com 2007 12 29 html-escaping-in-javascript   escapeHTML   function      var MAP          amp      amp amp         lt      amp lt         gt      amp gt              amp  34              amp  39         var repl   function c    return MAP c        return function s        return s replace    amp  lt  gt     g  repl               Note  Only run this once  And don t run it on already encoded strings e g   amp amp  becomes  amp amp amp

User · Answer

Here s a function to escape HTML   function escapeHtml str        var map                   amp      amp amp              lt      amp lt              gt      amp gt                   amp quot                   amp  039              return str replace    amp  lt  gt     g  function m   return map m          And to decode   function decodeHtml str        var map                   amp amp      amp              amp lt      lt              amp gt      gt              amp quot                   amp  039                   return str replace   amp amp   amp lt   amp gt   amp quot   amp  039  g  function m   return map m

User · Answer

Hope this wins the race due to its performance and most important not a chained logic using  replace   amp     amp    replace   lt     lt        var mapObj          amp     amp amp         lt     amp lt         gt     amp gt             amp quot              amp  039      var re   new RegExp Object keys mapObj  join       gi     function escapeHtml str            return str replace re  function matched                return mapObj matched toLowerCase                console log   lt script type  text javascript  gt alert  Hello World    lt  script gt     console log escapeHtml   lt script type  text javascript  gt alert  Hello World    lt  script gt

User · Answer

OWASP recommends that  quot  e xcept for alphanumeric characters   you should  escape all characters with ASCII values less than 256 with the  amp  xHH  format  or a named entity if available  to prevent switching out of  an  attribute  quot  So here s a function that does that  with a usage example   x000D   x000D  function escapeHTML unsafe      return unsafe replace         u0000- u002F    u003A- u0040    u005B- u00FF  g      c   gt    amp        000    c charCodeAt 0   substr -4  4              document querySelector  div   innerHTML       lt span class       escapeHTML  this should break it                -      lt     gt            gt       escapeHTML   lt script gt alert  inspect the attributes   u003C script gt          lt  span gt   x000D   lt div gt  lt  div gt  x000D   x000D   x000D   Disclaimer  You should verify the entity ranges I have provided to validate the safety yourself

User · Answer

Chances are you don t need such a function  Since your code is already in the browser   you can access the DOM directly instead of generating and encoding HTML that will have to be decoded backwards by the browser to be actually used   Use innerText property to insert plain text into the DOM safely and much faster than using any of the presented escape functions  Even faster than assigning a static preencoded string to innerHTML   Use classList to edit classes  dataset to set data- attributes and setAttribute for others   All of these will handle escaping for you  More precisely  no escaping is needed and no encoding will be performed underneath    since you are working around HTML  the textual representation of DOM    x000D   x000D     use existing element x000D  var author    John  Superman  Doe  lt john example com gt    x000D  var el   document getElementById  first    x000D  el dataset author   author  x000D  el textContent    Author    author  x000D   x000D     or create a new element x000D  var a   document createElement  a    x000D  a classList add  important    x000D  a href     search q term  exact  amp n 50   x000D  a textContent    Search for  exact  term   x000D  document body appendChild a   x000D   x000D     actual HTML code x000D  console log el outerHTML   x000D  console log a outerHTML   x000D   important   color  red    x000D   lt div id  first  gt  lt  div gt  x000D   x000D   x000D      This answer is not intended for server-side JavaScript users  Node js  etc       Unless you explicitly convert it to actual HTML afterwards  E g  by accessing innerHTML - this is what happens when you run     lt div  gt    text value  html    suggested in other answers  So if your final goal is to insert some data into the document  by doing it this way you ll be doing the work twice  Also you can see that in the resulting HTML not everything is encoded  only the minimum that is needed for it to be valid  It is done context-dependently  that s why this jQuery method doesn t encode quotes and therefore should not be used as a general purpose escaper  Quotes escaping is needed when you re constructing HTML as a string with untrusted or quote-containing data at the place of an attribute s value  If you use the DOM API  you don t have to care about escaping at all

User · Answer

Yet another take at this is to forgo all the character mapping altogether and to instead convert all unwanted characters into their respective numeric character references  e g    function escapeHtml raw        return raw replace    amp  lt  gt     g  function onReplace match            return   amp      match charCodeAt 0                     Note that the specified RegEx only handles the specific characters that the OP wanted to escape but  depending on the context that the escaped HTML is going to be used  these characters may not be sufficient  Ryan Grove   s article There s more to HTML escaping than  amp    lt      and   is a good read on the topic  And depending on your context  the following RegEx may very well be needed in order to avoid XSS injection   var regex      amp  lt  gt                    g

User · Answer

I am elaborating a bit on o k w  s answer   You can use the browser s DOM functions for that    var utils         dummy  document createElement  div        escapeHTML  function s            this dummy textContent   s         return this dummy innerHTML          utils escapeHTML   lt escapeThis gt  amp      This returns  amp lt escapeThis amp gt  amp amp   It uses the standard function createElement to create an invisible element  then uses the function textContent to set any string as its content and then innerHTML to get the content in its HTML representation

User · Answer

There is a problem with your solution code--it will only escape the first occurrence of each special character  For example  escapeHtml  Kip  s  lt b gt evil lt  b gt   quot test quot  code  s here    Actual    Kip amp  039 s  amp lt b amp gt evil lt  b gt   amp quot test quot  code s here Expected  Kip amp  039 s  amp lt b amp gt evil amp lt  b amp gt   amp quot test amp quot  code amp  039 s here  Here is code that works properly  function escapeHtml text      return text        replace   amp  g   quot  amp amp  quot          replace   lt  g   quot  amp lt  quot          replace   gt  g   quot  amp gt  quot          replace   quot  g   quot  amp quot  quot          replace    g   quot  amp  039  quot        Update The following code will produce identical results to the above  but it performs better  particularly on large blocks of text  thanks jbo5112   function escapeHtml text      var map           amp      amp amp          lt      amp lt          gt      amp gt          quot      amp quot         quot   quot     amp  039             return text replace    amp  lt  gt  quot    g  function m    return map m

User · Answer

Reversed one   function decodeHtml text        return text          replace   amp amp  g    amp             replace   amp lt       lt             replace   amp gt      gt             replace   amp quot  g               replace   amp  039  g

User · Answer

function htmlEscape str       return str replace    amp  lt  gt     g x  gt   amp    x charCodeAt 0           This solution uses the numerical code of the characters  for example  lt  is replaced by  amp  60    Although its performance is slightly worse than the solution using a map  it has the advantages    Not dependent on a library or DOM Pretty easy to remember  you don t need to memorize the 5 HTML escape characters  Little code Reasonably fast  it s still faster than 5 chained replace

[javascript] HtmlSpecialChars equivalent in Javascript?

Examples related to javascript

Examples related to html

Examples related to escaping

Examples related to html-encode