怎么把打包后的HTML格式化？代码反编译排版-html教程-PHP中文网

应使用 domparser + 递归遍历格式化压缩 html：先用 'text/html' 解析获取 doc.body，再按 pre/script/style 原样输出、块级缩进、内联连写、自闭合标签特殊处理，确保安全可读。

怎么把打包后的html格式化？代码反编译排版

打包后的 HTML 通常被压缩成单行、无缩进、属性挤在一起的格式，直接阅读和调试困难。它不是“加密”，也不是真正意义上的“反编译”——你不需要还原源码逻辑，只需要把已有的 HTML 字符串重新解析 + 格式化为可读结构。

为什么不能直接用正则或字符串替换格式化

因为压缩后的 HTML 很可能包含嵌套不闭合、自定义标签、模板语法（如 {{item.name}}）、<script></script> 中的 JS 字符串、<pre class="brush:php;toolbar:false;"></pre> 里的原始换行等。正则一通乱换，轻则缩进错乱，重则破坏内容甚至引入 XSS 风险。

浏览器原生的 DOMParser 能自动修复残缺结构（比如补），而正则做不到
<pre class="brush:php;toolbar:false;"></pre>、<script></script>、<style></style> 必须原样保留，不能递归缩进
自定义属性（如 data-v-123、v-if）和框架指令不能被误删或转义

用 DOMParser + 递归遍历是最稳的路径

核心就是两步：解析成 DOM → 按节点类型分策略拼接带缩进的字符串。所有现代浏览器都支持，Node.js 里可用 jsdom 或 cheerio 模拟。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

必须用 'text/html' 作为 MIME 类型：parser.parseFromString(htmlStr, 'text/html')；用 'application/xml' 会报错或丢属性
取 doc.body 内容开始遍历，忽略 head 里可能混入的脚本逻辑干扰
对 Element 节点判断 node.tagName：是 'PRE' / 'SCRIPT' / 'STYLE' 就直接 node.innerHTML 原样返回
块级元素（div、p、section 等）每个子节点前加缩进；内联元素（span、a）保持与父文本连写，不强制换行
自闭合标签（img、input）结尾不加 />，除非你明确要输出 XHTML 风格

在线工具能用，但要注意输入来源

像 freeformatter.com 或 beautifier.io 这类工具底层也是 DOMParser，适合临时粘贴调试。但注意：

不要往里面扔含敏感数据的打包 HTML（比如带 token 的登录页），它们虽宣称“不上传”，但网络请求仍可能被拦截
如果 HTML 里有 __webpack_require__ 或 eval( 这类运行时代码，工具可能解析失败或卡死
某些工具默认把所有属性转小写、加双引号——这在 Vue/React 项目里可能影响 v-bind: 或 data-* 行为，需关掉对应选项

VS Code 里快速格式化打包 HTML 文件

如果你本地有打包后的 index.html，不用复制粘贴，在编辑器里直接操作：

确保已安装 Prettier 插件，并在设置中把 html 关联到它："files.associations": {"*.html": "html"}，且 "prettier.parser": "html"
右键文件 → “格式化文档”，或按 Shift+Alt+F（Windows）/Shift+Option+F（Mac）
如果格式化后 <script></script> 里的 JS 还是单行，说明 Prettier 没识别到内嵌语言——需要额外配置 prettier.embeddedLanguageFormatting 为 auto
若格式化结果出现多余空行或错位，大概率是原始 HTML 里混了 U+200B（零宽空格）或 BOM 头，先用编辑器“显示不可见字符”功能查一遍