- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个字符串,它表示我想要 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/
在通过REST Request Body方法发出搜索请求时,例如 GET /bank/_search { "query": { "match_all": {} }, "sort": [
有没有办法检测用户是否停止滑动?也许 bij 鼠标输入检查之类的。我尝试在 onSliderChange 事件中使用鼠标 isButton0Release 和 hasFocus 来检查用户是否停止滑动
(来源:google.com) 最近,我发现我的应用程序中显示的汉字相当难看。 我想我应该让它们“消除锯齿”。但是,我如何在 Java 中做到这一点? 仅供引用,我没有明确选择要在 GUI 应用程序中
我正在创建一个网站,根据某些条件(即是否登录、是否填写表格等),不同页面的外观可能会有很大差异。这使得需要在不同的时间输出不同的html block 。 但是,这样做会使我的 php 代码看起来很糟糕
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
如果我有一个类包含例如几个将用向量填充的槽,那么问题通常会出现。如果我想让这个类的对象或多或少透明,我会为它实现 print-object。在这里我遇到了问题: 如果我在一行中打印所有内容,REPL
我有一个允许上传到我网站的文件扩展名列表。 我用 jQuery Validation plugin 检查它们. 如果他们选择了不受支持的扩展程序,我会显示一条错误消息。 看起来像 var msg =
在一个本身嵌套在一个或多个父数组/结构/union 中的数组/结构/union 中读取多个数字/字符串的最佳方法是什么? 没有临时变量的第一个例子: printf("%d %d\n", a[9][3]
我是 AngularJS 的新手。我目前在为我的观点编写漂亮的 url 时遇到问题。我已经设置了 $locationProvider.html5Mode(true);删除 #从地址栏中显示的网址。但是
我有一个带有 ElasticSearch 的自动完成 jquery 功能。输入第一个字母时出现以下错误。 跨源请求被阻止:同源策略不允许读取 http://localhost:9200/test12/
我是一名优秀的程序员,十分优秀!