富文本中出现嵌套<p>标签是编辑器自动补全逻辑与HTML规范冲突所致，如回车时错误将新光标留在原<p>内，导致<p><p>内容</p></p>；浏览器解析时强制闭合外层<p>，形成空段落+新段落的污染DOM，而编辑器视图仍显示正常，掩盖问题。
为什么富文本里会冒出嵌套的 <p> 标签
不是你手写错了，而是富文本编辑器（比如 TinyMCE、CKEditor、Quill）在粘贴、回车、格式化或插入内容时，自动补全逻辑与 HTML 规范冲突导致的。典型场景是：用户在段落末尾按回车，编辑器本应新建一个 <p>，但它错误地把新光标留在原 <p> 内部，再插入内容就变成 <p><p>内容</p></p>。浏览器解析时会强制闭合外层 <p>，但 DOM 已被污染——真实结构变成空 <p></p> + 新 <p>，而编辑器视图仍显示“正常”，掩盖问题。
用正则清理已存在的嵌套 <p>（适用于后端或导出前）
不能无脑替换 <p><p>，因为合法的嵌套（如 <p><em><p> 在某些旧模板中存在）需保留。只处理连续、同级、无属性的 <p> 嵌套：
const cleanNestedP = html => html.replace(/<p>\s*<p>([^<]*)\s*<\/p>\s*<\/p>/gi, '<p>$1</p>');
- 该正则仅匹配最简嵌套：外层
<p>内紧接另一个<p>，中间无其他标签、无属性、无换行干扰 - 若嵌套超过两层（如
<p><p><p>），需递归调用或改用 DOM 解析（见下一条） - 生产环境慎用全局
replace(/<p>/g, ...)，可能误伤<pre><p>或注释里的字符串
用 DOMParser 预处理输入 HTML（推荐用于前端插入前）
比正则更可靠，能真实模拟浏览器解析行为，识别并修复非法嵌套：
function sanitizePHtml(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const ps = doc.querySelectorAll('p p');
ps.forEach(p => {
const parent = p.parentElement;
const fragment = document.createDocumentFragment();
// 把子 p 的所有子节点移到父 p 外部（作为兄弟）
while (p.firstChild) {
fragment.appendChild(p.firstChild);
}
parent.parentNode.insertBefore(fragment, parent.nextSibling);
parent.remove();
});
return doc.body.innerHTML;
}
- 它不依赖缩进或字符串模式，直接操作真实 DOM 结构
- 对
<p><p><strong>x</strong></p></p>这类带内联子元素的也能正确展开 - 注意：
DOMParser不执行脚本、不加载外部资源，安全；但若原始 HTML 含严重语法错误（如未闭合标签），可能解析失败，建议加 try/catch
从源头禁用编辑器的自动 <p> 包裹（TinyMCE/CKEditor 示例）
很多嵌套问题其实在插入那一刻就埋下了。关键不是“修”，而是“不产生”：
立即学习“前端免费学习笔记（深入）”；
- TinyMCE：设
forced_root_block: false，并配合enter_mode: 2（即用<br>换行而非<p>）；若必须用块级，改用<div>作为根容器（forced_root_block: 'div'） - CKEditor 5：禁用
Paragraph插件，改用Heading+BlockQuote等语义块替代纯<p> - 通用原则：关闭“粘贴时自动格式化”和“回车生成新段落”选项，让编辑器少做“自作聪明”的 DOM 修补
真正难缠的是那些已混入 CMS 数据库的嵌套 <p> ——它们不会在编辑器里高亮，却会让 JS 查询返回空节点、CSS 选择器失效、SSR hydration 失败。处理时别只盯源码，务必打开 DevTools 的 Elements 面板，看真实 DOM 树长什么样。
