Выделение слова в тексте с помощью jQuery: применение классов

Быстрый ответ

Для быстрого выделения конкретного слова в тексте через jQuery, произведите замену на <span class="highlight">слово</span>. Предварительно установите соответствующий стиль для класса .highlight в CSS. Вот пример реализации:

$('p').html(function(_, html) {
   // Реализуем заметное выделение слова, применив класс "highlight"
   return html.replace(/(\bслово\b)/g, '<span class="highlight">$1</span>');
});

CSS:

.highlight { background-color: yellow; }  /* Яркий желтый фон – словно воспоминание из 80-х! */

Обратите внимание на использование границ слов \b для выделения исключительно полных слов.

Понимание принципов выделения слов с помощью jQuery

При работе с HTML и динамическим применением стилей средствами jQuery стоит учесть несколько особенностей:

• Сопоставление полных слов: Использование \b в выражении /\bслово\b/g обеспечивает замену только целых слов, предотвращая случайное совпадение с фрагментами других слов.
• Учет регистра: Регистр играет важную роль. 'Слово' и 'слово' – две отдельные сущности! Чтобы обеспечить регистронезависимый поиск, используйте RegExp с флагом 'i', например: /(\bслово\b)/gi.
• Гибкость форматирования: Вы полностью свободны в выборе тегов и имен классов. Это как шкаф с ассортиментом костюмов: можно переходить от одного (span) к другому (div), менять стили ('.highlight' > '.emphasis')!

Как выделить несколько слов

В случае необходимости выделения целых предложений или фраз применяются аналогичные правила:

$('p').html(function(_, html) {
   // Теперь это предложение попадет в центр внимания
   return html.replace(/("быстрый коричневый лис")/gi, '<span class="highlight">$1</span>');
});

Данный код подсветит указанную фразу, сохраняя ее оригинальное оформление.

Необходима предельная внимательность

Если вы используете jQuery-плагины для подсветки текста, очень важно быть внимательными к встроенным скриптам. Рекомендуется использовать надежные источники и внимательно просматривать лицензии. Отдают предпочтение плагинам с открытым исходным кодом, например с лицензией MIT, поскольку это позволяет сообществу оценить их безопасность и функциональность.

Необходимо возвращение текста к первоначальному виду

Чтобы вернуть тексту исходное состояние, используйте следующий код:

function removeHighlights() {
    $('span.highlight').each(function() {
        // Возвращаем слова в их первоначальное состояние
        $(this).replaceWith($(this).text());
    });
}
// Возвращаем текст к первоначальному виду
removeHighlights();

Данный блок кода проходит по всем элементам с классом span.highlight, заменяя их на обычный текст и снимая подсветку.

Пора приступить к подсветке

Демонстрация подсветки слова с помощью jQuery на примере:

Исходный текст: "Быстрый коричневый лис перепрыгнул через ленивую собаку."

Применяем подсветку:

$("p:contains('лис')").html(function(_, html) {
  // Подсветка слова: 'лис'
  return html.replace(/(лис)/g, '<span class="highlight">$1</span>');
});

Получаем: "Быстрый коричневый лис🔦 перепрыгнул через ленивую собаку."

Теперь слово 'лис' ярко выделяется на общем фоне.

Продвинутые сценарии: вперед к светлому будущему

Обработка динамического контента: готовы к новому

С динамическим контентом функцию подсветки следует вызывать после его загрузки или обновления. Используйте $(document).ajaxComplete() для инициализации подсветки после Ajax-запросов.

Подробнее об этом расскажет наш спикер на видео

Поиск "на лету": свет, камера, действие!

Интерактивный поиск с подсветкой слов при их наборе пользователям в поисковой строке придаёт удобство и визуальную привлекательность. Для этого привяжите функцию подсветки к событию keyup.

Предобработка текста: подготовка к выходу в свет!

Перед выводом на экран некоторые тексты требуют "примерки" – преобразований, которые могут включать в себя нормализацию регистра и удаление специальных символов для обеспечения единообразия поиска и высокого качества выделения.

Полезные материалы

1. GitHub – bartaz/sandbox.js: Моё небольшое пространство для экспериментов с JavaScript
2. ':contains() Selector | Документация jQuery API'
3. highlighting – Как подсветить текст при помощи JavaScript – Stack Overflow
4. Document: createRange() метод – Web APIs | MDN
5. Window: find() метод – Web APIs | MDN
6. :nth-child() – CSS: Каскадные таблицы стилей | MDN
7. highlight.js