富文本编辑器输出的html污染文档结构是因为粘贴内容携带非语义标签、内联样式、零宽字符及可执行属性，干扰排版、css匹配、文本提取与ssr一致性；应通过paste事件拦截并基于dom解析清洗，而非正则处理。
为什么富文本编辑器输出的 HTML 会污染文档结构
因为编辑器默认把用户粘贴进来的 Word、微信、网页内容原样塞进 DOM，而这些来源的 HTML 带着大量非语义标签（<font></font>、<p></p>）、嵌套 <span></span>、内联 style 属性、零宽字符（\u200b），甚至 onerror 这类可执行属性。它们不参与排版逻辑，却占用 DOM 节点数、干扰 CSS 选择器匹配、让 innerText 提取失真、导致移动端图片溢出、破坏 SSR 渲染一致性。
paste 事件拦截比事后清洗更可靠
浏览器默认粘贴行为一旦触发，就可能执行脚本、插入非法标签、错位光标——等它进 DOM 再用 innerHTML 或正则清洗，已经晚了。真正可控的做法是：
- 监听
paste事件，第一时间调用event.preventDefault() - 用
event.clipboardData.getData('text/html')或'text/plain'读取原始内容 - 用
DOMParser解析成 Document，而非直接字符串操作 - 用
Range+DocumentFragment插入，确保光标位置准确
清洗时该保留什么、删掉什么
不是“删所有标签”，而是按语义分级处理：
- 必须删除：
<script></script>、<style></style>、<iframe></iframe>、<object></object>、含on\w+属性的任意标签 - 建议删除：
<font></font>、<u></u>、<strike></strike>、带style的<span></span>（除非用于语义强调） - 应保留：
<p></p>、<h1></h1>–<h6></h6>、<ul></ul>/<ol></ol>、<li>、<blockquote></blockquote>、<img>（但需清理width/height） - style 属性只留白名单：
text-align、margin（仅上下）、max-width（仅对<img>）
别用正则删 HTML 标签
正则处理 HTML 是危险且不可靠的：
- 匹配
]*>会漏掉注释<!-- ... -->和 CDATA - 无法识别自闭合标签（
<br>vs<br>） - 遇到嵌套或属性含
>（如data-attr="a>b"）直接崩溃 - 删完只剩纯文本，丢失段落、列表、标题等结构信息
真正干净的清洗必须基于 DOM 树遍历，哪怕只是用 DOMParser + querySelectorAll + removeAttribute 组合，也比正则强一个数量级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
