Компонент TextHighlight в WordPress используется для визуального выделения определённого фрагмента текста, который встречается в другой строке. Компонент оборачивает все совпадения в тег <mark>, что добавляет стандартное выделение и делает нужные фразы легко заметными. В этой статье рассмотрим основные параметры TextHighlight, рекомендации по его применению и примеры кода.
Основное назначение TextHighlight
TextHighlight идеально подходит для случаев, когда необходимо автоматически подчеркнуть определённые слова или фразы в большом блоке текста. Он помогает пользователю легко находить нужные части текста, особенно в случаях, когда требуется выделить ключевые термины или результаты поиска.
Основные особенности
- Автоматическое выделение: Все найденные совпадения оборачиваются в тег
<mark>, что добавляет к ним стандартное выделение браузера. - Нечувствительность к регистру: Поиск совпадений проводится без учёта регистра, что делает компонент гибким и подходящим для различных задач.
- Поддержка нескольких совпадений: Если искомая строка встречается несколько раз,
TextHighlightавтоматически выделит каждое из них.
Пример использования TextHighlight
Для простоты начнем с базового примера, где искомая строка «WordPress» будет выделена дважды в исходном тексте.
import { TextHighlight } from '@wordpress/components';
const HighlightExample = () => (
<TextHighlight
text="WordPress позволяет создавать удивительные веб-сайты. Многие любят WordPress за его гибкость."
highlight="WordPress"
/>
);
Объяснение кода
- text — основной текст, в котором будет выполняться поиск слова «WordPress».
- highlight — искомая строка, которая будет обёрнута в тег
<mark>, когда встречается вtext.
Полный список параметров компонента TextHighlight
Свойства (Props)
highlight
Описание: Строка, которую необходимо найти и выделить в основном тексте. Параметр работает без учёта регистра, что позволяет находить совпадения независимо от их начертания. Например, еслиhighlightустановлен на «пример», компонент выделит и «Пример», и «пример».
Тип:string
Обязательный: Да
Значение по умолчанию: Пустая строка ('')text
Описание: Основной текст, в котором компонент будет искать и выделять указанные строки. Это текст, который будет отображаться в компоненте с выделенными совпадениями.
Тип:string
Обязательный: Да
Значение по умолчанию: Пустая строка ('')
Пример с пользовательским описанием
Представим, что у нас есть описание курса, и мы хотим выделить слово «React«, чтобы оно было более заметным для пользователя.
import { TextHighlight } from '@wordpress/components';
const CourseDescription = () => (
<TextHighlight
text="Этот курс посвящён библиотеке React, которая позволяет создавать мощные пользовательские интерфейсы. React стал важной частью веб-разработки."
highlight="React"
/>
);
Заключение
Компонент TextHighlight в WordPress предоставляет простой и удобный способ визуально выделять ключевые слова в тексте.