Impresionante XML con javascript

Tengo una cadena que representa un XML sin sangría que me gustaría imprimir bonita. Por ejemplo:

<root><node/></root>

debe convertirse:

<root>
  <node/>
</root>

El resaltado de sintaxis no es un requisito. Para abordar el problema, primero transformo el XML para agregar retornos de carro y espacios en blanco y luego uso una etiqueta previa para generar el XML. Para agregar nuevas líneas y espacios en blanco, escribí la siguiente función:

function formatXml(xml) {
    var formatted = '';
    var reg = /(>)(<)(\/*)/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( /.+<\/\w[^>]*>$/ )) {
            indent = 0;
        } else if (node.match( /^<\/\w/ )) {
            if (pad != 0) {
                pad -= 1;
            }
        } else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
            indent = 1;
        } else {
            indent = 0;
        }

        var padding = '';
        for (var i = 0; i < pad; i++) {
            padding += '  ';
        }

        formatted += padding + node + '\r\n';
        pad += indent;
    });

    return formatted;
}

Luego llamo a la función así:

jQuery('pre.formatted-xml').text(formatXml('<root><node1/></root>'));

Esto funciona perfectamente bien para mí, pero mientras escribía la función anterior, pensé que debía haber una mejor manera. Entonces, mi pregunta es ¿conoce alguna mejor manera dada una cadena XML para imprimirla bonita en una página html? Todos los marcos y / o complementos de JavaScript que puedan hacer el trabajo son bienvenidos. Mi único requisito es que esto se haga en el lado del cliente.

Del texto de la pregunta me da la impresión de que se espera un resultado de cadena , en lugar de un resultado con formato HTML.

Si es así, la forma más sencilla de lograrlo es procesar el documento XML con la transformación de identidad y con una <xsl:output indent="yes"/>instrucción :

<xsl: stylesheet version = "1.0"
 xmlns: xsl = "http://www.w3.org/1999/XSL/Transform">
 <xsl: salida omit-xml-Declaration = "yes" indent = "yes" />

    <xsl: template match = "node () | @ *">
      <xsl: copia>
        <xsl: apply-templates select = "node () | @ *" />
      </ xsl: copia>
    </ xsl: plantilla>
</ xsl: hoja de estilos>

Al aplicar esta transformación en el documento XML proporcionado:

<root><node/> </root>

La mayoría de los procesadores XSLT (.NET XslCompiledTransform, Saxon 6.5.4 y Saxon 9.0.0.2, AltovaXML) producen el resultado deseado:

<raíz>
  <nodo />
</root>

Ligera modificación de la función javascript de efnx clckclcks. Cambié el formato de espacios a tabulación, pero lo más importante es que permití que el texto permaneciera en una línea:

var formatXml = this.formatXml = function (xml) {
        var reg = /(>)\s*(<)(\/*)/g; // updated Mar 30, 2015
        var wsexp = / *(.*) +\n/g;
        var contexp = /(<.+>)(.+\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->single': 0,
            'single->closing': -1,
            'single->opening': 0,
            'single->other': 0,
            'closing->single': 0,
            'closing->closing': -1,
            'closing->opening': 0,
            'closing->other': 0,
            'opening->single': 1,
            'opening->closing': 0,
            'opening->opening': 1,
            'opening->other': 1,
            'other->single': 0,
            'other->closing': -1,
            'other->opening': 0,
            'other->other': 0
        };

        for (var i = 0; i < lines.length; i++) {
            var ln = lines[i];

            // Luca Viggiani 2017-07-03: handle optional <?xml ... ?> declaration
            if (ln.match(/\s*<\?xml/)) {
                formatted += ln + "\n";
                continue;
            }
            // ---

            var single = Boolean(ln.match(/<.+\/>/)); // is this line a single tag? ex. <br />
            var closing = Boolean(ln.match(/<\/.+>/)); // is this a closing tag? ex. </a>
            var opening = Boolean(ln.match(/<[^!].*>/)); // is this even a tag (that's not <!something>)
            var type = single ? 'single' : closing ? 'closing' : opening ? 'opening' : 'other';
            var fromTo = lastType + '->' + type;
            lastType = type;
            var padding = '';

            indent += transitions[fromTo];
            for (var j = 0; j < indent; j++) {
                padding += '\t';
            }
            if (fromTo == 'opening->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;
    };

Esto se puede hacer usando herramientas javascript nativas, sin bibliotecas de terceros, extendiendo la respuesta de @Dimitre Novatchev:

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
        '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
        '  <xsl:strip-space elements="*"/>',
        '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
        '    <xsl:value-of select="normalize-space(.)"/>',
        '  </xsl:template>',
        '  <xsl:template match="node()|@*">',
        '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
        '  </xsl:template>',
        '  <xsl:output indent="yes"/>',
        '</xsl:stylesheet>',
    ].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('<root><node/></root>'));

Salidas:

<root>
  <node/>
</root>

JSFiddle

Tenga en cuenta que, como señaló @ jat255, <xsl:output indent="yes"/>firefox no admite la impresión bonita con . Parece que solo funciona en Chrome, Opera y probablemente el resto de navegadores basados ​​en webkit.

Personalmente, uso google-code-prettify con esta función:

prettyPrintOne('<root><node1><root>', 'xml')

Encontré este hilo cuando tenía un requisito similar pero simplifiqué el código de OP de la siguiente manera:

function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
    var formatted = '', indent= '';
    tab = tab || '\t';
    xml.split(/>\s*</).forEach(function(node) {
        if (node.match( /^\/\w/ )) indent = indent.substring(tab.length); // decrease indent by one 'tab'
        formatted += indent + '<' + node + '>\r\n';
        if (node.match( /^<?\w[^>]*[^\/]$/ )) indent += tab;              // increase indent
    });
    return formatted.substring(1, formatted.length-3);
}

¡funciona para mi!

O si simplemente desea que otra función js lo haga, he modificado Darin (mucho):

var formatXml = this.formatXml = function (xml) {
    var reg = /(>)(<)(\/*)/g;
    var wsexp = / *(.*) +\n/g;
    var contexp = /(<.+>)(.+\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->single'    : 0,
        'single->closing'   : -1,
        'single->opening'   : 0,
        'single->other'     : 0,
        'closing->single'   : 0,
        'closing->closing'  : -1,
        'closing->opening'  : 0,
        'closing->other'    : 0,
        'opening->single'   : 1,
        'opening->closing'  : 0, 
        'opening->opening'  : 1,
        'opening->other'    : 1,
        'other->single'     : 0,
        'other->closing'    : -1,
        'other->opening'    : 0,
        'other->other'      : 0
    };

    for (var i=0; i < lines.length; i++) {
        var ln = lines[i];
        var single = Boolean(ln.match(/<.+\/>/)); // is this line a single tag? ex. <br />
        var closing = Boolean(ln.match(/<\/.+>/)); // is this a closing tag? ex. </a>
        var opening = Boolean(ln.match(/<[^!].*>/)); // is this even a tag (that's not <!something>)
        var type = single ? 'single' : closing ? 'closing' : opening ? 'opening' : 'other';
        var fromTo = lastType + '->' + type;
        lastType = type;
        var padding = '';

        indent += transitions[fromTo];
        for (var j = 0; j < indent; j++) {
            padding += '    ';
        }

        formatted += padding + ln + '\n';
    }

    return formatted;
};

Todas las funciones de JavaScript que se proporcionan aquí no funcionarán para un documento xml que tenga espacios en blanco no especificados entre la etiqueta final '>' y la etiqueta de inicio '<'. Para solucionarlos, solo necesita reemplazar la primera línea en las funciones

var reg = /(>)(<)(\/*)/g;

por

var reg = /(>)\s*(<)(\/*)/g;

¿qué pasa con la creación de un nodo auxiliar (document.createElement ('div') - o usando el equivalente de su biblioteca), llenándolo con la cadena xml (a través de innerHTML) y llamando a la función recursiva simple para el elemento raíz / o el elemento auxiliar en caso de que No tengo una raíz. La función se llamaría a sí misma para todos los nodos secundarios.

Luego, podría resaltar la sintaxis en el camino, asegurarse de que el marcado esté bien formado (hecho automáticamente por el navegador cuando se agrega a través de innerHTML), etc. No sería tanto código y probablemente lo suficientemente rápido.

Si está buscando una solución de JavaScript, simplemente tome el código de la herramienta Pretty Diff en http://prettydiff.com/?m=beautify

También puede enviar archivos a la herramienta utilizando el parámetro s, como: http://prettydiff.com/?m=beautify&s=https://stackoverflow.com/

var formatXml = this.formatXml = function (xml) {
        var reg = /(>)(<)(\/*)/g;
        var wsexp = / *(.*) +\n/g;
        var contexp = /(<.+>)(.+\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';

Or just print out the special HTML characters?

Ex: <xmlstuff>&#10; &#09;<node />&#10;</xmlstuff>   


&#09;   Horizontal tab  
&#10;   Line feed

XMLSpectrum formatea XML, admite sangría de atributos y también resalta la sintaxis para XML y cualquier expresión XPath incorporada:

XMLSpectrum es un proyecto de código abierto, codificado en XSLT 2.0, por lo que puede ejecutar este lado del servidor con un procesador como Saxon-HE (recomendado) o del lado del cliente utilizando Saxon-CE.

XMLSpectrum aún no está optimizado para ejecutarse en el navegador, de ahí la recomendación de ejecutar este lado del servidor.

Use el método anterior para una impresión bonita y luego agregue esto en cualquier div utilizando el método jquery text () . por ejemplo, id de div es xmldivusar:

$("#xmldiv").text(formatXml(youXmlString));

Aquí hay otra función para formatear 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 < no; i++)
            out+=tab;
    }


    for (var i=0; i < xml.length; i++) {
        var c = xml.charAt(i);
        if(c=='<'){
            // handle </
            if(xml.charAt(i+1) == '/'){
                inClosingTag = true;
                dent(--indent);
            }
            out+=c;
        }else if(c=='>'){
            out+=c;
            // handle />
            if(xml.charAt(i-1) == '/'){
                out+="\n";
                //dent(--indent)
            }else{
              if(!inClosingTag)
                dent(++indent);
              else{
                out+="\n";
                inClosingTag=false;
              }
            }
        }else{
          out+=c;
        }
    }
    return out;
}

Puede obtener xml bastante formateado con xml-beautify

var prettyXmlText = new XmlBeautify().beautify(xmlText, 
                    {indent: "  ",useSelfClosingElement: true});

sangría : sangría patrón como espacios en blanco

useSelfClosingElement : true => usa el elemento de cierre automático cuando está vacío.

JSFiddle

Original (antes)

<?xml version="1.0" encoding="utf-8"?><example version="2.0">
  <head><title>Original aTitle</title></head>
  <body info="none" ></body>
</example>

Embellecido (después)

<?xml version="1.0" encoding="utf-8"?>
<example version="2.0">
  <head>
    <title>Original aTitle</title>
  </head>
  <body info="none" />
</example>

var reg = /(>)\s*(<)(\/*)/g;
xml = xml.replace(/\r|\n/g, ''); //deleting already existing whitespaces
xml = xml.replace(reg, '$1\r\n$2$3');

La biblioteca Xml-to-json tiene un método formatXml(xml).. Soy el encargado de mantener el proyecto.

var prettyXml = formatXml("<a><b/></a>");

// <a>
//   <b/>
// </a>