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
Как видно, даже сильно "зашумлённое" имя Вождя сохранило сакральность.
Пример 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
Здесь для самого первого выражения в RegExp тоже добавлен "признак необязательности", то есть, модификатор "вопросительный знак", вдруг содержимое документа начинается прямо с запрещённого слова? :)
Примеры выполнялись локально просто как файлы .html.
Загадочные \\u2000-\\u206F\\u2E00-\\u2E7F в строке завершающих знаков препинания - это просто юникодовские диапазоны символов, считающихся знаками препинания, в принципе, их можно убрать.
15.09.2017, 14:04 [4072 просмотра]