Chrome扩展开发求助：避免hyperlinks转纯文本及保留li/span样式

你的核心问题在于直接操作容器的innerText和innerHTML，这会彻底破坏原有DOM结构——把链接这类元素转成纯文本，还会打乱li、span的原有布局。下面是修复方案：

原代码问题分析 #

• 用innerText获取内容会丢弃所有HTML结构，只保留纯文本
• 直接覆盖innerHTML会把原有的元素（比如<a>）全部替换成纯文本和<strong>标签，自然丢失链接和样式

改进后的代码 #

我们需要递归遍历DOM树，只对文本节点进行随机加粗处理，完全保留元素节点（比如链接、li、span）的结构：

function randomBoldTextNodes(node) {
  // 跳过不需要处理的元素节点，可根据需求添加其他标签
  const skipTags = ['SCRIPT', 'STYLE', 'STRONG'];
  if (skipTags.includes(node.tagName)) return;

  if (node.nodeType === Node.TEXT_NODE) {
    const text = node.textContent;
    const boldedText = text.split('').map(char => {
      return Math.random() > 0.49 ? `<strong>${char}</strong>` : char;
    }).join('');
    // 创建临时span容纳处理后的内容，避免直接替换文本节点破坏结构
    const tempSpan = document.createElement('span');
    tempSpan.innerHTML = boldedText;
    node.parentNode.replaceChild(tempSpan, node);
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    // 递归处理子节点
    Array.from(node.childNodes).forEach(child => randomBoldTextNodes(child));
  }
}

// 处理目标元素，支持p、li、span等任意元素
const containers = document.querySelectorAll('p, li, span');
containers.forEach(container => randomBoldTextNodes(container));

方案说明 #

1. 只处理文本节点：递归遍历DOM时，跳过元素节点（比如<a>），只修改纯文本内容，链接等元素完全不受影响
2. 保留原有结构：不会覆盖整个容器的innerHTML，而是逐个替换文本节点，li、span的原有样式和布局都会保留
3. 可扩展跳过标签：如果有其他不需要处理的标签（比如已经是<strong>的内容），可以添加到skipTags数组里

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