Encode html entities in javascript

Question

I am working in a CMS which allows users to enter content  The problem is that when they add symbols      it may not display well in all browsers  I would like to set up a list of symbols that must be searched for  and then converted to the corresponding html entity  For example         amp reg    amp      amp amp         amp copy          amp trade   After the conversion  it needs to be wrapped in a  lt sup gt  tag  resulting in this          lt sup gt  amp reg  lt  sup gt    Because a particular font size and padding style is necessary   sup   font-size  0 6em  padding-top  0 2em     Would the JavaScript be something like this   var regs   document querySelectorAll          for   var i   0  l   imgs length  i  lt  l    i       var       regs i     var       document createElement  sup      img parentNode insertBefore         div appendChild           Where       means that there is something that I am not sure about   Additional Details     I would like to do this with pure JavaScript  not something that requires a library like jQuery  thanks   Backend is Ruby  Using RefineryCMS which is built with Ruby on Rails

User · Answer

var htmlEntities                  regex   amp  g entity   amp amp                  regex   gt  g entity   amp gt                  regex   lt  g entity   amp lt                  regex    g entity   amp quot                  regex     g entity   amp aacute                  regex     g entity   amp eacute                  regex     g entity   amp iacute                  regex     g entity   amp oacute                  regex     g entity   amp uacute                total    lt some string value gt   for v in htmlEntities       total   total replace htmlEntities v  regex  htmlEntities v  entity       A array solution

User · Answer

Without any library  if you do not need to support IE  lt  9  you could create a html element and set its content with Node textContent  var str    quot  lt this is not a tag gt  quot   var p   document createElement  quot p quot    p textContent   str  var converted   p innerHTML   Here is an example  https   jsfiddle net 1erdhehv  Update  This only works for HTML tag entities   amp    lt   and  gt

User · Answer

Checkout the tutorial from Ourcodeworld Ourcodeworld - encode and decode html entities with javascript Most importantly  the he library example he encode  foo    bar   baz      qux          foo  amp  xA9  bar  amp  x2260  baz  amp  x1D306  qux      Passing an  options  object to  encode   to explicitly encode all symbols  he encode  foo    bar   baz      qux       encodeEverything   true      he decode  foo  amp copy  bar  amp ne  baz  amp  x1D306  qux          foo    bar   baz      qux   This library would probably make your coding easier and better managed  It is popular  regularly updated and follows the HTML spec  It itself has no dependencies  as can be seen in the package json

User · Answer

The currently accepted answer has several issues  This post explains them  and offers a more robust solution  The solution suggested in that answer previously had  var encodedStr   rawStr replace    u00A0- u9999 lt  gt   amp   gim  function i      return   amp      i charCodeAt 0              The i flag is redundant since no Unicode symbol in the range from U 00A0 to U 9999 has an uppercase lowercase variant that is outside of that same range  The m flag is redundant because   or   are not used in the regular expression  Why the range U 00A0 to U 9999  It seems arbitrary  Anyway  for a solution that correctly encodes all except safe  amp  printable ASCII symbols in the input  including astral symbols    and implements all named character references  not just those in HTML4   use the he library  disclaimer  This library is mine   From its README   he  for    HTML entities     is a robust HTML entity encoder decoder written in JavaScript  It supports all standardized named character references as per HTML  handles ambiguous ampersands and other edge cases just like a browser would  has an extensive test suite  and     contrary to many other JavaScript solutions     he handles astral Unicode symbols just fine  An online demo is available   Also see this relevant Stack Overflow answer

User · Answer

