Chrome项目JS随机加粗字母失效：超链接后文本未受影响排查

一、当前代码的问题原因 #

1. 语法错误导致执行中断：你提供的代码存在未闭合的花括号，text.split('').forEach(...) 的 else 块和整个 makeRandomBold 函数都缺少闭合 }，这会直接引发JavaScript执行报错，后续节点的处理逻辑根本无法运行——这是超链接后文本未被加粗的核心原因。
2. DOM遍历逻辑隐患：即使修复语法错误，原代码用document.querySelectorAll("*")遍历所有元素，会导致a、strong等元素内部的文本也被处理（可能不符合预期）；同时为每个随机字母单独创建strong节点，会生成大量冗余DOM元素，影响页面性能。

二、随机区间放入单个strong标签的可行性 #

完全可行，且是更优的实现方式。相比为每个随机字母单独创建strong，随机选择连续字母区间并包裹在同一个strong中，能大幅减少DOM节点数量，提升页面性能，同时随机加粗的效果也能满足需求。

三、修正后的代码示例 #

方案1：修复原逻辑语法问题，优化遍历范围 #

仅处理目标容器（如p、div）内的文本，跳过a、strong等无需修改的元素：

// 选择需要处理的目标容器，可根据需求调整
let targetElements = document.querySelectorAll("p, div");

targetElements.forEach(el => {
  // 递归遍历子节点，处理文本节点
  processChildNodes(el);
});

function processChildNodes(node) {
  // 跳过不需要处理的元素
  if (node.tagName && ['A', 'STRONG'].includes(node.tagName.toUpperCase())) {
    return;
  }
  
  // 倒序遍历子节点，避免插入新节点打乱遍历顺序
  for (let i = node.childNodes.length - 1; i >= 0; i--) {
    let child = node.childNodes[i];
    if (child.nodeType === 3) {
      makeRandomBold(child);
    } else {
      processChildNodes(child);
    }
  }
}

function makeRandomBold(textNode) {
  let text = textNode.textContent;
  if (!text) return;
  
  let parent = textNode.parentNode;
  parent.removeChild(textNode); // 移除原空文本节点
  
  text.split('').forEach(char => {
    if (char !== " " && Math.random() > 0.49) {
      let strong = document.createElement("strong");
      strong.textContent = char;
      parent.appendChild(strong);
    } else {
      parent.appendChild(document.createTextNode(char));
    }
  });
}

方案2：随机区间包裹单个strong的实现（更高效） #

let targetElements = document.querySelectorAll("p, div");

targetElements.forEach(el => {
  processChildNodes(el);
});

function processChildNodes(node) {
  if (node.tagName && ['A', 'STRONG'].includes(node.tagName.toUpperCase())) {
    return;
  }
  
  for (let i = node.childNodes.length - 1; i >= 0; i--) {
    let child = node.childNodes[i];
    if (child.nodeType === 3) {
      makeRandomBoldRange(child);
    } else {
      processChildNodes(child);
    }
  }
}

function makeRandomBoldRange(textNode) {
  let text = textNode.textContent;
  if (!text) return;
  
  let parent = textNode.parentNode;
  parent.removeChild(textNode);
  
  let currentIndex = 0;
  const textLength = text.length;
  
  while (currentIndex < textLength) {
    // 随机决定是否生成加粗区间
    if (Math.random() > 0.5 && text[currentIndex] !== " ") {
      // 随机生成加粗区间长度（1-3个字符，可调整）
      const rangeLength = Math.floor(Math.random() * 3) + 1;
      const endIndex = Math.min(currentIndex + rangeLength, textLength);
      
      // 创建strong包裹区间内的字符
      let strong = document.createElement("strong");
      strong.textContent = text.slice(currentIndex, endIndex);
      parent.appendChild(strong);
      
      currentIndex = endIndex;
    } else {
      // 处理普通文本段
      let nextIndex = currentIndex + 1;
      while (nextIndex < textLength && Math.random() <= 0.5 && text[nextIndex] === " ") {
        nextIndex++;
      }
      
      parent.appendChild(document.createTextNode(text.slice(currentIndex, nextIndex)));
      currentIndex = nextIndex;
    }
  }
}

补充说明 #

• 若需要处理a标签内的文本，可移除['A', 'STRONG']中的A；
• 方案2的随机区间逻辑生成的DOM节点更少，性能更优，随机效果也更自然。

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