实现跨元素计数：每隔指定单词数在HTML页面植入字符串

嘿，这个需求的核心难点就是跨HTML元素连续统计单词，不能被<h1>、<p>这些标签打断计数对吧？我给你写了个纯JavaScript的实现方案，直接就能运行，适配你给出的示例场景：

核心思路 #

• 递归遍历<body>下所有文本节点，跳过脚本、样式这些无关节点
• 连续累计所有有效文本的单词数量，完全不受标签嵌套影响
• 每累计到指定单词数（比如10个），就插入目标字符串（比如"TEST"）
• 保持原有HTML结构不变，只插入文本节点

完整代码实现 #

function insertStringEveryNWords(targetStr, interval) {
  let totalWords = 0;
  const body = document.body;

  // 递归遍历所有节点，找到文本节点
  function traverseNodes(node) {
    // 跳过不需要处理的节点类型
    if ([Node.SCRIPT_NODE, Node.STYLE_NODE, Node.COMMENT_NODE].includes(node.nodeType)) {
      return;
    }

    if (node.nodeType === Node.TEXT_NODE) {
      const rawText = node.textContent.trim();
      if (!rawText) return; // 跳过空文本

      // 拆分单词：这里用正则匹配纯单词，过滤掉标点和空白
      const words = rawText.match(/\b[\w']+\b/g) || [];
      let currentIndex = 0;

      // 逐个累计单词数，直到达到间隔数或者遍历完当前节点的单词
      while (currentIndex < words.length && totalWords < interval) {
        totalWords++;
        currentIndex++;
      }

      // 达到指定间隔，插入目标字符串
      if (totalWords >= interval) {
        // 创建带空格的文本节点，避免和前后单词连在一起
        const insertNode = document.createTextNode(` ${targetStr} `);
        node.parentNode.insertBefore(insertNode, node.nextSibling);
        
        // 重置计数，继续统计后续单词
        totalWords = 0;
      }
    } else {
      // 遍历当前节点的所有子节点
      for (let i = 0; i < node.childNodes.length; i++) {
        traverseNodes(node.childNodes[i]);
      }
    }
  }

  traverseNodes(body);
}

// 调用示例：每10个单词插入一次"TEST"
insertStringEveryNWords("TEST", 10);

关键细节说明 #

1. 递归遍历：确保不会漏掉任何嵌套在<div>、<h1>、<p>里的文本，完全实现跨元素连续计数
2. 单词匹配规则：用/\b[\w']+\b/g匹配单词，能正确处理带撇号的单词（比如"don't"），同时自动忽略逗号、句号这些标点，计数更准确
3. 插入逻辑：创建独立的文本节点插入，不会破坏原有HTML元素的结构和样式
4. 可扩展性：如果需要调整单词匹配规则（比如包含特殊字符），只需要修改正则表达式即可

注意事项 #

• 如果页面是动态加载内容（比如AJAX渲染），需要在内容加载完成后再调用这个函数
• 如果需要多次重复插入（比如每10个单词插一次，直到页面末尾），这个代码已经支持，会自动在第10、20、30...个单词后插入目标字符串
• 如果你不想在单词前后加空格，可以修改createTextNode的内容为targetStr

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