标签
" />
本文介绍如何使用 jQuery 遍历并规范化 DOM 中多重嵌套的 标签，确保每个被高亮文本仅被一层 包裹，避免语义冗余与渲染异常。
本文介绍如何使用 jquery 遍历并规范化 dom 中多重嵌套的 `` 标签，确保每个被高亮文本仅被一层 `` 包裹，避免语义冗余与渲染异常。
在实际网页开发中，动态内容生成或富文本编辑器处理不当，可能导致 标签意外嵌套，例如 MyWord。这种结构不仅违反 HTML 语义规范（ 是内联短语元素，不应自我嵌套），还可能干扰样式继承、无障碍访问（如屏幕阅读器行为）及后续 DOM 操作。
原代码试图通过 $(this).next().is('mark') 判断相邻兄弟节点是否为 并移除，但该逻辑存在根本性缺陷：它只检查后继兄弟元素，而嵌套发生在父子关系中（即子 是父 的直接子节点），因此无法捕获真正的嵌套结构。
✅ 正确解法是自底向上遍历所有 元素，移除其内部所有子 ，再展开（unwrap）被包裹的文本内容。推荐使用以下健壮方案：
$(document).ready(function() {
// 从最深层的 <mark> 开始处理（确保先清理子节点）
$('mark').addBack().find('mark').addBack().filter('mark').each(function() {
// 将当前 <mark> 的所有子 <mark> 替换为其内容（即“展平”）
$(this).children('mark').contents().unwrap();
});
// 可选：进一步合并相邻的 <mark>（如 <mark>A</mark><mark>B</mark> → <mark>AB</mark>）
$('mark').each(function() {
const $this = $(this);
let next = $this.next('mark');
while (next.length) {
$this.append(next.contents());
next.remove();
next = $this.next('mark');
}
});
});</mark></mark></mark></mark>
? 关键说明：
- $(this).children('mark').contents().unwrap() 是核心操作：它选取当前 内所有直接子 ，提取其内部文本/节点（.contents()），然后移除这些子 标签本身（.unwrap()），使内容回归到父 中；
- .addBack().find('mark').addBack().filter('mark') 确保即使原始选择器未命中某些嵌套层级，也能覆盖全部 （更稳妥写法可简化为 $('body').find('mark').addBack('mark')）；
- 后续的相邻合并逻辑可选，用于优化连续高亮场景，提升语义简洁性。
⚠️ 注意事项：
- 避免使用 display: contents 作为替代方案（如答案中所提）——它仅隐藏视觉嵌套效果，不修复 DOM 结构，仍会导致语义错误、SEO 不友好、JavaScript 查询失真等问题；
- 若页面含大量 ，建议在 document.ready 中延迟执行或使用 requestIdleCallback 优化性能；
- 生产环境建议配合 MutationObserver 监听动态插入的 ，实现持续净化。
最终目标不是“删除多余标签”，而是构建语义正确、结构扁平、易于维护的高亮标记体系。一次精准的 unwrap() 调用，远胜于复杂的状态判断与递归移除。
