Pretty printing XML with javascript

Question

I have a string that represents a non indented XML that I would like to pretty-print  For example    lt root gt  lt node  gt  lt  root gt    should become    lt root gt     lt node  gt   lt  root gt    Syntax highlighting is not a requirement  To tackle the problem I first transform the XML to add carriage returns and white spaces and then use a pre tag to output the XML  To add new lines and white spaces I wrote the following function    function formatXml xml        var formatted           var reg      gt    lt        g      xml   xml replace reg    1 r n 2 3        var pad   0      jQuery each xml split   r n    function index  node            var indent   0          if  node match      lt    w   gt    gt                     indent   0            else if  node match     lt    w                   if  pad    0                    pad -  1                          else if  node match     lt  w   gt         gt                       indent   1            else               indent   0                     var padding               for  var i   0  i  lt  pad  i                  padding                             formatted    padding   node     r n           pad    indent               return formatted      I then call the function like this   jQuery  pre formatted-xml   text formatXml   lt root gt  lt node1  gt  lt  root gt        This works perfectly fine for me but while I was writing the previous function I thought that there must be a better way  So my question is do you know of any better way given an XML string to pretty-print it in an html page  Any javascript frameworks and or plugins that could do the job are welcome  My only requirement is this to be done on the client side

User · Accepted Answer

From the text of the question I get the impression that a string result is expected  as opposed to an HTML-formatted result   If this is so  the simplest way to achieve this is to process the XML document with the identity transformation and with an  lt xsl output indent  yes   gt  instruction     lt xsl stylesheet version  1 0   xmlns xsl  http   www w3 org 1999 XSL Transform     lt xsl output omit-xml-declaration  yes  indent  yes          lt xsl template match  node               lt xsl copy           lt xsl apply-templates select  node                lt  xsl copy       lt  xsl template   lt  xsl stylesheet    When applying this transformation on the provided XML document     lt root  lt node   lt  root    most XSLT processors   NET XslCompiledTransform  Saxon 6 5 4 and Saxon 9 0 0 2  AltovaXML  produce the wanted result     lt root     lt node     lt  root

User · Answer

here is another function to format xml  function formatXml xml       var out           var tab               var indent   0      var inClosingTag false      var dent function no           out      n           for var i 0  i  lt  no  i                out  tab              for  var i 0  i  lt  xml length  i              var c   xml charAt i           if c    lt                    handle  lt               if xml charAt i 1                           inClosingTag   true                  dent --indent                             out  c           else if c    gt                 out  c                 handle   gt              if xml charAt i-1                           out    n                     dent --indent               else                if  inClosingTag                  dent   indent                 else                  out    n                   inClosingTag false                                         else            out  c                      return out

User · Answer

what about creating a stub node  document createElement  div   - or using your library equivalent   filling it with the xml string  via innerHTML  and calling simple recursive function for the root element or the stub element in case you don t have a root  The function would call itself for all the child nodes   You could then syntax-highlight along the way  be certain the markup is well-formed  done automatically by browser when appending via innerHTML  etc  It wouldn t be that much code and probably fast enough

User · Answer

here is another function to format xml  function formatXml xml       var out           var tab               var indent   0      var inClosingTag false      var dent function no           out      n           for var i 0  i  lt  no  i                out  tab              for  var i 0  i  lt  xml length  i              var c   xml charAt i           if c    lt                    handle  lt               if xml charAt i 1                           inClosingTag   true                  dent --indent                             out  c           else if c    gt                 out  c                 handle   gt              if xml charAt i-1                           out    n                     dent --indent               else                if  inClosingTag                  dent   indent                 else                  out    n                   inClosingTag false                                         else            out  c                      return out

User · Answer

Xml-to-json library has method formatXml xml   I am the maintainer of the project   var prettyXml   formatXml   lt a gt  lt b  gt  lt  a gt          lt a gt        lt b  gt      lt  a gt

User · Answer

