js格式化xml：让杂乱XML可读的实用技巧

为什么你拿到的XML总是一团乱麻

服务端返回XML时，为了省带宽或图省事，经常把空白字符全删掉，于是整段文档变成连续的一长串。浏览器打开这种响应，默认只显示一行，调试时只能靠搜索标签名来定位。

有人会想：直接加换行不就行了？问题没那么简单。XML里空白字符有时是内容的一部分，比如 <pre> 标签内的文本，或者属性值里的空格。粗暴地按 > 替换成 >\n，可能把原本有意义的空白也改掉。所以格式化的前提是先理解文档结构，而不是做字符串替换。

另一个常见误解是认为格式化会“美化”数据本身。其实它只调整标签之间的缩进和换行，元素顺序、属性值、文本内容都不应该变。如果格式化后解析结果不一样，那说明处理方式有问题。

用DOMParser走一遍结构化的路子

浏览器环境里，最稳妥的起点是 DOMParser。把XML字符串传进去，拿到一个文档对象，再递归遍历节点树，按层级输出缩进。这样做的好处是解析器已经帮你处理了实体引用、命名空间和标签闭合，你只需要关心怎么把树“打印”得好看。

写递归函数时，记得区分节点类型：元素节点要输出开标签和闭标签，文本节点要保留原始内容但去掉首尾多余空白，注释节点和CDATA节也不能丢。遇到自闭合标签（比如 <br/>）就别画蛇添足加闭标签了。

有个细节容易被忽略：DOMParser 解析失败时不会抛异常，而是返回一个包含 parsererror 元素的文档。所以遍历之前最好先检查有没有解析错误，否则格式化出来的东西可能是一段错误信息。

手写序列化时容易踩的坑

不用 DOMParser 而自己用正则或字符串扫描来格式化，也不是不行，但坑更多。比如属性值里出现 > 字符，按 > 切分就会切错；再比如注释里包含 --> 以外的内容，正则很难覆盖所有边界情况。

如果坚持手写，至少要把“标签内”和“标签外”两种状态分开处理，遇到引号就进入属性值状态，直到配对的引号结束。缩进层级可以用一个计数器维护：遇到开标签加一，遇到闭标签减一，遇到自闭合标签不变。文本节点单独成行时，记得根据当前层级补空格。

还有一个现实问题：格式化后的字符串再解析回去，结果应当和原来等价。写完可以拿几个边界样例测一测，比如带CDATA的、带命名空间的、属性值含特殊字符的，确认没有改变语义。

格式化之后，阅读体验差在哪里

缩进有了，不代表就好读。深层嵌套的XML动辄十几层，每层缩进两个空格，右边的内容被推得很远。这时候可以考虑限制单行最大宽度，或者对重复出现的同级元素做折叠展示。

另外，属性很多的长标签即使换行了也显得臃肿。有些编辑器会把属性纵向排列，每个属性占一行，读起来反而清晰。格式化工具不一定要追求“一行一个标签”，按实际内容密度调整策略更实用。

最后别忘了颜色。纯文本缩进只是第一步，给标签名、属性名、属性值、文本内容配上不同颜色，定位结构会快很多。很多在线格式化页面就是靠语法高亮让可读性上了一个台阶。

相关文章

• js格式化字符串：从混乱到清晰的实用技巧

  介绍js格式化字符串的常见场景与处理方法，包括模板字符串、多行文本和占位符替换，帮助开发者写出更清晰的代码。

• js时间格式化转换成时间戳：字符串与毫秒数的互转思路

  讲清日期字符串转时间戳的常见做法、时区与格式陷阱，以及格式化与解析之间的互逆关系。

• js时间戳转换格式化：时区与精度排错手册

  梳理时间戳精度、时区、日期解析与格式输出，提供可复用的 JavaScript 写法和排错思路。

• js时间戳转换成格式化字符串：从困惑到解决的实用思路

  聊聊js时间戳转换成格式化字符串那些事：为什么直接显示时间戳不友好，时区与格式的取舍，以及手写与工具辅助的实用思路。

• js压缩视频文件：浏览器里能做什么

  从编码器选型、内存占用到输出格式，讲清用 JavaScript 在浏览器端压缩视频的可行边界与常见坑。

常见问题