4

在 JavaScript 中漂亮打印 xml 的最佳方法是什么?我通过 ajax 调用获取 xml 内容,在 textarea 中显示此请求之前,我想对其进行格式化,使其看起来不错:)

4

6 回答 6

6

看看vkBeautify.js插件

http://www.eslinstructor.net/vkbeautify/

这正是您所需要的。它是用纯 javascript 编写的,小于 1.5K 并且速度非常快:不到 5 毫秒。处理 50K XML 文本。

于 2012-01-19T06:33:55.387 回答
5

这不考虑任何缩进,但有助于对 XML 进行编码以在<pre>or<textarea>标记中使用:

/* hack to encode HTML entities */
var d = document.createElement('div'); 
var t = document.createTextNode(myXml); 
d.appendChild(t);
document.write('<pre>' + d.innerHTML + '</pre>');

如果<textarea>您希望突出显示而不是 ,并且节点是可折叠/可展开的,请参阅在超级用户的 Chrome 浏览器中显示 XML 。

于 2009-07-27T11:34:45.243 回答
3

我同意 Arjan 关于使用<pre>标签的观点。在大约 2 天前尝试之前,我试图在我的 html 输出中破译“丑陋”的 xml 代码。让生活更轻松,让你保持清醒。

于 2009-07-27T22:42:43.903 回答
3

这是一个小型的自包含美化器,适用于大多数情况,可以很好地缩进长行,并在需要时对输出进行着色。

function formatXml(xml,colorize,indent) { 
  function esc(s){return s.replace(/[-\/&<> ]/g,function(c){         // Escape special chars
    return c==' '?'&nbsp;':'&#'+c.charCodeAt(0)+';';});}            
  var sm='<div class="xmt">',se='<div class="xel">',sd='<div class="xdt">',
      sa='<div class="xat">',tb='<div class="xtb">',tc='<div class="xtc">',
      ind=indent||'  ',sz='</div>',tz='</div>',re='',is='',ib,ob,at,i;
  if (!colorize) sm=se=sd=sa=sz='';   
  xml.match(/(?<=<).*(?=>)|$/s)[0].split(/>\s*</).forEach(function(nd){
    ob=('<'+nd+'>').match(/^(<[!?\/]?)(.*?)([?\/]?>)$/s);             // Split outer brackets
    ib=ob[2].match(/^(.*?)>(.*)<\/(.*)$/s)||['',ob[2],''];            // Split inner brackets 
    at=ib[1].match(/^--.*--$|=|('|").*?\1|[^\t\n\f \/>"'=]+/g)||['']; // Split attributes
    if (ob[1]=='</') is=is.substring(ind.length);                     // Decrease indent
    re+=tb+tc+esc(is)+tz+tc+sm+esc(ob[1])+sz+se+esc(at[0])+sz;
    for (i=1;i<at.length;i++) re+=(at[i]=="="?sm+"="+sz+sd+esc(at[++i]):sa+' '+at[i])+sz;
    re+=ib[2]?sm+esc('>')+sz+sd+esc(ib[2])+sz+sm+esc('</')+sz+se+ib[3]+sz:'';
    re+=sm+esc(ob[3])+sz+tz+tz;
    if (ob[1]+ob[3]+ib[2]=='<>') is+=ind;                             // Increase indent
  });
  return re;
}

演示见https://jsfiddle.net/dkb0La16/

于 2021-04-12T10:04:20.787 回答
1

使用 prettydiff.com/markup_beauty.js。这能够支持无效标记、片段和 JSTL 代码。

<c:out value="<strong>text</strong>"/>

您可以使用prettydiff.com上的 Web 工具演示该应用程序。只需选择“美化”和“标记”选项。

使用适当的工具来美化 XML 并且不要随意操之过急,这一点很重要。否则,您将在它们不打算的地方添加空白标记,并在它们打算的地方删除它们。对于原始数据,这可能是重要的,但对于人类可消费的内容,这会破坏代码的完整性,尤其是在递归方面。

于 2010-12-15T21:29:31.630 回答
1

这不是最好的方法,但是您可以将 xml 作为文本并使用 RegExp 根据节点和断线的深度来查找和替换“>”,但我不太了解 RegExp,抱歉.

您还可以使用 XSLT 并使用 javascript 对其进行转换。
检查此链接并查看本教程

于 2009-07-27T10:55:34.997 回答