我有一个字符串,它表示我想要 pretty-print 的非缩进 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 框架和/或插件。我唯一的要求是在客户端完成此操作。
最佳答案
这可以使用 native JavaScript 工具来完成,无需第 3 方库,扩展了 @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>
注意,正如 @jat255 所指出的,使用 <xsl:output indent="yes"/>
进行 pretty-print 火狐浏览器不支持。它似乎只适用于 chrome、opera 以及可能其他基于 webkit 的浏览器。
关于javascript - 使用 javascript 漂亮地打印 XML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48272900/