如何用JavaScript为网页文本任意字母加粗？Chrome扩展多段落适配问题

原代码使用document.querySelector('p')只会选中页面中的第一个<p>元素，因此只对首个段落生效。要让功能覆盖所有段落，你需要获取所有段落节点并逐个处理，修改后的代码如下：

// 获取页面上所有段落元素
const paragraphs = document.querySelectorAll('p');

// 遍历每个段落进行处理
paragraphs.forEach(container => {
  // 将段落文本拆分为单个字符，随机为字符添加粗体标签
  const newText = container.innerText.split('').map(char => 
    Math.random() > 0.49 ? `<strong>${char}</strong>` : char
  );
  // 更新段落的HTML内容
  container.innerHTML = newText.join('');
});

关键说明 #

• document.querySelectorAll('p')返回页面中所有<p>元素的NodeList，通过forEach方法可以遍历每个段落执行加粗逻辑
• 保留了原有的随机加粗逻辑：每个字符有约50%的概率被<strong>标签包裹
• 注意：如果段落中原本包含其他HTML元素（比如链接、span等），使用innerText会提取纯文本并替换原有结构，若需保留原有HTML结构，需要更复杂的文本节点遍历处理（比如遍历文本节点而非直接取innerText）

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