Convert special characters to HTML in Javascript

Question

Does any one know how to convert special characters to HTML in Javascript   Example     amp   ampersand  becomes  amp amp     double quote  becomes  amp quot when ENT NOQUOTES is not set     single quote  becomes  amp  039 only when ENT QUOTES is set   lt   less than  becomes  amp lt   gt   greater than  becomes  amp gt

User · Accepted Answer

You need a function that does something like

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

But taking into account your desire for different handling of single/double quotes.

User · Answer

var swapCodes     new Array 8211  8212  8216  8217  8220  8221  8226  8230  8482  169  61558  8226  61607   var swapStrings   new Array  --    --                                          amp trade      amp copy      amp bull      amp bull      amp bull      var TextCheck         doCWBind function div             div  bind               bind function                    TextCheck cleanWord div                              focus function                    TextCheck cleanWord div                              paste function                    TextCheck cleanWord div                                         cleanWord function div           var output     div  val            for  i   0  i  lt  swapCodes length  i                  var swapper   new RegExp    u    swapCodes i  toString 16    g                output   output replace swapper  swapStrings i                        div  val output             Another one that we use now that works  One above I have it calling a script instead and returns the converted code  Only good on small textareas  meaning not a full on article blog ect        For Above  Works on most chars   var swapCodes     new Array 8211  8212  8216  8217  8220  8221  8226  8230  8482  61558  8226  61607 161  162  163  164  165  166  167  168  169  170  171  172  173  174  175  176  177  178  179  180  181  182  183  184  185  186  187  188  189  190  191  192  193  194  195  196  197  198  199  200  201  202  203  204  205  206  207  208  209  210  211  212  213  214  215  216  217  218  219  220  221  222  223  224  225  226  227  228  229  230  231  232  233  234  235  236  237  238  239  240  241  242  243  244  245  246  247  248  249  250  251  252  253  254  255  338  339  352  353  376  402   var swapStrings   new Array  --    --                                          amp trade      amp bull      amp bull      amp bull      amp iexcl      amp cent      amp pound      amp curren      amp yen      amp brvbar      amp sect      amp uml      amp copy      amp ordf      amp laquo      amp not      amp shy      amp reg      amp macr      amp deg      amp plusmn      amp sup2      amp sup3      amp acute      amp micro      amp para      amp middot      amp cedil      amp sup1      amp ordm      amp raquo      amp frac14      amp frac12      amp frac34      amp iquest      amp Agrave      amp Aacute      amp Acirc      amp Atilde      amp Auml      amp Aring      amp AElig      amp Ccedil      amp Egrave      amp Eacute      amp Ecirc      amp Euml      amp Igrave      amp Iacute      amp Icirc      amp Iuml      amp ETH      amp Ntilde      amp Ograve      amp Oacute      amp Ocirc      amp Otilde      amp Ouml      amp times      amp Oslash      amp Ugrave      amp Uacute      amp Ucirc      amp Uuml      amp Yacute      amp THORN      amp szlig      amp agrave      amp aacute      amp acirc      amp atilde      amp auml      amp aring      amp aelig      amp ccedil      amp egrave      amp eacute      amp ecirc      amp euml      amp igrave      amp iacute      amp icirc      amp iuml      amp eth      amp ntilde      amp ograve      amp oacute      amp ocirc      amp otilde      amp ouml      amp divide      amp oslash      amp ugrave      amp uacute      amp ucirc      amp uuml      amp yacute      amp thorn      amp yuml      amp  338      amp  339      amp  352      amp  353      amp  376      amp  402         I create a javascript file that has a lot of functionality including the above  http   www neotropicsolutions com JSChars zip  All files needed are included  I added jQuery 1 4 4  Simply because I saw issues in other versions  yet to try them out   Requires  jQuery  amp  jQuery Impromptu from  http   trentrichardson com Impromptu index php  1  Word Count 2  Character Conversion 3  Checks to ensure this is not passed   notsomeverylongstringmissingspaces  4  Checks to make sure ALL IS NOT ALL UPPERCASE  5  Strip HTML         Word Counter       getScript  js characters js  function                    adtxt   bind  keyup click blur focus change paste                   function event                       TextCheck wordCount 30    adtxt     adtxt count   event                                   adtxt   blur                  function event                       TextCheck check length   adtxt       unsures properly spaces-not one long word                     TextCheck doCWBind   adtxt      char conversion                              TextCheck wordCount 30    adtxt     adtxt count   false                      HTML      lt textarea name  adtxt  id  adtxt  rows  10  cols  70  class  wordCount  gt  lt  textarea gt   lt div id  adtxt count  class  clear  gt  lt  div gt          Just Character Conversions      TextCheck doCWBind   myfield            Run through form fields in a form for case checking         Alerts user when field is blur d      var labels   new Array  Brief Description   Website URL   Contact Name   Website   Email   Linkback URL        var checking   new Array  descr   title   fname   website   email   linkback        TextCheck check it checking labels           Extra security to check again  make sure form is not submitted     var pass   TextCheck validate checking labels       if pass             do form actions               Strip HTML      lt textarea name  adtxt  id  adtxt  rows  10  cols  70  onblur  TextCheck stripHTML this    gt  lt  textarea gt

