Поэтому мне дали задание выделить название в заголовке нашего нового героя другим цветом. Так:

Дополнительный контекст этой задачи заключается в том, что наш веб-сайт доступен на разных языках, и этот фрагмент текста может отличаться по количеству символов и, что более важно, слов. Также положение этого выделенного текста в предложении может быть разным в разных языках. Выделение может сместиться на первую часть предложения, середину или конец!

Как младший разработчик, первое решение новичка, которое пришло мне в голову, состояло в том, чтобы разделить строку пробелом и превратить ее в массив слов с использованием метода split(''), но тогда строка будет разделена на слова и не будет работать с несколькими словами, как наш пример выше!!

Изучив вопрос и посоветовавшись со своим старшим, я познакомился с регулярным выражением!!

Согласно ChatGPT:

Регулярное выражение, сокращение от регулярное выражение, представляет собой последовательность символов, формирующую шаблон поиска. Он используется для сопоставления и обработки текста на основе определенного набора правил и синтаксиса.

Regex позволяет искать определенные шаблоны в текстовой строке, например, находить все экземпляры определенного слова или набора символов или идентифицировать шаблоны в телефонных номерах, адресах электронной почты или других структурированных данных. Его также можно использовать для управления текстом, например, для замены определенных символов или перестановки текста на основе набора правил.

Итак, теперь моя проблема извлечения более одного слова из строки решена!

Допустим, мы назвали основной текст, заголовок, а сиреневый раздел, который мы хотим выделить, очевидно, назвали highlight :D.

const regex = new RegExp(`(.*?)(${highlight})(.*)`);
const [, g1, g2, g3] = title.match(regex);
return (
<>
{g1}
<span className=“color-pink“>{g2}</span>
{g3}
</>
)};

В первой строке мы создаем новое регулярное выражение.

1.(.*?) : все, что предшествует выделению

2. Затем отделяем highlight от остального текста, а затем

3. Затем мы добавляем (.*?) (все, что идет после выделения).

Во второй строке мы разделяем регулярное выражение на группы с помощью метода `.match()`.

Метод match() извлекает результат сопоставления строки с регулярным выражением. Затем мы деконструируем их в массив.

Вы можете перейти на regex101.com, чтобы узнать, как использовать регулярное выражение. Вы можете проверить свою логику регулярных выражений там. У них тоже есть отличные объяснения! :)

Дополнительное, но важное примечание: почему мы записали массив таким образом, добавив в начале лишнюю запятую? [,g1,g2,g3] . Запятая в синтаксисе деструктурирования массива фактически используется для пропуска или игнорирования определенных элементов в массиве. В приведенном выше коде мы пытаемся деструктурировать массив с тремя элементами (g1, g2 и g3) из результата вызова метода match() для строки title с использованием шаблона регулярного выражения regex. Однако, если метод match() не найдет совпадения с шаблоном regex, он вернет null. В этом случае попытка деструктурировать null на три переменные вызовет ошибку TypeError.

И это все! Надеюсь, поможет :)

Некоторые примечания!

– Я использовал TailwindCSS для занятий.

- Я полный джуниор-разработчик с кучей недостатков :D Позвольте мне знать, если это объяснение расплывчато или кажется неполным ;)

До следующей удобной для новичков задачи ;)

Оставьте мне отзыв/ давайте свяжемся в моем Твиттере!

M