document.body.innerHTML.replace for multiple keywords

Question

Edit: Should have said, this is for a Greasemonkey script, so it's basically to highlight a number of key phrases on a specific set of HTML pages. Thanks

This code highlights "First Phrase" in yellow:

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

But how can I highlight multiple phrases in different colours, e.g. "Second Phrase" in red, "Third Phrase" in blue, and so on.

Thanks

I hope you realise that serialising the de-serialising the entire body will destroy dynamically established relationships like listeners, live collections, etc. Also, you should [*not attempt to parse HTML with a regular expression*](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags). — RobG, Aug 01 '17 at 04:08
Do you have multiple different regular expressions to match the different phrases? If so, you can just repeat the code shown for each phrase (though then you don't need a function as the second argument of `.replace()`). — nnnnnn, Aug 01 '17 at 04:14
@Shomz it seems to me he is trying to modify the entire HTML for the entire page and not just an array like the question you have duped it as. — Lime, Aug 01 '17 at 04:15
@nnnnnn - thanks, how do I repeat the code without the function? I did try this - JS noob - but keep getting stuck. — huey, Aug 01 '17 at 04:42

score 0 · Answer 1 · edited Aug 01 '17 at 04:18

0

First, create an array of colours that you would like to use for your elements.

Second, collect all of the target elements with your favourite collection method of choice. I'm using getElementsByTagName in my example.

Third, create a for loop that loops over these elements, and assigns them their respective colour in the colours array by utilising .style.color:

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>

Hope this helps! :)

edited Aug 01 '17 at 04:18

RobG

142,382
31
172
209

answered Aug 01 '17 at 04:14

Obsidian Age

41,205
10
48
71

1

OP needs to colour substrings within element text, which means dynamically wrapping the substrings in spans (as shown in the question), not just applying a style to the whole of an existing element. – nnnnnn Aug 01 '17 at 04:15
@nnnnnn then use * – Lime Aug 01 '17 at 04:16
@William—that doesn't make sense. – RobG Aug 01 '17 at 04:19
@RobG you are right it appears I didn't read the whole answer. – Lime Aug 01 '17 at 04:20

Dij · Answer 2 · 2017-08-01T04:40:18.567

you can keep an array of colors you want and then use an index inside replace function to select a color for your replace.

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>

score -1 · Answer 3 · answered Aug 01 '17 at 04:23

-1

My advice would be use a jQuery library like the following.

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

answered Aug 01 '17 at 04:23

Lime

13,400
11
56
88

document.body.innerHTML.replace for multiple keywords

3 Answers3