User · Answer

For those who want to decode an integer char code like  amp  xxx  inside a string  use this function    x000D   x000D  function decodeHtmlCharCodes str     x000D    return str replace    amp    d     g  function match  capture  charCode    x000D      return String fromCharCode charCode   x000D        x000D    x000D   x000D     Will output  The show that gained int   l reputation      x000D  console log decodeHtmlCharCodes  The show that gained int amp  8217 l reputation amp  8217       x000D   x000D   x000D    ES6   x000D   x000D  const decodeHtmlCharCodes   str   gt   x000D    str replace    amp    d     g   match  capture  charCode    gt   x000D      String fromCharCode charCode    x000D   x000D     Will output  The show that gained int   l reputation      x000D  console log decodeHtmlCharCodes  The show that gained int amp  8217 l reputation amp  8217       x000D   x000D   x000D

User · Answer

Here s a good library I ve found very useful in this context   https   github com mathiasbynens he  According to its author      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

User · Answer

function escape  text      return text replace    lt  gt   amp       g  function c        return   amp      c charCodeAt 0                  alert escape   lt  gt  amp

User · Answer

See JavaScript htmlentities http   phpjs org functions htmlentities 425

User · Answer

public static string HtmlEncode  string text        string result      using  StringWriter sw   new StringWriter                  var x   new HtmlTextWriter sw           x WriteEncodedText text           result   sw ToString              return result

User · Answer

This generic function encodes every non alphabetic character to its htmlcode  numeric    function HTMLEncode str        var i   str length          aRet            while  i--            var iC   str i  charCodeAt            if  iC  lt  65    iC  gt  127     iC gt 90  amp  amp  iC lt 97                 aRet i      amp    iC                else               aRet i    str i                       return aRet join

User · Answer

In a PRE tag -and in most other HTML tags- plain text for a batch file that uses the output redirection characters   lt  and    will break the HTML  but here is my tip  anything goes in a TEXTAREA element -it will not break the HTML  mainly because we are inside a control instanced and handled by the OS  and therefore its content are not being parsed by the HTML engine   As an example  say I want to highlight the syntax of my batch file using javascript  I simply paste the code in a textarea without worrying about the HTML reserved characters  and have the script process the innerHTML property of the textarea  which evaluates to the text with the HTML reserved characters replaced by their corresponding ISO-8859-1 entities   Browsers will escape special characters automatically when you retrieve the innerHTML  and outerHTML  property of an element  Using a textarea  and who knows  maybe an input of type text  just saves you from doing the conversion  manually or through code    I use this trick to test my syntax highlighter  and when I m done authoring and testing  I simply hide the textarea from view

User · Answer

a workaround   var temp      div   text   lt     var afterEscape   temp html       afterEscape      amp lt

