HTML清理器：在线去除属性、脚本和杂乱内容
粘贴混乱的HTML，获取干净的无属性骨架及结构JSON概要，可移除脚本、样式、注释、SVG、表单和任意自定义选择器。
完全使用浏览器原生HTML解析器运行，不会上传任何内容。适用于内容提取、抓取流程、CMS迁移以及准备输入给LLM的HTML。
HTML清理器：在线去除属性、脚本和杂乱内容
粘贴混乱的HTML，获取干净的无属性骨架及结构JSON概要，可移除脚本、样式、注释、SVG、表单和任意自定义选择器。
关于HTML清理器
从真实网站复制的HTML往往带有大量负担：框架类名堆积、内联样式、data-*属性、跟踪脚本、SVG图标、注释标记，以及层层只为单一用途的包装div。当你真正需要的是内容结构——用于抓取流程、CMS迁移、差异比较，或在交给语言模型前精简页面——这些内容都是隐藏重点并浪费令牌的噪音。
此工具使用浏览器自己的解析器（DOMParser）解析HTML，然后执行可配置的清理流程：移除所有属性（可选择保留链接上的href以保留链接图）；删除script、style、注释、SVG和表单节点；移除匹配自定义CSS选择器的元素（每行一个选择器，适合导航栏或Cookie横幅等网站特有界面）；清理剩余的空标签；还可移除只包含一个子元素且自身没有文本的包装器，折叠div嵌套。
工具会并排生成两种输出：清理后的HTML，以及剩余结构的JSON概要（tag、text、children、href），便于程序处理。大小徽章会显示结果缩小了多少——在典型现代页面中，清理后的骨架通常比输入小80-95%。所有操作都在浏览器标签页本地完成，HTML不会离开你的设备。
HTML清理示例
各个选项对代码片段的作用。
| 输入 | 输出 | 说明 |
|---|---|---|
| ⟨div class="a b c" data-x="1"⟩⟨p style="color:red"⟩Hi⟨/p⟩⟨/div⟩ | ⟨div⟩⟨p⟩Hi⟨/p⟩⟨/div⟩ | 移除所有属性；保留结构和文本。 |
| ⟨p⟩Text⟨script⟩evil()⟨/script⟩⟨/p⟩ | ⟨p⟩Text⟨/p⟩ | 完全移除script标签。 |
| ⟨a class="btn" href="/docs"⟩Docs⟨/a⟩ | ⟨a href="/docs"⟩Docs⟨/a⟩ | 开启“保留href”后，链接仍可使用。 |
| ⟨div⟩⟨div⟩⟨p⟩Deep⟨/p⟩⟨/div⟩⟨/div⟩ | ⟨p⟩Deep⟨/p⟩ | “提升单子元素包装器”会折叠纯嵌套。 |
HTML清理器使用方法
- 将HTML粘贴到输入框中。
- 勾选需要的清理选项；对于导航栏或广告区块等元素，可添加网站专用CSS选择器（每行一个）。
- 点击“清理HTML”。
- 复制清理后的HTML；如果要用程序处理，也可以复制JSON结构。
- 大小徽章会告诉你移除了多少杂乱内容。
HTML清理器常见问题
我的HTML会上传到服务器吗？
不会。解析和清理完全在浏览器中使用原生DOMParser运行。页面加载后即可离线使用。
自定义选择器有什么作用？
匹配任一CSS选择器的元素（每行一个）会在清理前被移除，例如“nav”、“#sidebar”或“div[class*=ads]”。无效选择器会被跳过。
JSON输出有什么用途？
它是清理后结构的概要——由包含tag、text、children及可选href的对象组成。适合抓取器、测试，或无需重新解析HTML就将结构化内容交给程序。
“提升单子元素包装器”是什么意思？
如果一个元素恰好包含一个子元素且自身没有文本，包装器会被移除，由子元素取代。递归应用后，它会折叠现代网站常见的深层div嵌套。
为什么要在发送给LLM前清理HTML？
类名、内联样式和脚本会消耗令牌，却没有增加意义。清理后的骨架通常小80-95%，既能降低成本，也能为模型保留更多空间处理内容本身。
图片和换行会保留吗？
“移除空标签”流程会明确保留br和img元素，即使它们没有子元素，因为它们本身就承载意义。