HTML怎么做XML格式化工具_HTML XML在线格式化工具【零基础】-html教程-PHP中文网

html本身不能直接格式化xml，真正起作用的是javascript（如domparser+递归缩进）或服务端脚本；innerhtml/pre标签不可行，因会触发html解析器导致标签丢失或结构篡改。

html怎么做xml格式化工具_html xml在线格式化工具【零基础】

HTML 本身不能直接做 XML 格式化工具——它只是标记语言，不带解析或缩进逻辑。真正在后台干活的是 JavaScript（比如 DOMParser + XMLSerializer）或服务端脚本（如 Node.js 的 xml2js、Python 的 xml.etree.ElementTree）。所谓“HTML 做的 XML 格式化工具”，其实是用 HTML 搭界面，靠 JS 处理核心逻辑。

为什么不能只靠 `innerHTML` 或 `pre` 标签格式化 XML

很多人试过把 XML 字符串塞进 <pre class="brush:php;toolbar:false;"></pre> 里，发现换行缩进全没了，或者标签被浏览器当成 HTML 解析报错（比如 <user></user> 被吃掉）。根本原因是：

innerHTML 会触发 HTML 解析器，不是 XML 解析器，遇到未声明的标签直接丢弃或修复
原始字符串里的 <code>> 如果没转义，会被当作标签边界处理
没有 DOM 树重建过程，就无法按层级自动缩进

真正可用的前端 XML 格式化最小实现（含错误捕获）

以下代码片段可直接粘贴进 <script></script> 运行，它用原生 API 做三件事：校验语法 → 构建 DOM → 序列化为缩进格式。

function formatXML(xmlStr) {
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString(xmlStr, 'application/xml');
    const errorNode = doc.querySelector('parsererror');
    if (errorNode) throw new Error(errorNode.textContent);

    const serializer = new XMLSerializer();
    let formatted = '';
    const recurse = (node, indent = 0) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const spaces = '  '.repeat(indent);
        formatted += `${spaces}\n';
        } else {
          formatted += '>\n';
          for (let child of node.childNodes) {
            if (child.nodeType === Node.ELEMENT_NODE) {
              recurse(child, indent + 1);
            } else if (child.nodeType === Node.TEXT_NODE && child.textContent.trim()) {
              formatted += `${spaces}  ${child.textContent.trim()}\n`;
            }
          }
          formatted += `${spaces}${node.tagName}>\n`;
        }
      }
    };
    recurse(doc.documentElement);
    return formatted;
  } catch (e) {
    return `XML Error: ${e.message}`;
  }
}

注意几个硬性限制：