HTML 清理工具_在线清理HTML代码保留格式

📖 技术说明：富文本复制原理

从网页复制内容，粘贴到富文本编辑器的实现原理

1️⃣ 两种粘贴方式的区别

A) 粘贴 HTML 代码（纯文本方式）
• 方法：navigator.clipboard.writeText(htmlString)
• 剪贴板内容：纯文本格式的 HTML 标签字符串
• 粘贴效果：显示源代码，如 <h2>标题</h2>
• 适用场景：代码编辑器、需要查看 HTML 结构

B) 粘贴渲染后的样式内容（富文本方式）✅ 本工具使用
• 方法：Selection + Range + document.execCommand('copy')
• 剪贴板内容：多种 MIME 类型数据
- text/html: 渲染后的 HTML 结构
- text/plain: 纯文本内容
• 粘贴效果：显示格式化后的标题、加粗等效果
• 适用场景：微信公众号、知乎、博客、Word 等富文本编辑器

2️⃣ 富文本复制的 7 个步骤

创建选区对象
const selection = window.getSelection();
获取当前页面的 Selection 对象，代表用户选择的文本范围
创建范围对象
const range = document.createRange();
Range 对象表示文档中的一个连续范围
设置范围为预览区域的内容
range.selectNodeContents(preview);
将范围设置为 preview 元素的所有子节点，相当于用鼠标选中了整个预览区域
清除之前的选区
selection.removeAllRanges();
确保没有其他选区干扰
添加新的选区
selection.addRange(range);
将我们创建的范围添加到选区中，此时页面上会看到预览区域被选中（高亮显示）
执行复制命令 ⭐ 关键步骤
document.execCommand('copy');
浏览器会将选中的内容复制到剪贴板，自动处理多种格式：
  - 提取 HTML 结构（保留标签和属性）
  - 提取纯文本（去掉所有标签）
  - 可能还包括 RTF 等其他格式
这些不同格式的数据会同时存入剪贴板
清除选区
selection.removeAllRanges();
移除高亮显示，恢复页面正常状态

3️⃣ 为什么这种方式能实现富文本复制？

• 浏览器的 execCommand('copy') 会智能检测选中内容的类型
• 对于 DOM 元素，它会：
- 序列化 HTML 结构到 text/html MIME 类型
- 提取文本内容到 text/plain MIME 类型
• 目标应用（如微信公众号编辑器）会根据自身能力选择最合适的格式
• 富文本编辑器优先使用 text/html 格式，从而保留格式
• 纯文本编辑器只能使用 text/plain 格式

4️⃣ 三种方式对比

方式	格式	效果	评价
`writeText()`	仅 text/plain	显示源代码	❌ 不适合
ClipboardItem	可指定多格式	需手动构造	⚠️ 复杂
Selection + execCommand	浏览器自动处理	所见即所得	✅ 最佳方案

5️⃣ 实际应用示例

用户在网页上复制带格式的文字：
1. 选中标题（<h2>）、加粗文字（<strong>）等
2. 按 Ctrl+C 或右键复制
3. 浏览器内部就是使用类似上述的方法
4. 粘贴到 Word、微信公众号、知乎等地方时，格式完美保留

本工具模拟了这个过程：
• 自动选中预览区域
• 调用浏览器的复制功能
• 达到和用户手动选中复制完全相同的效果
• 点击"📋 复制结果"按钮即可一键完成！