Slight modification of efnx clckclcks s javascript function   I changed the formatting from spaces to tab  but most importantly I allowed text to remain on one line   var formatXml   this formatXml   function  xml            var reg      gt   s   lt        g     updated Mar 30  2015         var wsexp             n g          var contexp      lt    gt      n  g          xml   xml replace reg    1 n 2 3   replace wsexp    1 n   replace contexp    1 n 2            var pad   0          var formatted               var lines   xml split   n            var indent   0          var lastType    other              4 types of tags - single  closing  opening  other  text  doctype  comment  - 4 4   16 transitions          var transitions                  single- gt single   0               single- gt closing   -1               single- gt opening   0               single- gt other   0               closing- gt single   0               closing- gt closing   -1               closing- gt opening   0               closing- gt other   0               opening- gt single   1               opening- gt closing   0               opening- gt opening   1               opening- gt other   1               other- gt single   0               other- gt closing   -1               other- gt opening   0               other- gt other   0                     for  var i   0  i  lt  lines length  i                  var ln   lines i                   Luca Viggiani 2017-07-03  handle optional  lt  xml       gt  declaration             if  ln match   s  lt   xml                      formatted    ln     n                   continue                               ---              var single   Boolean ln match   lt      gt         is this line a single tag  ex   lt br   gt              var closing   Boolean ln match   lt      gt         is this a closing tag  ex   lt  a gt              var opening   Boolean ln match   lt        gt         is this even a tag  that s not  lt  something gt               var type   single    single    closing    closing    opening    opening     other               var fromTo   lastType    - gt     type              lastType   type              var padding                    indent    transitions fromTo               for  var j   0  j  lt  indent  j                      padding      t                             if  fromTo     opening- gt closing                   formatted   formatted substr 0  formatted length - 1    ln     n      substr removes line break   n  from prev loop             else                 formatted    padding   ln     n                      return formatted

User · Answer

Personnaly  I use google-code-prettify with this function    prettyPrintOne   lt root gt  lt node1 gt  lt root gt     xml

User · Answer

Personnaly  I use google-code-prettify with this function    prettyPrintOne   lt root gt  lt node1 gt  lt root gt     xml

User · Answer

Or just print out the special HTML characters   Ex   lt xmlstuff gt  amp  10   amp  09  lt node   gt  amp  10  lt  xmlstuff gt        amp  09    Horizontal tab    amp  10    Line feed

User · Answer

var reg      gt   s   lt        g  xml   xml replace   r  n g         deleting already existing whitespaces xml   xml replace reg    1 r n 2 3

User · Answer

This can be done using native javascript tools  without 3rd party libs  extending the  Dimitre Novatchev s answer   var prettifyXml   function sourceXml        var xmlDoc   new DOMParser   parseFromString sourceXml   application xml        var xsltDoc   new DOMParser   parseFromString              describes how we want to modify the XML - indent everything           lt xsl stylesheet xmlns xsl  http   www w3 org 1999 XSL Transform  gt                lt xsl strip-space elements      gt                lt xsl template match  para content-style  not text      gt       change to just text   to strip space in text nodes               lt xsl value-of select  normalize-space      gt                lt  xsl template gt                lt xsl template match  node       gt                  lt xsl copy gt  lt xsl apply-templates select  node        gt  lt  xsl copy gt                lt  xsl template gt                lt xsl output indent  yes   gt              lt  xsl stylesheet gt          join   n     application xml         var xsltProcessor   new XSLTProcessor            xsltProcessor importStylesheet xsltDoc       var resultDoc   xsltProcessor transformToDocument xmlDoc       var resultXml   new XMLSerializer   serializeToString resultDoc       return resultXml      console log prettifyXml   lt root gt  lt node  gt  lt  root gt        Outputs    lt root gt     lt node  gt   lt  root gt    JSFiddle  Note  as pointed out by  jat255  pretty printing with  lt xsl output indent  yes   gt  is not supported by firefox  It only seems to work in chrome  opera and probably the rest webkit-based browsers

User · Answer

Found this thread when I had a similar requirement but I simplified OP s code as follows   function formatXml xml  tab       tab   optional indent value  default is tab   t      var formatted       indent          tab   tab      t       xml split   gt  s  lt    forEach function node            if  node match       w     indent   indent substring tab length      decrease indent by one  tab          formatted    indent     lt     node     gt  r n           if  node match     lt   w   gt              indent    tab                  increase indent             return formatted substring 1  formatted length-3       works for me

User · Answer

If you are looking for a JavaScript solution just take the code from the Pretty Diff tool at http   prettydiff com  m beautify  You can also send files to the tool using the s parameter  such as  http   prettydiff com  m beautify amp s https   stackoverflow com

User · Answer

