创建 chrome 扩展来更改每个单词的颜色答案

【问题标题】：creating chrome extension to change colour of each word创建 chrome 扩展来更改每个单词的颜色
【发布时间】：2022-06-13 23:31:12
【问题描述】：

正如标题所示，我一直在开发一个 chrome 扩展来更改网站中每个单词的颜色（以帮助我阅读 ADHD）

我运行的代码没有错误，但似乎没有做任何事情。我注释掉的部分是当我试图将每个段落逐字拆分时，但我放弃了这一点以暂时简化

var paragraph = document.getElementsByTagName("p");
var words = paragraph; //.innerHTML.split(" ");
var colours = ["red", "purple", "blue"];
var spans = [];

for(var i = 0; i<words; i++){
    var colour = colours[Math.floor(Math.random()*colours.length)]
    var span = "<span style='color:" + colour + ";'>" + words[i] + "</span>"
    
    spans.push(span);
}

//paragraph.innerHTML = spans.join(" ");
words.innerHTML = spans.join(" ");

【问题讨论】：

标签： javascript html google-chrome-extension colors

【解决方案1】：

您的代码中有几个问题。

getElementsByTagName() 返回元素的集合（您必须对其进行迭代）
没有.split()，您将获得完整的内容而不是文字
整个innerHtml() 和split() 解决方案可能不适用于复杂的HTML

我想建议你不同的方法。我会在整个文档（或元素）中找到带有正则表达式的空格的每个单词，并将其包装在具有特定类的span 中，并使用 CSS 对其进行样式设置。像这样的：

const root = document.querySelector('p');
root.innerHTML = root.innerHTML.replace(/(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span class="word">$2</span>');

.word:nth-child(1n-1) {
  color: green;
}
.word:nth-child(2n-1) {
  color: red;
}
.word:nth-child(3n-1) {
  color: blue;
}

<p>
 some words some words
 some words some words
 some words some words
</p>

如果你想要随机颜色，你可以改变replace 的第二个参数，这个函数每次迭代都会被调用。像这样的：

const root = document.querySelector('p');
const colors = ["red", "purple", "blue"];
root.innerHTML = root.innerHTML.replace(
  /(^|<\/?[^>]+>|\s+)([^\s<]+)/g, 
  (match) => {
    const color = colors[Math.floor(Math.random()*colors.length)];
    return ` <span style="color: ${color}">${match}</span>`
  }
);

<p>
 some words some words
 some words some words
 some words some words
</p>

【讨论】：