Ładny druk XML z javascript

Mam ciąg reprezentujący XML bez wcięć, który chciałbym dobrze wydrukować. Na przykład:

<root><node/></root>

powinno stać się:

<root>
  <node/>
</root>

Podświetlanie składni nie jest wymagane. Aby rozwiązać ten problem, najpierw przekształcam XML, dodając powrót karetki i spacje, a następnie używam znacznika wstępnego, aby wyprowadzić XML. Aby dodać nowe linie i spacje, napisałem następującą funkcję:

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

Następnie wywołuję tę funkcję w ten sposób:

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

U mnie to działa doskonale, ale kiedy pisałem poprzednią funkcję, pomyślałem, że musi być lepszy sposób. Więc moje pytanie brzmi: czy znasz lepszy sposób na ładnie wydrukowany ciąg XML na stronie html? Wszelkie frameworki i / lub wtyczki javascript, które mogłyby wykonać to zadanie, są mile widziane. Moim jedynym wymaganiem jest to, aby zostało to zrobione po stronie klienta.

Z treści pytania odnoszę wrażenie, że oczekiwany jest wynik typu string , a nie wynik w formacie HTML.

Jeśli tak jest, najprostszym sposobem osiągnięcia tego jest przetworzenie dokumentu XML z transformacją tożsamości i <xsl:output indent="yes"/>instrukcją :

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

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

W przypadku stosowania tej transformacji na dostarczonym dokumencie XML:

<root><node/> </root>

większość procesorów XSLT (.NET XslCompiledTransform, Saxon 6.5.4 i Saxon 9.0.0.2, AltovaXML) daje oczekiwany wynik:

<root>
  <node />
</root>

Nieznaczna modyfikacja funkcji javascript efnx clckclcks. Zmieniłem formatowanie ze spacji na tabulator, ale co najważniejsze pozwoliłem, aby tekst pozostał w jednej linii:

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

Można to zrobić za pomocą natywnych narzędzi javascript, bez bibliotek innych firm, rozszerzając odpowiedź @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>'));

Wyjścia:

<root>
  <node/>
</root>

JSFiddle

Uwaga, jak wskazał @ jat255, ładne drukowanie w programie <xsl:output indent="yes"/>Firefox nie jest obsługiwane. Wygląda na to, że działa tylko w Chrome, Opera i prawdopodobnie w pozostałych przeglądarkach opartych na webkitach.

Osobiście używam google-code-prettify z tą funkcją:

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

Znalazłem ten wątek, gdy miałem podobne wymaganie, ale uprościłem kod OP w następujący sposób:

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

pracuje dla mnie!

Lub jeśli chciałbyś po prostu wykonać inną funkcję js, zmodyfikowałem Darin's (bardzo):

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

Wszystkie podane tutaj funkcje javascript nie będą działać dla dokumentu xml, który ma nieokreślone białe spacje między znacznikiem końcowym „>” a znacznikiem początkowym „<”. Aby je naprawić, wystarczy zamienić pierwszą linię w funkcjach

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

przez

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

co z utworzeniem węzła pośredniczącego (document.createElement ('div') - lub użycie odpowiednika w bibliotece), wypełnieniem go ciągiem xml (przez innerHTML) i wywołaniem prostej funkcji rekurencyjnej dla elementu głównego / lub elementu pośredniczącego na wypadek, gdybyś nie mieć korzenia. Funkcja wywołałaby samą siebie dla wszystkich węzłów potomnych.

Następnie możesz po drodze wyróżnić składnię, upewnić się, że znaczniki są dobrze sformułowane (robione automatycznie przez przeglądarkę podczas dołączania przez innerHTML) itd. Nie byłoby to dużo kodu i prawdopodobnie wystarczająco szybkie.

Jeśli szukasz rozwiązania JavaScript, po prostu pobierz kod z narzędzia Pretty Diff pod adresem http://prettydiff.com/?m=beautify

Możesz również wysłać pliki do narzędzia za pomocą parametru s, na przykład: 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 formatuje XML, obsługuje wcięcia atrybutów, a także wyróżnia składnię dla XML i wszelkich osadzonych wyrażeń XPath:

XMLSpectrum to projekt open source, zakodowany w XSLT 2.0 - możesz więc uruchomić tę stronę serwera z procesorem, takim jak Saxon-HE (zalecane) lub po stronie klienta, używając Saxon-CE.

XMLSpectrum nie jest jeszcze zoptymalizowany do działania w przeglądarce - stąd zalecenie uruchamiania po stronie serwera.

Użyj powyższej metody, aby uzyskać ładny wydruk, a następnie dodaj ją do dowolnego elementu div za pomocą metody jquery text () . na przykład id div jest xmldivwtedy używany:

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

tutaj jest kolejna funkcja do formatowania 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;
}

Możesz uzyskać ładnie sformatowany plik XML za pomocą xml-beautify

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

indent : wzór wcięcia, taki jak białe spacje

useSelfClosingElement : true => użyj elementu samozamykającego, gdy element jest pusty.

JSFiddle

Oryginał (przed)

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

Upiększony (po)

<?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');

Biblioteka XML-to-json ma metodę formatXml(xml).Jestem opiekunem projektu.

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

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