如何使用JavaScript将HTML子串包裹到指定标签中？

确实，用innerHTML来做这种文本包裹的问题太多了——不仅会把现有元素的事件监听、自定义属性全搞丢，还很容易误匹配到元素属性里的文本（比如title里的内容）。我之前也踩过这个坑，后来改用直接操作文本节点的方法就顺畅多了，给你分享下具体实现思路和代码：

绕开innerHTML的关键是只遍历DOM树里的纯文本节点（nodeType === 3），完全避开元素属性的干扰。所有操作都是基于现有DOM节点的修改，不会重新渲染元素，自然也不会丢失原有的元素引用。

1. 递归遍历目标元素的所有子节点，筛选出文本节点
2. 对每个文本节点，检查其textContent是否包含要匹配的内容
3. 如果匹配到，将文本节点拆分为「匹配前文本」「匹配文本」「匹配后文本」三个部分
4. 创建你需要的包裹元素，把匹配的文本塞进这个元素里
5. 用拆分后的内容替换原文本节点，循环处理多个匹配项

function wrapTextInElement(targetElement, searchText, wrapElement) {
  // 递归遍历节点的内部函数
  function traverseNodes(node) {
    // 处理纯文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      let text = node.textContent;
      let index = text.indexOf(searchText);
      
      // 循环处理当前文本里的所有匹配项
      while (index !== -1) {
        // 拆分文本内容
        const beforeText = text.slice(0, index);
        const matchText = text.slice(index, index + searchText.length);
        const afterText = text.slice(index + searchText.length);
        
        // 创建新的文本节点和包裹元素
        const beforeNode = document.createTextNode(beforeText);
        const matchNode = document.createTextNode(matchText);
        const wrappedElement = wrapElement.cloneNode(false); // 克隆传入的包裹模板（不带子节点）
        wrappedElement.appendChild(matchNode);
        
        // 替换原文本节点
        node.parentNode.insertBefore(beforeNode, node);
        node.parentNode.insertBefore(wrappedElement, node);
        node.textContent = afterText;
        
        // 更新文本内容和索引，继续查找剩余匹配
        text = afterText;
        index = text.indexOf(searchText);
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 跳过不需要处理的元素（比如script、style），可根据需求调整
      if (!['SCRIPT', 'STYLE'].includes(node.tagName)) {
        // 递归遍历子元素
        for (let i = 0; i < node.childNodes.length; i++) {
          traverseNodes(node.childNodes[i]);
        }
      }
    }
  }
  
  // 启动遍历
  traverseNodes(targetElement);
}

// 使用示例：把id为content的元素里的"JavaScript"文本包裹到高亮span中
const highlightSpan = document.createElement('span');
highlightSpan.classList.add('text-highlight');
wrapTextInElement(document.getElementById('content'), 'JavaScript', highlightSpan);

• 避免误匹配：只处理纯文本内容，完全不会碰元素的title、alt等属性
• 保留元素引用：所有操作都是修改现有DOM节点，不会重新生成元素，原有的事件监听、自定义属性全部保留
• 支持嵌套元素：递归遍历能覆盖所有层级的文本节点，不管元素嵌套多深都能处理

• 支持大小写不敏感匹配：可以把文本和搜索词都转成小写判断索引，同时保留原文本的大小写
• 支持正则表达式匹配：把searchText改成正则，用exec循环匹配，处理更复杂的规则（比如模糊匹配、全局匹配）
• 处理重叠匹配：比如搜索"aaa"、文本是"aaaa"时，可根据需求决定匹配逻辑

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