document.body.innerHTML.replace for multiple keywords

-1

编辑：应该说，这是一个Greasemonkey脚本，所以它基本上是突出显示一组特定的HTML页面上的一些关键短语。由于document.body.innerHTML.replace for multiple keywords

该代码突出了黄色的“第一阶段”：

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

但我怎么能突出多个以不同的颜色，例如短语“Second Phrase”为红色，“Third Phrase”为蓝色，依此类推。

谢谢

来源

2017-08-01 huey

我希望你明白，连载去连载整个身体会破坏像听众，现场集合等还可以动态建立的关系，你应该[*不要试图解析HTML与一个正则表达式*]（https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags）。 – RobG

你有多个不同的正则表达式来匹配不同的短语？如果是这样，你可以重复每个短语显示的代码（尽管如此，你不需要函数作为'.replace（）'）的第二个参数。 – nnnnnn

@Shomz在他看来，他正试图修改整个页面的整个HTML，而不仅仅是一个数组，就像你把它当作骗局一样。 – William

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

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

三，创建for循环，遍历这些元素，并利用.style.color为它们分配的colours阵列在各自的颜色：

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

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

希望这有助于！ :)

来源

2017-08-01 04:14:57

OP需要在元素文本中为子字符打上颜色，这意味着动态地将子字符串包装为跨度（如问题所示），而不仅仅是将样式应用于整个现有元素。 – nnnnnn

@nnnnnn然后使用* – William

@威廉 - 这是没有意义的。 – RobG

-1

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

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

来源

2017-08-01 04:23:10 William

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

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>

来源

2017-08-01 04:26:04 Dij

document.body.innerHTML.replace for multiple keywords

回答

相关问题