XML格式化需用DOMParser解析并手动缩进拼接字符串，因XMLSerializer默认不保留空白；须转义后在<pre>中安全显示，注意注释、CDATA等边界情况。
HTML 本身不能直接“格式化 XML”，它只是静态标记语言；真正起作用的是 JavaScript 解析 + 字符串重组，再用 <pre> 或 <code> 容器保持缩进。浏览器原生不提供 XML 格化 API，必须手写或借助轻量逻辑。
XML 字符串怎么用 JavaScript 缩进美化
核心是解析字符串为 DOM（用 DOMParser），再递归遍历节点生成带缩进的文本。注意：不能直接用 XMLSerializer，它输出无缩进；也不能依赖外部库（如 highlight.js），那属于高亮，不是格式化。
-
DOMParser必须指定"application/xml"类型，否则对含命名空间或自闭合标签（如<img/>）的 XML 解析失败 - 缩进逻辑要区分元素、文本、注释节点：只对元素节点加换行和空格，文本节点保留原始内容（避免破坏 CDATA 或空白敏感数据）
- 避免用
innerHTML或outerHTML反向生成，它们会自动修正非法结构，导致原始 XML 被篡改
function formatXML(xmlStr) {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
if (doc.querySelector("parsererror")) throw new Error("Invalid XML");
const serializer = new XMLSerializer();
let formatted = "";
let indent = "";
function walk(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
formatted += `\n${indent}<${node.nodeName}`;
for (let attr of node.attributes) {
formatted += ` ${attr.name}="${attr.value}"`;
}
if (node.children.length === 0) {
formatted += "/>";
} else {
formatted += ">";
indent += " ";
for (let child of node.childNodes) walk(child);
indent = indent.slice(2);
formatted += `\n${indent}</${node.nodeName}>`;
}
} else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
formatted += node.textContent;
}
}
walk(doc.documentElement);
return formatted.trim();
} catch (e) {
return xmlStr; // fallback to raw
}
}
为什么 XMLSerializer 输出不带缩进
XMLSerializer 的设计目标是“保真序列化”，不是“可读性优化”。它输出的是规范兼容的最小化 XML，所有空白（包括换行、缩进）都被视为无关字符而丢弃。即使你手动在 DOM 中插入 Text 节点作为缩进，序列化时也会被忽略——因为那是 DOM 构建阶段的副作用，不是节点树的一部分。
- 浏览器不会把“为了显示好看而插入的空白文本节点”当作合法 XML 内容保存
- 如果强行在元素间插入
document.createTextNode("\n ")，XMLSerializer会把它当成真实内容输出，但这样破坏了原始结构语义 - 唯一可控路径：自己控制字符串拼接，不依赖序列化器的默认行为
在 HTML 页面里安全显示格式化后的 XML
直接 innerHTML = formatXML(xml) 有 XSS 风险（比如 XML 里含 <script> 或实体编码绕过）。必须转义尖括号和引号，再用 <pre><code> 包裹。
立即学习“前端免费学习笔记（深入）”；
- 先用正则或
textContent模拟方式转义：xml.replace(/, "<").replace(/>/g, ">") - 不要用
innerText，它会折叠空白，破坏缩进结构 -
<pre>是必需的：只有它能保留换行和空格；<code>单独用没用 - 可加
style="background:#f5f5f5; padding:12px; overflow-x:auto;"提升可读性
最简安全渲染示例：
const rawXML = "<root><item id="1">test</item></root>";
const safeHTML = formatXML(rawXML)
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
document.getElementById("xml-output").innerHTML =
`<pre class='brush:php;toolbar:false;'>${safeHTML}`;
真正的难点不在缩进算法，而在于边界情况：注释节点里的 --、CDATA 段落、处理指令（<?xml ...?>）、命名空间前缀重复声明。这些都会让简单正则替换或朴素 DOM 遍历崩溃。如果 XML 来源不可信或结构复杂，建议优先用成熟解析器（如 fast-xml-parser）而非手写逻辑。
