求开发脚本：为未包含在标签内的单词添加span标签

嘿，这个需求用DOM操作来实现是最稳妥的——直接正则怼HTML很容易踩坑，比如嵌套标签、特殊字符这些场景都会让正则失效。我给你写个JavaScript的实现方案，完全符合你的要求：

实现代码 #

function wrapTextNodesInSpan(parentElement) {
  // 将子节点转为数组，避免遍历过程中DOM结构变化影响循环
  const childNodes = Array.from(parentElement.childNodes);
  
  childNodes.forEach(node => {
    // 仅处理非空白的文本节点
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') {
      // 匹配所有非空白字符序列（包含带标点的"单词"，比如示例里的park.）
      const words = node.textContent.match(/\S+/g) || [];
      // 创建文档片段，批量添加节点减少DOM重排
      const fragment = document.createDocumentFragment();
      
      words.forEach((word, index) => {
        const span = document.createElement('span');
        span.textContent = word;
        fragment.appendChild(span);
        
        // 单词之间添加空格（拆分时会丢失原空格，这里补回来）
        if (index < words.length - 1) {
          fragment.appendChild(document.createTextNode(' '));
        }
      });
      
      // 用新的片段替换原文本节点
      parentElement.replaceChild(fragment, node);
    }
    // 注：如果需要递归处理嵌套元素内的文本，可取消下面注释
    // else if (node.nodeType === Node.ELEMENT_NODE) {
    //   wrapTextNodesInSpan(node);
    // }
  });
}

// 使用示例：处理页面中的目标p标签
const targetElement = document.querySelector('p');
wrapTextNodesInSpan(targetElement);

代码说明 #

• DOM操作优先：相比正则表达式，DOM API能精准区分文本节点和元素节点，不会误处理已有标签内部的内容，也不会破坏HTML结构。
• 单词匹配逻辑：用/\S+/g匹配所有非空白字符序列，这样像park.这类带标点的内容会被当成一个完整"单词"处理，和你的示例需求一致。
• 性能优化：使用DocumentFragment批量插入节点，避免频繁操作DOM导致的重排，提升处理效率。
• 灵活扩展：如果后续需要处理嵌套标签内部的文本（比如<div><b>hello</b> world</div>里的world和hello都要包裹），只需要取消代码里的递归注释即可。

测试你的示例HTML：

原代码：<p>I <span>like</span> to go <b>to</b> the park.</p>
处理后：<p><span>I</span> <span>like</span> <span>to</span> <span>go</span> <b>to</b> <span>the</span> <span>park.</span></p>

完全符合预期效果~

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