Or if you d just like another js function to do it  I ve modified Darin s  a lot    var formatXml   this formatXml   function  xml        var reg      gt    lt        g      var wsexp             n g      var contexp      lt    gt      n  g      xml   xml replace reg    1 n 2 3   replace wsexp    1 n   replace contexp    1 n 2        var pad   0      var formatted           var lines   xml split   n        var indent   0      var lastType    other          4 types of tags - single  closing  opening  other  text  doctype  comment  - 4 4   16 transitions      var transitions              single- gt single       0           single- gt closing      -1           single- gt opening      0           single- gt other        0           closing- gt single      0           closing- gt closing     -1           closing- gt opening     0           closing- gt other       0           opening- gt single      1           opening- gt closing     0            opening- gt opening     1           opening- gt other       1           other- gt single        0           other- gt closing       -1           other- gt opening       0           other- gt other         0             for  var i 0  i  lt  lines length  i              var ln   lines i           var single   Boolean ln match   lt      gt         is this line a single tag  ex   lt br   gt          var closing   Boolean ln match   lt      gt         is this a closing tag  ex   lt  a gt          var opening   Boolean ln match   lt        gt         is this even a tag  that s not  lt  something gt           var type   single    single    closing    closing    opening    opening     other           var fromTo   lastType    - gt     type          lastType   type          var padding                indent    transitions fromTo           for  var j   0  j  lt  indent  j                  padding                               formatted    padding   ln     n              return formatted

User · Answer

XMLSpectrum formats XML  supports attribute indentation and also does syntax-highlighting for XML and any embedded XPath expressions     XMLSpectrum is an open source project  coded in XSLT 2 0 - so you can run this server-side with a processor such as Saxon-HE  recommended  or client-side using Saxon-CE   XMLSpectrum is not yet optimised to run in the browser - hence the recommendation to run this server-side

User · Answer

what about creating a stub node  document createElement  div   - or using your library equivalent   filling it with the xml string  via innerHTML  and calling simple recursive function for the root element or the stub element in case you don t have a root  The function would call itself for all the child nodes   You could then syntax-highlight along the way  be certain the markup is well-formed  done automatically by browser when appending via innerHTML  etc  It wouldn t be that much code and probably fast enough

User · Answer

var formatXml   this formatXml   function  xml            var reg      gt    lt        g          var wsexp             n g          var contexp      lt    gt      n  g          xml   xml replace reg    1 n 2 3   replace wsexp    1 n   replace contexp    1 n 2            var pad   0          var formatted               var lines   xml split   n            var indent   0          var lastType    other

User · Answer

You can get pretty formatted xml with xml-beautify  var prettyXmlText   new XmlBeautify   beautify xmlText                        indent       useSelfClosingElement  true      indent indent pattern like white spaces  useSelfClosingElement  true  use self-closing element when empty element   JSFiddle  Original Before    lt  xml version  1 0  encoding  utf-8   gt  lt example version  2 0  gt     lt head gt  lt title gt Original aTitle lt  title gt  lt  head gt     lt body info  none   gt  lt  body gt   lt  example gt    Beautified After    lt  xml version  1 0  encoding  utf-8   gt   lt example version  2 0  gt     lt head gt       lt title gt Original aTitle lt  title gt     lt  head gt     lt body info  none    gt   lt  example gt

User · Answer

Or if you d just like another js function to do it  I ve modified Darin s  a lot    var formatXml   this formatXml   function  xml        var reg      gt    lt        g      var wsexp             n g      var contexp      lt    gt      n  g      xml   xml replace reg    1 n 2 3   replace wsexp    1 n   replace contexp    1 n 2        var pad   0      var formatted           var lines   xml split   n        var indent   0      var lastType    other          4 types of tags - single  closing  opening  other  text  doctype  comment  - 4 4   16 transitions      var transitions              single- gt single       0           single- gt closing      -1           single- gt opening      0           single- gt other        0           closing- gt single      0           closing- gt closing     -1           closing- gt opening     0           closing- gt other       0           opening- gt single      1           opening- gt closing     0            opening- gt opening     1           opening- gt other       1           other- gt single        0           other- gt closing       -1           other- gt opening       0           other- gt other         0             for  var i 0  i  lt  lines length  i              var ln   lines i           var single   Boolean ln match   lt      gt         is this line a single tag  ex   lt br   gt          var closing   Boolean ln match   lt      gt         is this a closing tag  ex   lt  a gt          var opening   Boolean ln match   lt        gt         is this even a tag  that s not  lt  something gt           var type   single    single    closing    closing    opening    opening     other           var fromTo   lastType    - gt     type          lastType   type          var padding                indent    transitions fromTo           for  var j   0  j  lt  indent  j                  padding                               formatted    padding   ln     n              return formatted

User · Answer

Use above method for pretty print and then add this in any div by using jquery text   method  for example id of div is xmldiv then use        xmldiv   text formatXml youXmlString

User · Answer

