在线html格式化必须基于domparser+text/html解析,而非正则;需原样保留//内容,区分块级与内联元素缩进逻辑,并自动补全残缺结构。

在线一键HTML格式化完全可行,但必须避开正则替换类工具——它们会破坏 <pre class="brush:php;toolbar:false;"></pre>、<script></script> 里的原始换行和缩进,甚至误改模板语法(如 {{ variable }})。
为什么不能用正则“简单加空格”
很多轻量级在线工具号称“秒格式化”,底层用正则匹配标签,结果:
• <pre class="brush:php;toolbar:false;">console.log("a\nb");</pre> 里的 \n 被删掉或转义
• <script>const html = "<div>test";</script> 中的字符串被错误拆解
• Vue/JSX 模板中的 v-if、{% if %} 等被当普通标签处理
• 自闭合标签如 <img> 在 HTML5 下不该强制加 /,但正则无法判断上下文
真正安全的在线格式化工具长什么样
靠谱的在线工具必须基于浏览器原生解析能力,即使用 DOMParser + text/html MIME 类型重建 DOM 树,再递归遍历输出。这类工具会:
• 对 <pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style> 节点跳过递归,原样保留 innerHTML
• 区分块级元素(<div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>)和内联元素(<span></span>、@#@#@#@#@#@#@#@#@#@0 —— 默认启用 <code>text/html 解析,支持设置缩进空格数
• https://www.php.cn/link/1975727c448e45ab391dcef95c06b788 —— 底层调用 Prettier 浏览器版,对现代 HTML+模板语法兼容性好
• https://www.php.cn/link/6e283ace2b5701cca6df1baf865dc407 —— 提供“Preserve <pre class="brush:php;toolbar:false;"></pre> content”开关,建议手动打开
格式化后务必检查这三处
即使用了正确工具,人工核对仍不可少:
• 打开开发者工具,把格式化后的代码 document.write() 或插入 iframe,确认渲染无错位
• 搜索页面中是否意外多出空格或换行(尤其在 <button>点击</button> 这类内联上下文中)
• 检查 <script></script> 块内是否有 JS 语法报错(格式化器若错误重写了引号或括号位置,会直接导致运行失败)
真正麻烦的从来不是“怎么缩进”,而是“缩进时别动不该动的地方”。DOMParser 是目前唯一能兼顾结构还原与内容保护的方案,其他都是妥协。










