БлогNot. Javascript: выделяем нужные слова на загруженной в браузер странице

Javascript: выделяем нужные слова на загруженной в браузер странице

Задача состоит в том, чтобы динамически выделить на странице нужные слова, например, каким-то тегом или стилем. При этом желательно, чтобы скрипт понимал, что в конце слов могут стоять знаки препинания и их не выделял (или не пропускал такие слова). Удобнее всего подобное сделать с помощью регулярного выражения на Javascript.

В принципе, это та же тема, что в "добром браузере правды", только здесь мы не будем обходить рекурсивно всё дерево узлов документа, а просто получим содержимое нужного раздела или всего тега <body> через свойство innerHTML.

До слова может быть пробельный разделитель (в том числе, перевод строки) или открывающая скобка (кавычка), после слова - то же самое или знак препинания.

В качестве примера приведу функцию, выделяющую Имя Вождя жирным шрифтом, как и положено в странах, имеющих вождей. В других странах такая функция может пригодиться, например, для вставки мантры "террористическая организация, запрещённая в РФ" после упоминания какого-нибудь ИГИЛа, ведь логику string.replace нетрудно поменять (см. второй пример и его вывод).

Кроме того, показанную ниже функцию можно вызывать её не для всего документа, а только для нужного раздела.

Пример 1. Выделение нужных слов на странице тегом с помощью Javascript

<body onload="codeTags();">

<script type="text/javascript">
function codeTags () {
 var search_strings = ['Ким','Чен','Ын']; //Массив выделяемых слов
 var doc = document || window.document;
 var string = doc.body.innerHTML; //Строка с содержимым тега body документа
 var tag = 'b'; //Тег для выделения, без открывающей <...> и закрывающей </...> частей
 for (var i = 0; i < search_strings.length; i++) { //Цикл по массиву слов
  var reg = new RegExp (
   '(\\s|^|>)([\\(\\{\\[\\"\'])?' +  //Разделители и открывающая скобка или кавычка
   search_strings[i] + //Исходная строка
   '(\\s|$)?([\\u2000-\\u206F\\u2E00-\\u2E7F\\)\\]\\}\\"\'!#\\$%&\\*\\+,\\-\\.\\/:;<=>\\?@^_\\`\\|\\~])?','gi');
    //Разделители и закрывающая скобка, кавычка или знак препинания
  string = string.replace (reg,'$1$2<'+tag+'>' + search_strings[i] + '</'+tag+'>$3$4');
 }
 doc.body.innerHTML = string; //Вернуть документ назад
}
</script>
<noscript><div align="center">Автозамена недоступна из-за отключённого Javascript в браузере</div></noscript>

<div>
<p>Реальная северокорейская песня про Ким Чен Ына!</p>
<p>Мне нужен вождь (<i>Ким Чен Ын</i>),
<br>Направляй меня, "Ким Чен" ЫН;
<br>Возьми мою душу, о, Ким {Чен} ын!
<br>Ты моё знамя, Ким Чен 'Ын'!
<br>Ты моё солнце, Ким Чен [Ын]!</p>
<p>Я, ИоаКим, написал эту песню, о-о-е-е-е</p>
</div>

</body>

Вот что вывелось на экран:

вывод скрипта, пример 1
вывод скрипта, пример 1

Как видно, даже сильно "зашумлённое" имя Вождя сохранило сакральность.

Пример 2. Добавление чего-нибудь после нужных слов с помощью JavaScript

<body onload="codeTags();">

<script type="text/javascript">
function codeTags () {
 var search_strings = ['ИГИЛ','Кремль'];
 var doc = document || window.document; var string = doc.body.innerHTML;
 var tag = '<sup>(террористическая организация, запрещённая в РФ)</sup>';
 for (var i = 0; i < search_strings.length; i++) {
  var reg = new RegExp (
   '(\\s|^)?([\\(\\{\\[\\"\'])?' +
   search_strings[i] +
   '(\\s|$)?([\\u2000-\\u206F\\u2E00-\\u2E7F\\)\\]\\}\\"\'!#\\$%&\\*\\+,\\-\\.\\/:;<=>\\?@^_\\`\\|\\~])?','gi');
  string = string.replace (reg,'$1$2' + search_strings[i] + ' '+tag+'$3$4');
 }
 doc.body.innerHTML = string;
}
</script>
<div>
 <p>ИГИЛ, ИГИЛ, не ходи в Нижний Тагил!</p>
 <p>Ходи в Кремль, ИГИЛ!</p>
</div>
</body>

Вывод оказался таким:

вывод скрипта, пример 2
вывод скрипта, пример 2

Здесь для самого первого выражения в RegExp тоже добавлен "признак необязательности", то есть, модификатор "вопросительный знак", вдруг содержимое документа начинается прямо с запрещённого слова? :)

Примеры выполнялись локально просто как файлы .html.

Загадочные \\u2000-\\u206F\\u2E00-\\u2E7F в строке завершающих знаков препинания - это просто юникодовские диапазоны символов, считающихся знаками препинания, в принципе, их можно убрать.

15.09.2017, 14:04 [3981 просмотр]


теги: программирование javascript поиск браузеры

К этой статье пока нет комментариев, Ваш будет первым