Can I escape html special chars in javascript

Question

I want to display a text to HTML by a javascript function  How can I escape html special chars in JS  Is there an API

User · Answer

Came across this issue when building a DOM structure  This question helped me solve it  I wanted to use a double chevron as a path separator  but appending a new text node directly resulted in the escaped character code showing  rather than the character itself   var  div   document createElement  div    var  separator   document createTextNode   amp raquo        div appendChild  separator      this resulted in   amp raquo   being displayed     div innerHTML    separator textContent     this was key

User · Answer

You can use jQuery s  text   function   For example   http   jsfiddle net 9H6Ch   From the jQuery documentation regarding the  text   function      We need to be aware that this method   escapes the string provided as   necessary so that it will render   correctly in HTML  To do so  it calls   the DOM method  createTextNode      does not interpret the string as HTML    Previous Versions of the jQuery Documentation worded it this way  emphasis added       We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML  To do so  it calls the DOM method  createTextNode    which replaces special characters with their HTML entity equivalents  such as  amplt  for  lt

User · Answer

Use this to remove HTML tags from string in JavaScript  const strippedString   htmlString replace    lt     gt     gt   gi   quot  quot     console log strippedString

User · Answer

You can encode every character in your string   function encode e  return e replace      g function e  return  amp    e charCodeAt 0           Or just target the main characters to worry about   amp   inebreaks   lt        and    like    x000D   x000D  function encode r   x000D  return r replace    x26 x0A  lt  gt     g function r  return  amp    r charCodeAt 0        x000D    x000D   x000D  test value encode  How to encode nonly html tags  amp  lt  gt     nice  amp  fast     x000D   x000D                 x000D     x26 is  amp ampersand  it has to be first   x000D     x0A is newline  x000D                 x000D   lt textarea id test rows  9  cols  55  gt  amp  119  amp  119  amp  119  amp  46  amp  87  amp  72  amp  65  amp  75  amp  46  amp  99  amp  111  amp  109  lt  textarea gt  x000D   x000D   x000D

User · Answer

Try this  using the prototype js library   string escapeHTML      Try a demo

User · Answer

I came up with this solution   Let s assume that we want to add some html to the element with unsafe data from the user or database   var unsafe    some unsafe data like  lt script gt alert  oops    lt  script gt  here    var html       html      lt div gt    html      lt p gt     unsafe     lt  p gt    html      lt  div gt     element html html     It s unsafe against XSS attacks  Now add this     document createElement  div    html unsafe  text      So it is   var unsafe    some unsafe data like  lt script gt alert  oops    lt  script gt  here    var html       html      lt div gt    html      lt p gt       document createElement  div    html unsafe  text        lt  p gt    html      lt  div gt     element html html     To me this is much easier than using  replace   and it ll remove    all possible html tags  I hope

User · Answer

If you already use modules in your app  you can use escape-html module     import escapeHtml from  escape-html   const unsafeString     lt script gt alert  XSS    lt  script gt    const safeString   escapeHtml unsafeString

User · Answer

Using lodash     escape  fred  barney   amp  pebbles         gt   fred  barney   amp amp  pebbles    source code

User · Answer

It was interesting to find a better solution   var escapeHTML   function unsafe      return unsafe replace    amp  lt     g  function m        switch  m          case   amp            return   amp amp          case   lt            return   amp lt          case              return   amp quot          default          return   amp  039                     I do not parse  gt  because it does not break XML HTML code in the result   Here are the benchmarks  http   jsperf com regexpairs Also  I created a universal escape function  http   jsperf com regexpairs2

User · Answer

The most concise and performant way to display unencoded text is to use textContent property   Faster than using innerHTML  And that s without taking into account escaping overhead    x000D   x000D  document body textContent    a  lt b gt  c  lt  b gt    x000D   x000D   x000D

User · Answer

x000D   x000D  function escapeHtml html   x000D    var text   document createTextNode html   x000D    var p   document createElement  p    x000D    p appendChild text   x000D    return p innerHTML  x000D    x000D   x000D     Escape while typing  amp  print result x000D  document querySelector  input   addEventListener  input   e   gt    x000D    console clear    x000D    console log  escapeHtml e target value     x000D      x000D   lt input style  width 90   padding 6px   placeholder   amp lt b amp gt cool amp lt  b amp gt   gt  x000D   x000D   x000D

User · Answer

This is  by far  the fastest way I have seen it done  Plus  it does it all without adding  removing  or changing elements on the page   function escapeHTML unsafeText        let div   document createElement  div        div innerText   unsafeText      return div innerHTML

User · Answer

DOM Elements support converting text to HTML by assigning to innerText   innerText is not a function but assigning to it works as if the text were escaped   document querySelectorAll   id   0  innerText    unsafe   String  gt  gt  lt  gt

User · Answer

function escapeHtml unsafe        return unsafe           replace   amp  g    amp amp              replace   lt  g    amp lt              replace   gt  g    amp gt              replace    g    amp quot              replace    g    amp  039

User · Answer

I think I found the proper way to do it        Create a DOM Text node  var text node   document createTextNode unescaped text       Get the HTML element where you want to insert the text into  var elem   document getElementById  msg span        Optional  clear its old contents   elem innerHTML           Append the text node into it  elem appendChild text node

[javascript] Can I escape html special chars in javascript?

Examples related to javascript

Examples related to html