htmlentities   converts  HTML Entities So we build a constant that will contain our html tags we want to convert  const htmlEntities           regex   amp   entity   amp amp          regex   gt   entity   amp gt          regex   lt   entity   amp lt           We build a function that will  convert all corresponding html characters to string    Html    gt  String  function htmlentities  s       var reg       for  v in htmlEntities          reg   new RegExp htmlEntities v  regex   g          s   s replace reg  htmlEntities v  entity             return s       To decode  we build a reverse function that will convert all string to their equivalent html    String    gt  html  function  html entities decode  s       var reg       for  v in htmlEntities          reg   new RegExp htmlEntities v  entity   g          s   s replace reg  htmlEntities v  regex             return s           After  We can encode  all others special characters             with encodeURIComponent   Use Case  var s      lt div gt  God bless you guy    lt  div gt     var h   encodeURIComponent htmlentities s                To encode     h    html entities decode decodeURIComponent h            To decode

User · Answer

I had the same problem and created 2 functions to create entities and translate them back to normal characters  The following methods translate any string to HTML entities and back on String prototype         Convert a string to HTML entities     String prototype toHtmlEntities   function         return this replace    gm  function s               return   amp      s charCodeAt 0                 return  s match   a-z0-9 s   i     s     amp      s charCodeAt 0                            Create string from HTML entities     String fromHtmlEntities   function string        return  string     replace   amp   d   gm function s            return String fromCharCode s match   d  gm  0                You can then use it as following   var str    Test                                      p           en t  st  toHtmlEntities    console log  Entities    str   console log  String    String fromHtmlEntities str      Output in console   Entities   amp  68  amp  105  amp  116  amp  32  amp  105  amp  115  amp  32  amp  101  amp  180  amp  8224  amp  174  amp  165  amp  168  amp  169  amp  729  amp  8747  amp  248  amp  8230  amp  710  amp  402  amp  8710  amp  247  amp  8721  amp  8482  amp  402  amp  8710  amp  230  amp  248  amp  960  amp  163  amp  168  amp  160  amp  402  amp  8482  amp  101  amp  110  amp  32  amp  116  amp  163  amp  101  amp  233  amp  115  amp  116  String  Dit is e                                      p           en t  e  st

User · Answer

HTML Special Characters  amp  its ESCAPE CODES Reserved Characters must be escaped by HTML  We can use a character escape to represent any Unicode character  Ex   amp  - U 00026  in HTML  XHTML or XML using only ASCII characters  Numeric character references  Ex  ampersand  amp   -  amp  38    amp  Named character references  Ex   amp amp   are types of character escape used in markup   Predefined Entities          Original Character          XML entity replacement        XML numeric replacement                                          lt                                                                          amp lt                                                                                        amp  60                                                                               gt                                                                            amp gt                                                                                    amp  62                                                                               quot                                                                            amp quot                                                                             amp  34                                                                               amp                                                                        amp amp                                                                                amp  38                                                                                                                                                          amp apos                                                                              amp  39                                           To display HTML Tags as a normal form in web page we use  lt pre gt    lt code gt  tags or we can escape them  Escaping the string by replacing with any occurrence of the  quot  amp  quot  character by the string  quot  amp amp  quot  and any occurrences of the  quot  gt  quot  character by the string  quot  amp gt  quot   Ex  stackoverflow post function escapeCharEntities         var map              quot  amp  quot    quot  amp amp  quot            quot  lt  quot    quot  amp lt  quot            quot  gt  quot    quot  amp gt  quot            quot   quot  quot    quot  amp quot  quot            quot   quot    quot  amp apos  quot             return map     var mapkeys       mapvalues       var html         encodeRex   function              return  new RegExp mapkeys   g        quot   amp  lt  gt  quot    quot              decodeRex   function              return  new RegExp mapvalues   g        quot   amp amp   amp lt   amp gt   amp quot   amp apos   quot             encodeMap   JSON parse  JSON stringify  escapeCharEntities            json     amp    quot  amp amp  quot    lt    quot  amp lt  quot    gt    quot  amp gt  quot    quot    quot  amp quot  quot       quot  amp apos  quot       decodeMap   JSON parse  JSON stringify  swapJsonKeyValues  escapeCharEntities               encode   function   str             var encodeRexs   html encodeRex            console log  Encode Rex     encodeRexs         amp  lt  gt  quot    gm         return str replace encodeRexs  function m    console log  Encode M     m   return html encodeMap m          m    lt   quot   gt  SpecialChars            decode   function   str             var decodeRexs   html decodeRex            console log  Decode Rex     decodeRexs         amp amp   amp lt   amp gt   amp quot   amp apos   g         return str replace decodeRexs  function m    console log  Decode M     m   return html decodeMap m          m    amp lt   amp quot   amp gt            function swapJsonKeyValues   json         var count   Object keys  json   length      var obj           var keys        val        keysCount   1      for var key in json            if   json hasOwnProperty  key                   obj  json  key       key              keys    key              if  keysCount  lt  count                     val    json  key                      else                   val    json  key                              keysCount                        keys            val              console log  keys          val       mapkeys   keys      mapvalues   val      return obj     console log  Encode     html encode   lt input type  quot password quot  name  quot password quot  value  quot  quot   gt        console log  Decode     html decode html encode   lt input type  quot password quot  name  quot password quot  value  quot  quot   gt         O P  Encode    amp lt input type  amp quot password amp quot  name  amp quot password amp quot  value  amp quot  amp quot   amp gt  Decode    lt input type  quot password quot  name  quot password quot  value  quot  quot   gt

