使用javascript打印XML的漂亮

javascript pretty-print xml xslt

2022-08-30 02:40:24

我有一个字符串，它表示一个非缩进的XML，我想打印它。例如：

<root><node/></root>

应变为：

<root>
  <node/>
</root>

语法突出显示不是必需的。为了解决这个问题，我首先转换 XML 以添加回车符和空格，然后使用 pre 标记输出 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

从问题的文本中，我得到的印象是字符串结果是预期的，而不是HTML格式的结果。

如果是这样，实现此目的的最简单方法是使用标识转换和<xsl：output indent=“yes”/>指令来处理 XML 文档：

<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:copy>
    </xsl:template>
</xsl:stylesheet>

在提供的 XML 文档上应用此转换时：

<root><node/></root>

大多数 XSLT 处理器（.NET XslCompiledTransform，Saxon 6.5.4 和 Saxon 9.0.0.2，AltovaXML）产生所需的结果：

<root>
  <node />
</root>

答案 2

这可以使用原生javascript工具来完成，而无需第三方库，扩展了Novatchev答案@Dimitre：

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

输出：