XMLSpectrum formats XML  supports attribute indentation and also does syntax-highlighting for XML and any embedded XPath expressions     XMLSpectrum is an open source project  coded in XSLT 2 0 - so you can run this server-side with a processor such as Saxon-HE  recommended  or client-side using Saxon-CE   XMLSpectrum is not yet optimised to run in the browser - hence the recommendation to run this server-side

User · Answer

Or just print out the special HTML characters   Ex   lt xmlstuff gt  amp  10   amp  09  lt node   gt  amp  10  lt  xmlstuff gt        amp  09    Horizontal tab    amp  10    Line feed

User · Answer

what about creating a stub node  document createElement  div   - or using your library equivalent   filling it with the xml string  via innerHTML  and calling simple recursive function for the root element or the stub element in case you don t have a root  The function would call itself for all the child nodes   You could then syntax-highlight along the way  be certain the markup is well-formed  done automatically by browser when appending via innerHTML  etc  It wouldn t be that much code and probably fast enough

User · Answer

var formatXml   this formatXml   function  xml            var reg      gt    lt        g          var wsexp             n g          var contexp      lt    gt      n  g          xml   xml replace reg    1 n 2 3   replace wsexp    1 n   replace contexp    1 n 2            var pad   0          var formatted               var lines   xml split   n            var indent   0          var lastType    other

User · Answer

Slight modification of efnx clckclcks s javascript function   I changed the formatting from spaces to tab  but most importantly I allowed text to remain on one line   var formatXml   this formatXml   function  xml            var reg      gt   s   lt        g     updated Mar 30  2015         var wsexp             n g          var contexp      lt    gt      n  g          xml   xml replace reg    1 n 2 3   replace wsexp    1 n   replace contexp    1 n 2            var pad   0          var formatted               var lines   xml split   n            var indent   0          var lastType    other              4 types of tags - single  closing  opening  other  text  doctype  comment  - 4 4   16 transitions          var transitions                  single- gt single   0               single- gt closing   -1               single- gt opening   0               single- gt other   0               closing- gt single   0               closing- gt closing   -1               closing- gt opening   0               closing- gt other   0               opening- gt single   1               opening- gt closing   0               opening- gt opening   1               opening- gt other   1               other- gt single   0               other- gt closing   -1               other- gt opening   0               other- gt other   0                     for  var i   0  i  lt  lines length  i                  var ln   lines i                   Luca Viggiani 2017-07-03  handle optional  lt  xml       gt  declaration             if  ln match   s  lt   xml                      formatted    ln     n                   continue                               ---              var single   Boolean ln match   lt      gt         is this line a single tag  ex   lt br   gt              var closing   Boolean ln match   lt      gt         is this a closing tag  ex   lt  a gt              var opening   Boolean ln match   lt        gt         is this even a tag  that s not  lt  something gt               var type   single    single    closing    closing    opening    opening     other               var fromTo   lastType    - gt     type              lastType   type              var padding                    indent    transitions fromTo               for  var j   0  j  lt  indent  j                      padding      t                             if  fromTo     opening- gt closing                   formatted   formatted substr 0  formatted length - 1    ln     n      substr removes line break   n  from prev loop             else                 formatted    padding   ln     n                      return formatted

User · Answer

All of the javascript functions given here won t work for an xml document having unspecified white spaces between the end tag     and the start tag   lt    To fix them  you just need to replace the first line in the functions  var reg      gt    lt        g    by  var reg      gt   s   lt        g

User · Answer

If you are looking for a JavaScript solution just take the code from the Pretty Diff tool at http   prettydiff com  m beautify  You can also send files to the tool using the s parameter  such as  http   prettydiff com  m beautify amp s https   stackoverflow com

User · Answer

Use above method for pretty print and then add this in any div by using jquery text   method  for example id of div is xmldiv then use        xmldiv   text formatXml youXmlString

User · Answer