User · Answer

Here is how I implemented the encoding  I took inspiration from the answers given above   x000D   x000D  function encodeHTML str      const code                   amp nbsp                   amp cent                   amp pound                   amp yen                    amp euro                    amp copy                   amp reg            lt       amp lt             gt       amp gt                    amp quot             amp       amp amp                   amp apos          return str replace    u00A0- u9999 lt  gt   amp       gm   i   gt code i          TEST console log encodeHTML  Dolce  amp  Gabbana     console log encodeHTML  Hamburgers  lt  Pizza  lt  Tacos     console log encodeHTML  Sixty  gt  twelve     console log encodeHTML  Stuff in  quotation marks      console log encodeHTML  Schindler s List     console log encodeHTML   lt  gt      x000D   x000D   x000D

User · Answer

one of the Easy Way for Encode Or Decode HTML-entities just Call a Function with one argument    Decode HTML-entities function decodeHTMLEntities text      var textArea   document createElement  textarea      textArea innerHTML   text    return textArea value     Decode HTML-entities  JQuery  function decodeHTMLEntities text      return    quot  lt textarea  gt  quot   html text  text       Encode HTML-entities function encodeHTMLEntities text      var textArea   document createElement  textarea      textArea innerText   text    return textArea innerHTML     Encode HTML-entities  JQuery  function encodeHTMLEntities text      return    quot  lt textarea  gt  quot   text text  html

User · Answer

You can use this   var escapeChars               cent             pound             yen             euro            copy             reg       lt      lt       gt      gt            quot       amp      amp              39      var regexString        for var key in escapeChars      regexString    key    regexString          var regex   new RegExp  regexString   g     function escapeHTML str      return str replace regex  function m        return   amp     escapeChars m                    https   github com epeli underscore string blob master escapeHTML js  var htmlEntities         nbsp           cent            pound            yen            euro             copy            reg            lt    lt        gt    gt        quot           amp    amp        apos           function unescapeHTML str        return str replace    amp          g  function  entity  entityCode            var match           if  entityCode in htmlEntities                return htmlEntities entityCode                 eslint no-cond-assign  0             else if  match   entityCode match    x   da-fA-F                      return String fromCharCode parseInt match 1   16                  eslint no-cond-assign  0             else if  match   entityCode match      d                     return String fromCharCode   match 1              else               return entity

User · Answer