User · Answer

As was mentioned by dragon the cleanest way to do it is with jQuery   function HtmlEncode s        return     lt div gt    text s  html       function HtmlDecode s        return     lt div gt    html s  text

User · Answer

lt html gt   lt body gt   lt script type  text javascript  gt  var str    amp     lt  gt    alert  B4 Change  n    str   str  str replace    amp  g   amp amp     str  str replace   lt  g   amp lt     str  str replace   gt  g   amp gt     str  str replace     g   amp quot     str  str replace     g   amp  039     alert  After change  n    str    lt  script gt   lt  body gt   lt  html gt          use this to test  http   www w3schools com js tryit asp filename tryjs text

User · Answer

From Mozilla         Note that charCodeAt will always return a value that is less than 65 536  This is because the higher code points are represented by a pair of  lower valued   surrogate  pseudo-characters which are used to comprise the real character  Because of this  in order to examine or reproduce the full character for individual characters of value 65 536 and above  for such characters  it is necessary to retrieve not only charCodeAt i   but also charCodeAt i 1   as if examining reproducing a string with two  letters     The Best Solution          c  2012 Steven Levithan  lt http   slevithan com  gt     MIT license     if   String prototype codePointAt        String prototype codePointAt   function  pos            pos   isNaN pos    0   pos          var str   String this               code   str charCodeAt pos               next   str charCodeAt pos   1              If a surrogate pair         if  0xD800  lt   code  amp  amp  code  lt   0xDBFF  amp  amp  0xDC00  lt   next  amp  amp  next  lt   0xDFFF                return   code - 0xD800    0x400     next - 0xDC00    0x10000                    return code                   Encodes special html characters     param string     return         function html encode string        var ret val           for  var i   0  i  lt  string length  i               if  string codePointAt i   gt  127                ret val      amp      string codePointAt i                   else               ret val    string charAt i                       return ret val      Usage example   html encode

User · Answer

The best way in my opinion is to use the browser s inbuilt HTML escape functionality to handle many of the cases  To do this simply create a element in the DOM tree and set the innerText of the element to your string  Then retrieve the innerHTML of the element  The browser will return an HTML encoded string  function HtmlEncode s      var el   document createElement  quot div quot      el innerText   el textContent   s    s   el innerHTML    return s     Test run  alert HtmlEncode   amp     gt  lt  quot       Output   amp amp    amp gt  amp lt  quot   This method of escaping HTML is also used by the Prototype JS library though differently from the simplistic sample I have given  Note  You will still need to escape quotes  double and single  yourself  You can use any of the methods outlined by others here

User · Answer

If you need support for all standardized named character references  unicode and ambiguous ampersands  the he library is the only 100  reliable solution I m aware of   Example use he encode  foo    bar   baz  qux        Output    foo  amp  xA9  bar  amp  x2260  baz  amp  x1D306  qux   he decode  foo  amp copy  bar  amp ne  baz  amp  x1D306  qux       Output    foo    bar   baz  qux

User · Answer

We can use javascript DOMParser for special characters conversion    const parser   new DOMParser    const convertedValue    parser parseFromString   amp  039  amp amp  amp  039  amp lt  amp gt    application xml   body innerText

User · Answer

Following is the simple function to encode xml escape chars in JS   Encoder htmlEncode unsafeText

User · Answer

Use the javaScript Function escape    that lets you encode strings   e g    escape  yourString

User · Answer

Create a function that uses string replace  function convert str      str   str replace   amp  g    amp amp       str   str replace   gt  g    amp gt       str   str replace   lt  g    amp lt       str   str replace    g    amp quot       str   str replace    g    amp  039       return str

User · Answer

lt  doctype html gt       lt html lang  en  gt       lt head gt         lt meta charset  utf-8  gt         lt title gt html lt  title gt           lt script gt          function              document getElementById  test   innerHTML     amp amp                      lt  script gt       lt  head gt       lt body gt       lt div id  test  gt  lt  div gt       lt  body gt       lt  html gt    you can simply convert special characters to html using above code

