HTML美化器

用 js-beautify 把压缩成一行的 HTML 重新缩进排版：默认 2 个空格缩进，内层元素也缩进。适合阅读别人压缩过的页面源码、对比两段结构的差异，或者把从浏览器复制出来的 DOM 整理干净再贴进文档。

工具界面在页面加载完成后显示在本段下方，可以直接使用。所有计算都在你的浏览器本地完成，输入的内容不会上传到服务器。

HTML美化器能做什么

输入：

<div><p>hi<span>inline</span></p><pre>a
b</pre></div>

输出：

<div>
  <p>hi<span>inline</span></p><pre>a
b</pre>
</div>

pre 与 span 属于 unformatted 标签，内容保持原样不拆行

code、pre、em、strong、span 这五个标签被写进了 unformatted 列表，它们的内容不会被拆行：所以 <pre> 里的换行原样保留，<span>内联</span> 也不会被撑成多行
它只负责缩进，不做标签闭合校验。少写了一个结束标签照样能给你缩进输出，别拿它当 HTML 检查器用
缩进固定是 2 个空格，页面没有 Tab 或 4 空格的选项，需要 4 空格只能格式化后再批量替换

格式化会改变页面的渲染效果吗？

有可能。HTML 里连续空白会折叠成一个空格，但换行本身会影响行内元素之间的间距；被 unformatted 保护的 pre 内容不受影响，其余结构的换行可能让间距变化。

内联的 CSS 和 JS 会一起美化吗？

不会。它只处理 HTML 标签结构，<style> 和 <script> 里的代码保持原样，需要单独用对应的美化工具。

为什么粘贴进来的是网页的富文本而不是纯文字？

这个输入框开启了 paste-html，从网页里复制内容再粘贴时，取的是剪贴板中的 text/html 分支，这样能拿到带标签的源码。

HTML 内容会上传到服务器吗？

不会。js-beautify 在浏览器里执行，你粘贴的页面源码不会离开本机。