If you want to avoid encode html entities more than once function encodeHTML str       return str replace     u00A0- u9999 lt  gt  amp         g  function full  char  next          if char       amp      next                   if    u00A0- u9999 lt  gt  amp    test next             next     amp      next charCodeAt 0                  return   amp      char charCodeAt 0          next                 return full             function decodeHTML str       return str replace   amp    0-9     g  function full  int            return String fromCharCode parseInt int                 Example var text    quot  lt a gt Content  amp  169   lt   gt  amp  lt  amp   gt    lt  a gt  quot    text   encodeHTML text   console log  quot Encode 1 times   quot    text        amp  60 a amp  62 Content  amp  169   amp  60   amp  62  amp  38  amp  60  amp  38   amp  62    amp  60  a amp  62   text   encodeHTML text   console log  quot Encode 2 times   quot    text        amp  60 a amp  62 Content  amp  169   amp  60   amp  62  amp  38  amp  60  amp  38   amp  62    amp  60  a amp  62   text   decodeHTML text   console log  quot Decoded   quot    text        lt a gt Content     lt   gt  amp  lt  amp   gt    lt  a gt

User · Answer

You can use the charCodeAt   method to check if the specified character has a value higher than 127 and convert it to a numeric character reference using toString 16

User · Answer

If you re already using jQuery  try html         lt div gt    text   lt script gt alert  gotcha    lt  script gt    html        amp lt script amp gt alert  gotcha    amp lt  script amp gt     An in-memory text node is instantiated  and html   is called on it   It s ugly  it wastes a bit of memory  and I have no idea if it s as thorough as something like the he library but if you re already using jQuery  maybe this is an option for you   Taken from blog post Encode HTML entities with jQuery by Felix Geisend  rfer

User · Answer

