求助：如何为HTML段落中所有单词添加<artoon>标签？

你需要给HTML中所有文本单词（包括嵌套在<b>、<p>等标签内的）添加<artoon>标签，同时保留原有的DOM结构。直接处理HTML字符串容易出错，推荐通过DOM节点遍历的方式来实现，这样能精准保留标签层级，避免破坏原有结构。

实现代码（JavaScript） #

function wrapWordsInCartoon(element) {
  // 反向遍历子节点，避免节点替换导致的索引错乱
  for (let i = element.childNodes.length - 1; i >= 0; i--) {
    const node = element.childNodes[i];
    
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      const textContent = node.textContent.trim();
      if (!textContent) continue; // 跳过空文本
      
      // 按空格分割成单词（兼容多个连续空格的情况）
      const words = textContent.split(/\s+/);
      const fragment = document.createDocumentFragment();
      
      words.forEach((word, index) => {
        if (word) {
          // 创建<artoon>标签并设置文本
          const cartoonEl = document.createElement('artoon');
          cartoonEl.textContent = word;
          fragment.appendChild(cartoonEl);
          
          // 单词之间添加空格（最后一个单词不加）
          if (index !== words.length - 1) {
            fragment.appendChild(document.createTextNode(' '));
          }
        }
      });
      
      // 替换原文本节点
      element.replaceChild(fragment, node);
    } 
    // 递归处理元素节点（跳过已生成的<artoon>标签，避免重复包裹）
    else if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() !== 'artoon') {
      wrapWordsInCartoon(node);
    }
  }
}

// 调用函数处理目标容器
const targetContainer = document.querySelector('.test');
if (targetContainer) {
  wrapWordsInCartoon(targetContainer);
  // 可以在控制台查看处理后的HTML
  console.log(targetContainer.outerHTML);
}

代码说明 #

1. 反向遍历节点：当替换文本节点时，DOM结构会变化，反向遍历能避免索引错位的问题。
2. 文本节点处理：
   • 用/\s+/正则分割文本，兼容多个连续空格的场景；
   • 使用DocumentFragment批量添加节点，减少DOM重绘次数，提升性能。
3. 递归处理嵌套元素：确保<b>、<p>等嵌套标签内的文本也被处理，同时跳过已生成的<artoon>标签，防止重复包裹。
4. 保留空格结构：在单词之间添加空格，保证处理后的文本格式和原内容一致。

效果验证 #

将你的原始HTML放入页面，运行上述代码后，就能得到你期望的输出结构：

<div class="test"> <div> <p> <strong class="bold"> <artoon>Here's</artoon> <artoon>how</artoon> <artoon>you</artoon> <artoon>can</artoon> <artoon>wrap</artoon> <b><artoon>these</artoon></b> <artoon>three</artoon> <p><artoon>words</artoon></p> <artoon>in</artoon> <artoon>a</artoon> <artoon>string.</artoon> <artoon>Huzzah!!</artoon> </strong> </p> </div> </div>

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