如何使用jQuery移除嵌套的<mark>标签，实现单层标记效果？

你之前的代码只处理了相邻的兄弟元素，但你的问题是嵌套的子元素，所以无法生效。要移除嵌套的标签，保留单层标记，可以按以下方式处理：

核心思路是：找到所有被包裹的子元素，将它们的内容转移到父中，再删除这些多余的子标签。如果存在多层嵌套（比如<mark><mark><mark>文本</mark></mark></mark>），可以用循环确保所有层级都被处理。

最终代码 #

$(document).ready(function() {
  // 循环处理所有层级的嵌套mark标签
  while ($('mark mark').length > 0) {
    $('mark mark').each(function() {
      // 将子mark的所有内容（文本/子元素）移到父mark里
      $(this).parent().append($(this).contents());
      // 删除当前的子mark标签
      $(this).remove();
    });
  }
});

代码说明 #

• $('mark mark') 精准选中所有嵌套在内部的子元素
• while 循环会反复执行处理逻辑，直到页面中没有嵌套的标签为止，彻底解决多层嵌套的问题
• $(this).contents() 获取子的所有内容（包括文本和其他子元素），避免丢失高亮区域内的其他结构
• 最后删除多余的子标签，只保留最外层的标记

内容的提问来源于stack exchange，提问作者Khan