Во время разработки очень часто приходится прибегать к работе с текстом. В этой статье пойдет речь о регулярных выражениях в JavaScript (RegExp), а так же я приведу несколько часто используемых примеров. Я не стану писать вам определение, что это такое, так как в интернете и там достаточно информации по этой теме. Я хочу лишь привести несколько примеров, чтобы вы могли выбрать для себя подходящий. Я очень долгое время потратил на то, чтобы найти нормальный источник, где все будет подробно описано. Лично для вас я этот процесс ускорю написав эту небольшую запись.
Пример 1 (есть/нет)
Уровень: Легко
Давайте представим, что у вас есть следующее предложение — «Hello, this is simple message.» и вам нужно проверить если ли в нем слово «message»?
Для этого примера я создал следующее демо:
See the Pen grNpWy by Alexander (@bologer) on CodePen.21516
В примере выше, переменная text включает в себя слово «message», а в переменной text2 нет. Далее я создал регулярное выражение /message/gi, которое означает следующее: я ищу слово «message», а две буквы после «/» означают следующее: g — делать глобальный поиск по всему предложению, а i , что без разницы как будет написано слово, вот так «MeSsagE» или «MESSAGE».
В результате в примере в выводится лишь В text есть сочетание "message"., потому что только в text есть такое слово.
Пример 2 (Поиск и замена)
Уровень: Легко
Давайте теперь представим, что у вас есть следующий текст: «Hello, this is another text, which has a lot of text in iside of the text.» и вы хотите заменить все «text» слова на «текст». Подробнее смотрите пример ниже.
See the Pen PzAqOr by Alexander (@bologer) on CodePen.21516
В этой примере я использовал .replace() + регулярное выражение для поиска и замены нужной части строки. Первым параметром нужно задать регулярное выражение, вторым текст (на что нужно заменить).
.replace() один за другим будет менять совпадения в тексте, пока они не закончатся.
Пример 3 (Поиск и замена 2)
Уровень: сложно
Допустим у меня есть следующая строка: «$#uygdgY76173#$ Hello $#uygdgY76173#$. This is new message :) Hello $#uygdgY76173#$ $$ JI!817dt6717, string» и я хочу заменить все «$#{буквы_или/и_цифры}#$» на «<b data-value=»$#{буквы_или/и_цифры}#$»>{буквы_или/и_цифры}</b>».
Для этого мне понадобиться следующее регулярное выражение:
/\$\#([a-z0-9]{1,})\#\$/gi
В «()» я сгруппировал часть строки, которую я хочу в дальнейшем где-то использовать. А точнее в моем случае, я добавляю значение сгруппированного из «()» внутри <b></b> элемента. Первая группа будет отмечена как «$1», вторая как «$2» и так далее. «$&» означает то, что я хочу скопировать полностью текст в data-value="".
{1,} означает, что я ожидаю, что значение между «[]» должно быть равно одному или более символам.
Далее смотрите живой пример ниже.
See the Pen NAkqZA by Alexander (@bologer) on CodePen.21516
Пример 4 (Поиск и получение данных)
Уровень: легко
Для этого примера мне понадобиться следующая строка: «http://helloworld.com/goodurl/path/etc/something-else», которая является ссылкой.
Я хочу получить «something-else» из этой ссылки.
Для этого нам понадобиться следующее регулярное выражение, которые показано в коде ниже:
21516
Из примера выше, re — это регулярное выражение, которые я написал, чтобы получить конец ссылки. Если посмотреть внимательнее, то я выбираю все буквы «a-z», а так же «-«, чтобы тире которые разделяет something-else попало под правило. Таким образом вы можете добавить любые другие символы, если ожидаете какие-то другие символы в ссылке.
«{1,}» означает, что я ожидаю один символ и более и «$» означает, что я регулярное выражение должно смотреть только на конец строки. И в самом конце регулярного выражения я использую «g» и «i», значение которых я уже описал выше в этой записи.
Самое последнее, что остается сделать — это использовать метод .exec(), который поможет нам получить совпадения по регулярному выражению. Использование этого метода должно быть следующим образом: регулярное_выражение.exec(ваша_строка).
После запуска exec — он возвращает массив. Нулевая позиция всегда будет строка (string), которая была пропущена через него. Тем самым если у нас что-то было найдено через регулярное выражение, нам нужно проверить первую позицию и другие. Если у вас так же что-то есть на второй позиции — re.exec(string)[2], то у вас нашлось больше чем одно совпадение в string.
Послесловие
У меня уйдет не одну десятку лет, чтобы описать все примеры регулярных выражений. Для того, что вкратце описать что это такое и как их использовать — я лишь привел четыре часто используемых примера. Если вы знаете ещё какие-либо, я буду рад посмотреть на них в комментариях под этой записью. Я лично, достаточно часто использую регулярные выражения для решения каких-либо задач. А как и где вы используете их? И иcпользуете ли вообще?
Так же хочу посоветовать сервис — regex101.com, который позволяет в режиме реального времени создавать новые регулярные выражения, писать текст для проверки, а так же возможность автоматически сгенерировать РВ для PHP, JavaScript и Python.
