Выделение ключевых слов с помощью JavaScript

Привет! У меня нет опыта работы с JavaScript, и мне было интересно, может ли кто-нибудь потратить несколько минут и помочь мне со сценарием ниже. Я использую его вместе с Tampermonkey, и его функция — выделять определенные слова на веб-странице.

Работает хорошо, только с небольшой проблемой. Допустим, на веб-странице вы можете найти это предложение...
«Эти цветы очень красивы». Используя следующие две инструкции, я вызываю скрипт, чтобы выделить красным ключевое слово "очень красивый", а синим цветом выделено ключевое слово "красивый".

 


// ==UserScript==


// @name Text Highlighter


// @include *


// @grant none


// ==/UserScript==


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


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


function highlightWord(word, style) {


var xpath = "http://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);


}


}

Код (JavaScript): Проблема в том, что слово «красивый» можно встретить в обоих ключевых словах, поэтому скрипт выделит слово «очень» красным, а слово «красивый» синим, вот так: очень красивый. Мне хотелось бы выделить красным оба слова"очень красивый", не разделенный на два цвета.

Изменение порядка вызова скрипта (с двумя ключевыми словами) не решает проблему, как я уже пробовал. Решением было бы заставить сценарий игнорировать изменения «backgroundColor» для всех ключевых слов, которые уже подверглись таким изменениям.



Этот флаг игнорирования не следует применять глобально (например, для изменений стиля «подчеркивание» или «жирный»), но его следует ограничивать только изменениями «backgroundColor». Таким образом, слово «красивый» также должно отображаться с подчеркиванием, как указано в инструкции вызова выше.

Любая помощь будет принята с благодарностью!

Спасибо, любезно,

Алекс

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

Код (JavaScript):