如何使用 jQuery 清理嵌套的标签-html教程-PHP中文网

如何使用 jQuery 清理嵌套的 <mark> 标签标签 " />

本文介绍如何通过 jQuery 高效识别并移除 HTML 中非法嵌套的标签（如文本），保留最外层有效标记，确保语义正确且 DOM 结构纯净。

本文介绍如何通过 jquery 高效识别并移除 html 中非法嵌套的 `` 标签（如 `文本`），保留最外层有效标记，确保语义正确且 dom 结构纯净。

在富文本编辑或动态内容渲染场景中，常因多次高亮操作导致标签意外嵌套，例如：

<p>这是<mark><mark>重点</mark></mark>内容。</p>

这种结构不仅违反 HTML 语义规范（是行内短语元素，不应包裹同类元素），还可能干扰样式继承、无障碍访问（如屏幕阅读器行为异常）及后续 DOM 操作。

jQuery 提供了简洁可靠的解决方案：遍历所有元素，对每个元素检查其内部是否还包含子节点；若存在，则将其子的内容“提升”至父中，并移除冗余标签。以下是推荐实现：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(function() {
  $('mark').each(function() {
    const $this = $(this);
    const $innerMarks = $this.find('mark');

    if ($innerMarks.length > 0) {
      // 将所有内部 mark 的内容（含文本和子节点）移动到当前 mark 内部末尾
      $innerMarks.contents().appendTo($this);
      // 移除所有嵌套的 mark 标签（保留其内容）
      $innerMarks.remove();
    }
  });
});

✅ 该方案优势显著：

✅ 真正“扁平化”嵌套结构，而非简单删除子标签（避免内容丢失）；
✅ 支持多层嵌套（如文本一次性清理）；
✅ 兼容含混合内容的（如前中后 → 前中后）；
✅ 不依赖 CSS，适用于需严格控制 DOM 结构的场景（如 SSR、内容提取、SEO 优化）。

⚠️ 注意事项：

若项目已广泛使用 display: contents（如答案中建议的 CSS 方案），请注意：该方式仅视觉上“隐藏”嵌套标签，DOM 结构依然存在，无法解决语义污染或数据清洗需求；
避免在 $(document).ready() 中重复执行此逻辑，防止多次运行引发内容重复追加；
对性能敏感的大文档，可考虑使用原生 querySelectorAll('mark mark') 配合 Element.replaceWith(...) 进一步优化。

最终目标不是“删掉多余标签”，而是还原语义清晰、结构合规的高亮标记——一个，一段意义明确的强调内容。