☰

JavaScript で XML をきれいに印刷する 質問する

tag-icon • tag-icon javascript xml xslt pretty-print
JavaScript で XML をきれいに印刷する 質問する

インデントされていない XML を表す文字列があり、それをきれいに印刷したいと考えています。例:

<root><node/></root>

次のように変更します。

<root>
  <node/>
</root>

構文の強調表示は必須ではありません。この問題に対処するために、まずXMLを変換して改行と空白を追加し、次に前タグを使用して XML を出力します。新しい行と空白を追加するには、次の関数を記述しました。

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

次に、次のように関数を呼び出します。

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

これは私にとっては完璧に機能しますが、前の関数を書いているときに、もっと良い方法があるはずだと思いました。そこで質問ですが、XML 文字列を HTML ページにきれいに印刷するもっと良い方法をご存知ですか? この作業を実行できる JavaScript フレームワークやプラグインがあれば歓迎します。私の唯一の要件は、これをクライアント側で実行することです。

ベストアンサー1

これは、ネイティブサードパーティのライブラリを使用しない JavaScript ツールで、@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>'));

出力:

<root>
  <node/>
</root>

JSFiddle

@jat255が指摘したように、<xsl:output indent="yes"/>Firefox ではサポートされていません。Chrome、Opera、およびおそらくその他の Webkit ベースのブラウザでのみ動作するようです。

おすすめ記事