如何为div内指定单词添加带类span标签并保留原有HTML结构

原代码存在的问题 #

• 直接分割innerHTML为空格数组，会破坏原有HTML结构，无法处理带标签包裹的目标单词
• 循环内使用return导致第一次循环就终止，无法遍历处理所有内容
• 未实现忽略<a>、<img>元素的需求
• 未处理已有HTML标签包裹目标单词的场景

修正后的实现代码 #

HTML（保持原有结构）

<div id='haystack' contentEditable='true'>
There is a <strong>needle</strong> in this <a href='#'>haystack</a>
</div>
<button onclick='wrapNeedle()'>
Click
</button>

CSS（保持原有样式）

.needle{color:red}

JavaScript

function wrapNeedle() {
  const targetDiv = document.getElementById('haystack');
  const targetWord = 'needle';
  // 正则匹配完整单词，避免部分匹配（如"needles"不会被误处理）
  const wordRegex = new RegExp(`\\b${targetWord}\\b`, 'gi');

  // 递归处理节点的核心函数
  function processNode(node) {
    // 直接跳过a和img元素
    if (node.tagName === 'A' || node.tagName === 'IMG') {
      return;
    }

    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent;
      if (wordRegex.test(text)) {
        const fragment = document.createDocumentFragment();
        let lastIndex = 0;
        // 分割文本并替换目标单词
        text.replace(wordRegex, (match, index) => {
          // 添加匹配前的普通文本
          if (index > lastIndex) {
            fragment.appendChild(document.createTextNode(text.slice(lastIndex, index)));
          }
          // 创建span包裹目标单词
          const span = document.createElement('span');
          span.className = 'needle';
          span.textContent = match;
          fragment.appendChild(span);
          lastIndex = index + match.length;
        });
        // 添加剩余的普通文本
        if (lastIndex < text.length) {
          fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
        }
        // 替换原文本节点
        node.parentNode.replaceChild(fragment, node);
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 检查当前元素是否完全包裹目标单词（如<strong>needle</strong>）
      if (node.textContent.trim() === targetWord) {
        const span = document.createElement('span');
        span.className = 'needle';
        node.parentNode.replaceChild(span, node);
        span.appendChild(node);
      } else {
        // 递归处理子节点
        Array.from(node.childNodes).forEach(child => processNode(child));
      }
    }
  }

  // 遍历处理目标div的所有子节点
  Array.from(targetDiv.childNodes).forEach(child => processNode(child));
}

代码逻辑说明 #

1. 递归遍历节点：确保处理目标div内所有层级的内容，不遗漏任何文本或元素
2. 忽略指定元素：遇到<a>或<img>标签直接跳过，完全不处理其内部内容
3. 文本节点处理：用正则匹配完整目标单词，拆分文本后给目标单词单独包裹span，保留原有文本结构
4. 已有标签的目标单词处理：检测到元素文本完全等于目标单词时，直接用span包裹该元素，保留原有标签结构
5. 避免误匹配：使用\b正则边界符，确保只匹配独立的目标单词，不会误处理包含该单词的其他词汇

最终效果 #

点击按钮后，目标div的HTML结构会变为：

There is a <span class="needle"><strong>needle</strong></span> in this <a href="#">haystack</a>

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