This can be done using native javascript tools  without 3rd party libs  extending the  Dimitre Novatchev s answer   var prettifyXml   function sourceXml        var xmlDoc   new DOMParser   parseFromString sourceXml   application xml        var xsltDoc   new DOMParser   parseFromString              describes how we want to modify the XML - indent everything           lt xsl stylesheet xmlns xsl  http   www w3 org 1999 XSL Transform  gt                lt xsl strip-space elements      gt                lt xsl template match  para content-style  not text      gt       change to just text   to strip space in text nodes               lt xsl value-of select  normalize-space      gt                lt  xsl template gt                lt xsl template match  node       gt                  lt xsl copy gt  lt xsl apply-templates select  node        gt  lt  xsl copy gt                lt  xsl template gt                lt xsl output indent  yes   gt              lt  xsl stylesheet gt          join   n     application xml         var xsltProcessor   new XSLTProcessor            xsltProcessor importStylesheet xsltDoc       var resultDoc   xsltProcessor transformToDocument xmlDoc       var resultXml   new XMLSerializer   serializeToString resultDoc       return resultXml      console log prettifyXml   lt root gt  lt node  gt  lt  root gt        Outputs    lt root gt     lt node  gt   lt  root gt    JSFiddle  Note  as pointed out by  jat255  pretty printing with  lt xsl output indent  yes   gt  is not supported by firefox  It only seems to work in chrome  opera and probably the rest webkit-based browsers

User · Answer

This my version  maybe usefull for others  using String builder Saw that someone had the same piece of code      public String FormatXml String xml  String tab                var sb   new StringBuilder            int indent   0             find all elements         foreach  string node in Regex Split xml   quot  gt  s  lt  quot                             if at end  lower indent             if  Regex IsMatch node    quot     w quot    indent--              sb AppendLine String Format  quot  0  lt  1  gt  quot   string Concat Enumerable Repeat tab  indent  ToArray     node                   if at start  increase indent             if  Regex IsMatch node    quot   lt   w   gt          quot    indent                         correct first  lt  and last  gt  from the output         String result   sb ToString   Substring 1           return result Remove result Length - Environment NewLine Length-1

User · Answer

You can get pretty formatted xml with xml-beautify  var prettyXmlText   new XmlBeautify   beautify xmlText                        indent       useSelfClosingElement  true      indent indent pattern like white spaces  useSelfClosingElement  true  use self-closing element when empty element   JSFiddle  Original Before    lt  xml version  1 0  encoding  utf-8   gt  lt example version  2 0  gt     lt head gt  lt title gt Original aTitle lt  title gt  lt  head gt     lt body info  none   gt  lt  body gt   lt  example gt    Beautified After    lt  xml version  1 0  encoding  utf-8   gt   lt example version  2 0  gt     lt head gt       lt title gt Original aTitle lt  title gt     lt  head gt     lt body info  none    gt   lt  example gt

User · Answer

This my version  maybe usefull for others  using String builder Saw that someone had the same piece of code      public String FormatXml String xml  String tab                var sb   new StringBuilder            int indent   0             find all elements         foreach  string node in Regex Split xml   quot  gt  s  lt  quot                             if at end  lower indent             if  Regex IsMatch node    quot     w quot    indent--              sb AppendLine String Format  quot  0  lt  1  gt  quot   string Concat Enumerable Repeat tab  indent  ToArray     node                   if at start  increase indent             if  Regex IsMatch node    quot   lt   w   gt          quot    indent                         correct first  lt  and last  gt  from the output         String result   sb ToString   Substring 1           return result Remove result Length - Environment NewLine Length-1

User · Answer

Xml-to-json library has method formatXml xml   I am the maintainer of the project   var prettyXml   formatXml   lt a gt  lt b  gt  lt  a gt          lt a gt        lt b  gt      lt  a gt

User · Answer

what about creating a stub node  document createElement  div   - or using your library equivalent   filling it with the xml string  via innerHTML  and calling simple recursive function for the root element or the stub element in case you don t have a root  The function would call itself for all the child nodes   You could then syntax-highlight along the way  be certain the markup is well-formed  done automatically by browser when appending via innerHTML  etc  It wouldn t be that much code and probably fast enough

User · Answer

var reg      gt   s   lt        g  xml   xml replace   r  n g         deleting already existing whitespaces xml   xml replace reg    1 r n 2 3

User · Answer

All of the javascript functions given here won t work for an xml document having unspecified white spaces between the end tag     and the start tag   lt    To fix them  you just need to replace the first line in the functions  var reg      gt    lt        g    by  var reg      gt   s   lt        g

User · Answer

Found this thread when I had a similar requirement but I simplified OP s code as follows   function formatXml xml  tab       tab   optional indent value  default is tab   t      var formatted       indent          tab   tab      t       xml split   gt  s  lt    forEach function node            if  node match       w     indent   indent substring tab length      decrease indent by one  tab          formatted    indent     lt     node     gt  r n           if  node match     lt   w   gt              indent    tab                  increase indent             return formatted substring 1  formatted length-3       works for me

[javascript] Pretty printing XML with javascript

Examples related to javascript

Examples related to xml

Examples related to xslt

Examples related to pretty-print