如何在JavaScript中漂亮地打印XML？

Question

在JavaScript中以最佳方式漂亮地打印XML，你需要通过ajax调用获取XML内容，并且在将其显示在文本区域之前，您需要对其进行格式化，使其更容易阅读。

- mgamer

---

让XML看起来好看简直就像是一种魔法技巧！ - Josh Stodola

在我看来，关于这个问题的规范SO线程是使用JavaScript美化XML。 - Martin

Answer 1

这个功能并不考虑缩进，但能帮助编码XML供在<pre>或<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>，请参见Super User上的在Chrome浏览器中显示XML。

- Arjan

Answer 2

请看vkBeautify.js插件。

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

这正是您需要的。它用普通JavaScript编写，压缩后不到1.5K，并且非常快速：处理50K XML文本只需不到5毫秒。

- vadimk

---

你应该将这个作为一个正式的模块发布到npm上 - 我很想使用它。 - Tim

它在npm上：https://github.com/vkiryukhin/pretty-data；请查看文档http://www.eslinstructor.net/pretty-data/。 - vadimk

这个支持标签页吗？ - ColacX

抱歉，我不确定我理解了这个问题，请您能否澄清一下？ - vadimk

Answer 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/

- HuepfelGnuepfel

---

很好。为什么你在使用id=而不是class=? 这段代码会产生多个具有相同id的元素。 - Trade-Ideas Philip

感谢您的反馈。在最初的发布中，代码/链接完全混乱了。已经修复。 - HuepfelGnuepfel

我还添加了"s"标志。我的一些XML文件包含换行符。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll - Trade-Ideas Philip

有点困惑..你在代码中加了标志在哪里？ - HuepfelGnuepfel

我在所有三个match()正则表达式的末尾添加了一个"s"。（不是split()或replace()。）也许可以更快，但我没有尝试所有组合。这很容易测试。在文件中的每个“>”后添加一个换行符。 - Trade-Ideas Philip

已理解并发现了另一个关于前导/尾随空格的错误。现在应该可以工作了。 - HuepfelGnuepfel

Answer 4

我同意Arjan的观点，应该使用<pre>标签。在两天前，我尝试在我的html输出中解密“丑陋”的xml代码，然后才尝试了这个方法。这让生活变得更加容易，也保持了你的理智。

- Allen Liu

---

嗯，我不确定即使它是一条评论，我们是否不能没有这个答案，但是...现在删除它可能会清除赞数，所以等到你至少有60声望再删除吧。 :-) - Arjan

现在已经过去了几年，我想删除这个应该是必要的;-)（考虑到它的年龄，如果我理解正确的话，您将保持声誉。） - Arjan

Answer 5

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

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

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

重要的是您使用适当的工具来美化您的XML，而不是随意地匆忙完成工作。否则，您将在不打算添加它们的位置添加空格标记，并在打算添加它们的位置删除它们。对于原始数据，这可能是有影响的，但对于人类可消费的内容，这会破坏您的代码完整性，特别是涉及递归的部分。

- austincheney

Answer 6

这不是最好的方法，但您可以将xml作为文本获取并使用RegExp查找和替换“>”，根据节点深度和换行符进行缩进，但我不太了解RegExp，抱歉。

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

- the_drow