replaceHtmlEntities text      var tagsToReplace           amp amp      amp          amp lt      lt          amp gt      gt           var newtext   text    for  var tag in tagsToReplace        if  Reflect apply    hasOwnProperty  this   tagsToReplace  tag            var regex   new RegExp tag   g          newtext   newtext replace regex  tagsToReplace tag                return newtext

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt style gt  x000D  button   x000D  backround   ccc  x000D  padding  14px  x000D  width  400px  x000D  font-size  32px  x000D    x000D   demo   x000D  font-size  20px  x000D  font-family  Arial  x000D  font-weight  bold  x000D    x000D   lt  style gt  x000D   lt body gt  x000D   x000D   lt p gt Click the button to decode  lt  p gt  x000D   x000D   lt button onclick  entitycode    gt Html Code lt  button gt  x000D   x000D   lt p id  demo  gt  lt  p gt  x000D   x000D   x000D   lt script gt  x000D  function entitycode     x000D    var uri    quotation    ark     amp apos    apostrophe      amp amp    ampersand     amp lt    less-than     amp gt    greater-than     non-   reaking space     amp iexcl    inverted exclamation mark     amp cent    cent     amp pound    pound     amp curren    currency     amp yen    yen     amp brvbar    broken vertical bar     amp sect    section     amp uml    spacing diaeresis     amp copy    copyright     amp ordf    feminine ordinal indicator     amp laquo    angle quotation mark  left      amp not    negation     amp shy    soft hyphen     amp reg    registered trademark     amp macr    spacing macron     amp deg    degree     amp plusmn    plus-or-minus      amp sup2    superscript 2     amp sup3    superscript 3     amp acute    spacing acute     amp micro    micro     amp para    paragraph     amp middot    middle dot     amp cedil    spacing cedilla     amp sup1    superscript 1     amp ordm    masculine ordinal indicator     amp raquo    angle quotation mark  right      amp frac14    fraction 1 4     amp frac12    fraction 1 2     amp frac34    fraction 3 4     amp iquest    inverted question mark     amp times    multiplication     amp divide    division     amp Agrave    capital a  grave accent     amp Aacute    capital a  acute accent     amp Acirc    capital a  circumflex accent     amp Atilde    capital a  tilde     amp Auml    capital a  umlaut mark     amp Aring    capital a  ring     amp AElig    capital ae     amp Ccedil    capital c  cedilla     amp Egrave    capital e  grave accent     amp Eacute    capital e  acute accent     amp Ecirc    capital e  circumflex accent     amp Euml    capital e  umlaut mark     amp Igrave    capital i  grave accent     amp Iacute    capital i  acute accent     amp Icirc    capital i  circumflex accent     amp Iuml    capital i  umlaut mark     amp ETH    capital eth  Icelandic     amp Ntilde    capital n  tilde     amp Ograve    capital o  grave accent     amp Oacute    capital o  acute accent     amp Ocirc    capital o  circumflex accent     amp Otilde    capital o  tilde     amp Ouml    capital o  umlaut mark     amp Oslash    capital o  slash     amp Ugrave    capital u  grave accent     amp Uacute    capital u  acute accent     amp Ucirc    capital u  circumflex accent     amp Uuml    capital u  umlaut mark     amp Yacute    capital y  acute accent     amp THORN    capital THORN  Icelandic     amp szlig    small sharp s  German     amp agrave    small a  grave accent     amp aacute    small a  acute accent     amp acirc    small a  circumflex accent     amp atilde    small a  tilde     amp auml    small a  umlaut mark     amp aring    small a  ring     amp aelig    small ae     amp ccedil    small c  cedilla     amp egrave    small e  grave accent     amp eacute    small e  acute accent     amp ecirc    small e  circumflex accent     amp euml    small e  umlaut mark     amp igrave    small i  grave accent     amp iacute    small i  acute accent     amp icirc    small i  circumflex accent     amp iuml    small i  umlaut mark     amp eth    small eth  Icelandic     amp ntilde    small n  tilde     amp ograve    small o  grave accent     amp oacute    small o  acute accent     amp ocirc    small o  circumflex accent     amp otilde    small o  tilde     amp ouml    small o  umlaut mark     amp oslash    small o  slash     amp ugrave    small u  grave accent     amp uacute    small u  acute accent     amp ucirc    small u  circumflex accent     amp uuml    small u  umlaut mark     amp yacute    small y  acute accent     amp thorn    small thorn  Icelandic     amp yuml    small y  umlaut mark   x000D    var enc   encodeURI uri   x000D    var dec   decodeURI enc   x000D    var res   dec  x000D    document getElementById  demo   innerHTML   res  x000D    x000D   lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use regex to replace any character in a given unicode range with its html entity equivalent  The code would look something like this  var encodedStr   rawStr replace    u00A0- u9999 lt  gt   amp   g  function i       return   amp    i charCodeAt 0            This code will replace all characters in the given range  unicode 00A0 - 9999  as well as ampersand  greater  amp  less than  with their html entity equivalents  which is simply  amp  nnn  where nnn is the unicode value we get from charCodeAt  See it in action here  http   jsfiddle net E3EqX 13   this example uses jQuery for element selectors used in the example  The base code itself  above  does not use jQuery  Making these conversions does not solve all the problems -- make sure you re using UTF8 character encoding  make sure your database is storing the strings in UTF8  You still may see instances where the characters do not display correctly  depending on system font configuration and other issues out of your control  Documentation  String charCodeAt - https   developer mozilla org en-US docs Web JavaScript Reference Global Objects String charCodeAt HTML Character entities - http   www chucke com entities html

User · Answer

Sometimes you just want to encode every character    This function replaces  everything but nothing  in regxp   function encode e  return e replace      g function e  return  amp    e charCodeAt 0            x000D   x000D  function encode w    x000D    return w replace      g  function w    x000D      return   amp      w charCodeAt 0         x000D        x000D    x000D   x000D  test value encode document body innerHTML trim     x000D   lt textarea id test rows 11 cols 55 gt www WHAK com lt  textarea gt  x000D   x000D   x000D

[javascript] Encode html entities in javascript

Examples related to javascript

Examples related to html