Регулярные выражения (RegExp) в JavaScript

Регулярные выражения (RegExp) в JavaScript

· jQuery и JavaScript и Блог · 4 мин чтения

Во время разработки очень часто приходится прибегать к работе с текстом. В этой статье пойдет речь о регулярных выражениях в 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.ru - регулярные выражения

Так же хочу посоветовать сервис — regex101.com, который позволяет в режиме реального времени создавать новые регулярные выражения, писать текст для проверки, а так же возможность автоматически сгенерировать РВ для PHP, JavaScript и Python.

Источники

Комментарии