在线HTML格式化必须基于DOMParser+text/html解析，而非正则；需原样保留<pre>/<script>/<style>内容，区分块级与内联元素缩进逻辑，并自动补全残缺结构。
在线一键HTML格式化完全可行，但必须避开正则替换类工具——它们会破坏 <pre>、<script> 里的原始换行和缩进，甚至误改模板语法（如 {{ variable }}）。
为什么不能用正则“简单加空格”
很多轻量级在线工具号称“秒格式化”，底层用正则匹配标签，结果：
• <pre>console.log("a\nb");</pre> 里的 \n 被删掉或转义
• <script>const html = "<div>test</div>";</script> 中的字符串被错误拆解
• Vue/JSX 模板中的 v-if、{% if %} 等被当普通标签处理
• 自闭合标签如 <img> 在 HTML5 下不该强制加 /，但正则无法判断上下文
真正安全的在线格式化工具长什么样
靠谱的在线工具必须基于浏览器原生解析能力，即使用 DOMParser + text/html MIME 类型重建 DOM 树，再递归遍历输出。这类工具会：
• 对 <pre>、<script>、<style> 节点跳过递归，原样保留 innerHTML
• 区分块级元素（<div>、<p>）和内联元素（<span>、<a>），避免插入破坏布局的换行
• 自动补全残缺结构（如只有 <div> 没有 </div>），这是 DOMParser 的正常行为，不是 bug
• 保留所有自定义属性和大小写（比如 data-MyId 不会变成 data-myid）
推荐几个能直接粘贴就用的在线地址
以下网站经实测（2026年8月）仍稳定使用 DOMParser 方案：
• https://www.php.cn/link/aacfe532ad5037a09894ea841d6ff2ba —— 默认启用 text/html 解析，支持设置缩进空格数
• https://www.php.cn/link/1975727c448e45ab391dcef95c06b788 —— 底层调用 Prettier 浏览器版，对现代 HTML+模板语法兼容性好
• https://www.php.cn/link/6e283ace2b5701cca6df1baf865dc407 —— 提供“Preserve <pre> content”开关，建议手动打开
立即学习“前端免费学习笔记（深入）”；
格式化后务必检查这三处
即使用了正确工具，人工核对仍不可少：
• 打开开发者工具，把格式化后的代码 document.write() 或插入 iframe，确认渲染无错位
• 搜索页面中是否意外多出空格或换行（尤其在 <button>点击</button> 这类内联上下文中）
• 检查 <script> 块内是否有 JS 语法报错（格式化器若错误重写了引号或括号位置，会直接导致运行失败）
真正麻烦的从来不是“怎么缩进”，而是“缩进时别动不该动的地方”。DOMParser 是目前唯一能兼顾结构还原与内容保护的方案，其他都是妥协。
