Menu
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’);
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. What I’d like it to do is to highlight both words “very beautiful” in red, 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 show up with an underline, as instructed in its calling instruction above.
Thank you kindly,
Alex
// ==UserScript==
// @name Text Highlighter
// @include *
//
// ==/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’);
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);
}
}