页面随机加粗文本脚本停止渲染：寻求问题排查方案

你的脚本意图是给页面指定元素内的随机非空格字符添加加粗样式，但当前代码存在两个核心问题：

• 处理完成后，原空文本节点仍残留在DOM中，会引发排版错乱（对应你截图里的异常空白/节点冗余问题）
• 仅处理目标元素的第一层子文本节点，嵌套元素内的文本会被完全忽略

修复后的代码 #

// 选择需要处理的页面元素
let all = document.querySelectorAll("p, ol, ul, a, li, span, h2, h3, h4, h5");
all.forEach(element => processElement(element));

// 递归处理元素及其所有子节点
function processElement(element) {
  // 倒序遍历子节点，避免插入新节点打乱遍历顺序
  for (let i = element.childNodes.length - 1; i >= 0; i--) {
    const node = element.childNodes[i];
    if (node.nodeType === 3) {
      // 处理文本节点
      makeRandomBold(node);
    } else if (node.nodeType === 1) {
      // 递归处理嵌套的元素节点
      processElement(node);
    }
  }
}

function makeRandomBold(textNode) {
  const text = textNode.textContent.trim();
  if (!text) {
    // 直接移除无意义的空文本节点
    textNode.remove();
    return;
  }

  const parent = textNode.parentNode;
  // 先删除原文本节点，避免空节点残留
  textNode.remove();

  text.split("").forEach(char => {
    if (char !== " " && Math.random() > 0.49) {
      const strong = document.createElement("strong");
      strong.textContent = char;
      parent.appendChild(strong);
    } else {
      parent.appendChild(document.createTextNode(char));
    }
  });
}

关键改动说明 #

1. 递归处理嵌套元素：新增processElement函数，递归遍历所有子节点，确保嵌套在元素内的文本也能被处理
2. 移除原文本节点：处理前直接删除原文本节点，彻底避免空节点残留导致的排版异常
3. 倒序遍历子节点：防止插入新节点时打乱遍历顺序，确保所有节点都能被正确处理
4. 过滤空文本节点：直接移除无意义的空文本节点，优化DOM结构

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