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

  • Автор темы Shadow1919
  • 17
  • Обновлено
  • 17, May 2024
  • #1
Привет! У меня нет опыта работы с 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):

Shadow1919


Рег
12 Oct, 2014

Тем
1

Постов
3

Баллов
13
Тем
49554
Комментарии
57426
Опыт
552966

Интересно