Question

编辑：应该说，这是针对Greasemonkey脚本的，所以它基本上要突出显示特定HTML页面上的一些关键短语。感谢

此代码突出显示＆＃34; First Phrase＆＃34;黄色：

document.body.innerHTML= document.body.innerHTML.replace(/First Phrase/g, function(m){
return '<span style="background-color:yellow">'+m+'</span>';
});

但是如何突出显示不同颜色的多个短语，例如＆＃34;第二个短语＆＃34;红色，＆＃34;第三个短语＆＃34;蓝色，等等。

由于

Answer 1

首先，创建一个您想要用于元素的颜色数组。

其次，使用您喜欢的收藏方法收集所有目标元素。我在我的示例中使用了 getElementsByTagName 。

第三，创建一个环绕这些元素的for循环，并使用 .style.color 在colours数组中为它们分配各自的颜色：

＆＃13;

var colours = ['red', 'blue', 'green'];
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.color = colours[i]
}

＆＃13;

<div>Make me red!</div>
<div>Make me blue!</div>
<div>Make me green!</div>

＆＃13;

希望这有帮助！：）

Answer 2

你可以保留你想要的颜色数组，然后在替换函数中使用索引来为你的替换选择一种颜色。

var arr = ['yellow', 'red', 'green'];
var colorIndex = 0;
document.body.innerHTML= document.body.innerHTML.replace(/First Phrase/g, function(m){
   colorIndex %= arr.length;
   return '<span style="background-color:' + arr[colorIndex++] + '">'+m+'</span>';
});

<div>
First Phrase
First Phrase
First Phrase
<div>

Answer 3

我的建议是使用jQuery库like the following。

$('body').text().highlight('my text to highlight');

多个关键字

3 个答案: