富文本粘贴进contenteditable后p标签嵌套块级元素是浏览器强制修复非法HTML导致的DOM偏移，必须在paste事件中用DOMParser白名单清洗text/html，禁用正则和text/plain回退，清除嵌套p与空p，并通过CI校验拦截。
富文本粘贴进 contenteditable 区域后，p 标签嵌套块级元素（如 div、h2、article）是必然发生的结构污染，不是你写错了，而是浏览器强制“修复”非法 HTML 导致的 DOM 偏移——必须在粘贴时拦截并清洗，不能靠 CSS 或 JS 后期补救。
为什么 paste 事件里拿到的 p 结构已经不可信
富文本编辑器（Word、微信公众号、Notion）导出的 HTML 把 p 当万能容器用：<p><div class="card">...</div></p>。但 W3C 规范规定 p 只能包含 phrasing content，遇到 div 立刻中断当前 p 并移到外层。你看到的源码和真实 DOM 完全不一致。
- DevTools Elements 面板里展开一个
p，子节点突然“弹出来”或缩进变平，说明已被浏览器拆解 -
document.querySelectorAll('p')返回数量比你写的多，大概率是自动补了空p -
p > div选择器永远匹配不到，因为div已不在p内部
用 DOMParser 清洗剪贴板 HTML 的关键步骤
别用正则删标签，也别只取 text/plain —— Safari 和 macOS 复制常丢失换行，Outlook 可能根本不提供纯文本。必须解析 text/html 并白名单过滤。
- 调用
event.clipboardData.getData('text/html')获取原始 HTML 字符串 - 用
new DOMParser().parseFromString(html, 'text/html')得到可遍历的文档片段 - 只保留安全标签：
p、br、strong、em、a（删掉class和style）、img（保留src和alt） - 对每个
p或div[display:block]节点后手动插入\n，防止段落合并 - 最终用
fragment.body.innerHTML提取清洗后的 HTML 插入光标位置
清洗后还要防 p 套 p 和空 p
DOMParser 清洗完，常见残留问题：嵌套 p（<p><p>Hello</p></p>）和空壳 p（<p></p> 或 <p> </p>），它们会撑开间距、破坏 flex 对齐、干扰 SSR hydration。
立即学习“前端免费学习笔记（深入）”；
- 用
doc.querySelectorAll('p p')找嵌套p，逐个用replaceWith(fragment)拆平（不能用appendChild到父节点，会重复插入） - 清空后检查
p的textContent是否为空白或仅含空白字符，是则remove() - 特别注意 CMS 模板引擎可能自动注入的空
p，它们在 DevTools 里显示为灰色文字，但会真实影响布局
构建时和 CI 阶段怎么卡住这类错误
靠人工 review 几乎必漏。团队协作中，“看着整齐就套个 p” 是最隐蔽的结构性隐患，尤其在 SSR 场景下，服务端渲染的 DOM 和客户端 hydration 的结构对不上，直接报错或白屏。
- VS Code 装 HTMLHint 插件，配
.htmlhintrc启用no-inline-element-with-block-content规则 - CI 流程加
tidy -errors或nu-html-checker，它们会明确报出 “Element div not allowed as child of element p” - 如果用 React/Vue，可在组件 mount 后运行
document.querySelectorAll('p').forEach(p => { ... })做运行时校验（仅开发环境）
真正难处理的不是单次清洗逻辑，而是富文本输入源不可控、团队成员对语义 HTML 缺乏共识、以及 SSR 和 CSR 的结构一致性要求——清洗必须发生在粘贴那一刻，而不是等它进了数据库再回头修。