User · Answer

Yes  but if you need to insert the resulting string somewhere without it being converted back  you need to do   str replace    g   amp amp amp  39        and so on

User · Answer

You can fix it by replacing the function    text     to   html    its working for me

User · Answer

function char convert          var chars                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       var codes      amp copy     amp  219     amp reg     amp  158     amp  220     amp  159     amp  221     amp  36     amp  222     amp  37     amp  161     amp  223     amp  162     amp  224     amp  163     amp  225     amp Agrave     amp  164     amp  226     amp Aacute     amp  165     amp  227     amp Acirc     amp  166     amp  228     amp Atilde     amp  167     amp  229     amp Auml     amp  168     amp  230     amp Aring     amp  169     amp  231     amp AElig     amp  170     amp  232     amp Ccedil     amp  171     amp  233     amp Egrave     amp  172     amp  234     amp Eacute     amp  173     amp  235     amp Ecirc     amp  174     amp  236     amp Euml     amp  175     amp  237     amp Igrave     amp  176     amp  238     amp Iacute     amp  177     amp  239     amp Icirc     amp  178     amp  240     amp Iuml     amp  179     amp  241     amp ETH     amp  180     amp  242     amp Ntilde     amp  181     amp  243     amp Otilde     amp  182     amp  244     amp Ouml     amp  183     amp  245     amp Oslash     amp  184     amp  246     amp Ugrave     amp  185     amp  247     amp Uacute     amp  186     amp  248     amp Ucirc     amp  187     amp  249     amp Uuml     amp  64     amp  188     amp  250     amp Yacute     amp  189     amp  251     amp THORN     amp  128     amp  190     amp  252    amp szlig     amp  191     amp  253     amp agrave     amp  130     amp  192     amp  254     amp aacute     amp  131     amp  193     amp  255     amp aring     amp  132     amp  194     amp aelig     amp  133     amp  195     amp ccedil     amp  134     amp  196     amp egrave     amp  135     amp  197     amp eacute     amp  136     amp  198     amp ecirc     amp  137     amp  199     amp euml     amp  138     amp  200     amp igrave     amp  139     amp  201     amp iacute     amp  140     amp  202     amp icirc     amp  203     amp iuml     amp  142     amp  204     amp eth     amp  205     amp ntilde     amp  206     amp ograve     amp  145     amp  207     amp oacute     amp  146     amp  208     amp ocirc     amp  147     amp  209     amp otilde     amp  148     amp  210     amp ouml     amp  149     amp  211     amp oslash     amp  150     amp  212     amp ugrave     amp  151     amp  213     amp uacute     amp  152     amp  214     amp ucirc     amp  153     amp  215     amp yacute     amp  154     amp  216     amp thorn     amp  155     amp  217     amp yuml     amp  156     amp  218          for x 0  x lt chars length  x             for  i 0  i lt arguments length  i                 arguments i  value   arguments i  value replace chars x   codes x                        char convert this

User · Answer

Here are a couple methods I use without the need of Jquery   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 safe encoding 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 www WHAK com lt  textarea gt  x000D   x000D   x000D

User · Answer

function ConvChar  str       c      lt     amp lt      gt     amp gt          amp amp          amp quot          amp  039                 amp  035        return str replace     lt  amp       g  function s    return c s           alert  ConvChar   lt - - - - - lt -  - -  -         Result       amp lt - amp quot - ampamp - amp quot - amp gt - amp lt - amp  039 - amp  035 - amp  039 - amp gt    In testarea tag     lt - - - - - lt - - - -    If you ll just change a little chars in long code

User · Answer

This doesn t direcly answer your question  but if you are using innerHTML in order to write text within an element and you ran into encoding issues  just use textContent  i e    var s    Foo  bar  baz  lt qux gt     var element   document getElementById  foo    element textContent   s       lt div id  foo  gt Foo  bar  baz  lt qux gt  lt  div gt

[javascript] Convert special characters to HTML in Javascript

Examples related to javascript