Jolie impression XML avec javascript

J'ai une chaîne qui représente un XML non indenté que je voudrais joliment imprimer. Par exemple:

<root><node/></root>

devrait devenir:

<root>
  <node/>
</root>

La mise en évidence de la syntaxe n'est pas obligatoire. Pour résoudre le problème, je transforme d'abord le XML pour ajouter des retours chariot et des espaces blancs, puis j'utilise une balise pré pour générer le XML. Pour ajouter de nouvelles lignes et des espaces blancs, j'ai écrit la fonction suivante:

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;
}

J'appelle ensuite la fonction comme ceci:

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

Cela fonctionne parfaitement bien pour moi, mais pendant que j'écrivais la fonction précédente, je pensais qu'il devait y avoir un meilleur moyen. Ma question est donc de savoir si vous connaissez un meilleur moyen, avec une chaîne XML, de l'imprimer dans une page html? Tous les frameworks et / ou plugins javascript qui pourraient faire le travail sont les bienvenus. Ma seule exigence est que cela soit fait du côté client.

D'après le texte de la question, j'ai l'impression qu'un résultat de chaîne est attendu , par opposition à un résultat au format HTML.

Si tel est le cas, le moyen le plus simple d'y parvenir est de traiter le document XML avec la transformation d'identité et avec une <xsl:output indent="yes"/>instruction :

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

    <xsl: template match = "node () | @ *">
      <xsl: copy>
        <xsl: apply-templates select = "node () | @ *" />
      </ xsl: copier>
    </ xsl: template>
</ xsl: feuille de style>

Lors de l'application de cette transformation sur le document XML fourni:

<root><node/> </root>

la plupart des processeurs XSLT (.NET XslCompiledTransform, Saxon 6.5.4 et Saxon 9.0.0.2, AltovaXML) produisent le résultat souhaité:

<racine>
  <nœud />
</root>

Légère modification de la fonction javascript de efnx clckclcks. J'ai changé la mise en forme d'espaces en tabulation, mais surtout, j'ai autorisé le texte à rester sur une ligne:

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;
    };

Cela peut être fait en utilisant des outils javascript natifs, sans bibliothèques tierces, en étendant la réponse 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>'));

Les sorties:

<root>
  <node/>
</root>

JSFiddle

Notez, comme indiqué par @ jat255, une jolie impression avec <xsl:output indent="yes"/>n'est pas prise en charge par Firefox. Cela ne semble fonctionner que dans Chrome, Opera et probablement les autres navigateurs basés sur le Webkit.

Personnellement, j'utilise google-code-prettify avec cette fonction:

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

J'ai trouvé ce fil lorsque j'avais une exigence similaire, mais j'ai simplifié le code d'OP comme suit:

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);
}

travaille pour moi!

Ou si vous souhaitez simplement qu'une autre fonction js le fasse, j'ai beaucoup modifié celle de Darin:

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;
};

Toutes les fonctions javascript données ici ne fonctionneront pas pour un document xml comportant des espaces non spécifiés entre la balise de fin '>' et la balise de début '<'. Pour les corriger, il vous suffit de remplacer la première ligne dans les fonctions

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

par

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

que diriez-vous de créer un nœud de stub (document.createElement ('div') - ou en utilisant votre équivalent de bibliothèque), de le remplir avec la chaîne xml (via innerHTML) et d'appeler une fonction récursive simple pour l'élément racine / ou l'élément de stub au cas où vous n'ont pas de racine. La fonction s'appellerait pour tous les nœuds enfants.

Vous pouvez ensuite mettre en évidence la syntaxe en cours de route, être certain que le balisage est bien formé (fait automatiquement par le navigateur lors de l'ajout via innerHTML) etc. Ce ne serait pas autant de code et probablement assez rapide.

Si vous recherchez une solution JavaScript, prenez simplement le code de l'outil Pretty Diff à l' adresse http://prettydiff.com/?m=beautify

Vous pouvez également envoyer des fichiers à l'outil en utilisant le paramètre s, tel que: 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 formate XML, prend en charge l'indentation d'attribut et met également en évidence la syntaxe pour XML et toutes les expressions XPath intégrées:

XMLSpectrum est un projet open source, codé en XSLT 2.0 - vous pouvez donc exécuter ce côté serveur avec un processeur tel que Saxon-HE (recommandé) ou côté client en utilisant Saxon-CE.

XMLSpectrum n'est pas encore optimisé pour s'exécuter dans le navigateur - d'où la recommandation d'exécuter ce côté serveur.

Utilisez la méthode ci-dessus pour une jolie impression, puis ajoutez-la dans n'importe quel div en utilisant la méthode jquery text () . par exemple id de div est xmldivalors utiliser:

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

voici une autre fonction pour formater 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;
}

Vous pouvez obtenir du xml assez formaté avec xml-beautify

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

retrait : motif de retrait comme des espaces blancs

useSelfClosingElement : true => utiliser un élément à fermeture automatique lorsque l'élément vide.

JSFiddle

Original (avant)

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

Embellie (aprè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 bibliothèque Xml-to-json a la méthode formatXml(xml).Je suis le mainteneur du projet.

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

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