Highlight keywords using JavaScript

Hello!

I have no experience in JavaScript, and I was wondering if someone could take a few minutes to help me with the script below.

I use it along with Tampermonkey, and its function is to highlight specific words on a webpage. It works good, with only a little problem.

Let's say that on a web page you can find this sentence...

"These flowers are very beautiful."

Using the following two instructions, I call the script to highlight in red the keyword "very beautiful", and in blue the keyword "beautiful".

highlightWord('very beautiful','red');
highlightWord('beautiful','blue underline');

Code (JavaScript):

The problem is that the word "beautiful" can be found in both keywords, so the script will highlight the word "very" in red, and the word "beautiful" in blue, like this: very beautiful. What I'd like it to do is to highlight in red both words "very beautiful", not splitted in two colors. Changing the order in which the script is called (with the two keywords) does not solve the problem, as I already tried it.

The solution would be to make the script ignore "backgroundColor" changes for all the keywords that have already suffered such a change. This ignore flag should not be applied globally (for example, for 'underline' or 'bold' style changes), but it should be limited to "backgroundColor" changes only. So the word "beautiful" should also show up with an underline, as instructed in its calling instruction above.

Any help would be greatly appreciated!

Thank you kindly,

Alex

// ==UserScript==
// @name  Text Highlighter
// @include  *
// @grant  none
// ==/UserScript==

highlightWord('very beautiful','red');
highlightWord('beautiful','blue underline');

function highlightWord(word, style) {
   var xpath = "//text()[contains(., '" + word + "')]";
   var texts = document.evaluate(xpath, document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
   for (n = 0; n < texts.snapshotLength; n++) {
     var textNode = texts.snapshotItem(n);
     var p = textNode.parentNode;
     var a = [];
     var frag = document.createDocumentFragment();
     textNode.nodeValue.split(word).forEach(function(text, i) {
       var node;
       if (i) {
         node = document.createElement('span');
         node.style.fontSize = "inherit"
         node.style.fontFamily = "inherit"
         if (style.indexOf('red') > -1) { node.style.backgroundColor = '#ffdede'; node.style.color = 'black'; }
         if (style.indexOf('green') > -1) { node.style.backgroundColor = '#d2ecd2'; node.style.color = 'black'; }
         if (style.indexOf('blue') > -1) { node.style.backgroundColor = '#dedcff'; node.style.color = 'black'; }
         if (style.indexOf('underline') > -1) { node.style.textDecoration = 'underline'; }
         if (style.indexOf('bold') > -1) { node.style.fontWeight = 'bold'; }
         if (style.indexOf('italic') > -1) { node.style.fontStyle = 'italic'; }
         node.appendChild(document.createTextNode(word));
         frag.appendChild(node);
       }
       if (text.length) {
         frag.appendChild(document.createTextNode(text));
       }
       return a;
     });
     p.replaceChild(frag, textNode);
   }
}

Code (JavaScript):