如何在HTML标题标签中用span包裹指定单词且保留HTML格式？

嘿，这个问题我太熟了！你原来的代码之所以会把<a>标签弄没，核心原因是用了.text()方法——它会把目标元素里的所有HTML标签都扒得一干二净，只返回纯文本内容。等你再用.html()把替换后的内容塞回去时，原来的<a>标签自然就消失了。

要解决这个问题，我们不能直接操作整个标题的HTML内容，而是要精准定位到包含"fubar"的文本节点，只修改这些文本节点里的内容，这样就能完美保留原有的嵌套元素结构。

方案1：处理标题直接子节点的文本 #

如果你的标题里只有一层嵌套（比如<h1><a>...</a></h1>），用这段代码就足够了：

jQuery('h1, h2, h3, h4, h5, h6').each(function() {
  // 获取当前标题下的所有子节点（包括文本和元素）
  jQuery(this).contents().each(function() {
    // 只处理文本节点（nodeType === 3 代表文本节点）
    if (this.nodeType === 3 && this.nodeValue.includes('fubar')) {
      // 把文本中的"fubar"替换成带span的HTML
      var newHtml = this.nodeValue.replace(/fubar/g, "<span class='myspan'>fubar</span>");
      // 用新的HTML内容替换原来的文本节点
      jQuery(this).replaceWith(newHtml);
    }
  });
});

方案2：处理多层嵌套的文本（更通用） #

如果标题里有多层嵌套元素（比如<h1><div><p><a>...</a></p></div></h1>），可以用递归函数遍历所有后代的文本节点：

// 递归处理元素下的所有文本节点
function wrapFubarInSpan(element) {
  jQuery(element).contents().each(function() {
    // 处理文本节点
    if (this.nodeType === 3 && this.nodeValue.includes('fubar')) {
      var newHtml = this.nodeValue.replace(/fubar/g, "<span class='myspan'>fubar</span>");
      jQuery(this).replaceWith(newHtml);
    } 
    // 如果是元素节点，递归处理它的子节点
    else if (this.nodeType === 1) {
      wrapFubarInSpan(this);
    }
  });
}

// 调用函数处理所有标题标签
jQuery('h1, h2, h3, h4, h5, h6').each(function() {
  wrapFubarInSpan(this);
});

为什么这个方法可行？ #

• 我们直接操作文本节点，只修改包含"fubar"的文本内容，不会触动其他元素节点
• 递归遍历能覆盖所有层级的嵌套元素，不管文本藏得多深都能找到
• 替换后原有的<a>、<div>等标签会完整保留

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