Регулярные выражения в JavaScript: примеры использования и сервисы для проверки

Многие сайты, стремясь получить как можно больше информации о своих посетителях, предлагают пройти авторизацию. Как правило, от пользователя в таких случаях необходим e-mail и личный пароль. Что же происходит с этими данными дальше?

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

Регулярные выражения представляют собой способ поиска совпадений шаблона с текстом. Такой шаблон поиска может состоять как из отдельного символа, так и более сложных символьных комбинаций и выражений, необходимых для сопоставления с оригинальным текстом. Для поиска используется строка-образец (шаблон/pattern), которая состоит из метасимволов, задающих правило поиска.

Например:

var patt = /example/i;

где:

• /example/i — регулярное выражение;
• example — шаблон для поиска;
• i — модификатор, не учитывающий при поиске регистр. Могут использоваться также модификаторы g — глобальное сопоставление (находит все совпадения, не останавливаясь после первого) и m — многострочное сопоставление.

Для работы с регулярными выражениями в Java импортируется пакет java.util.regex с классами, которые помогают сопоставлять последовательности символов с шаблонами. Внутри — три основных класса:

1. Pattern — скомпилированное представление регулярного выражения.
2. Matcher — выполняет операции сопоставления с последовательностью символов путем интерпретации файла Pattern.
3. PatternSyntaxException — является исключением, не выполняет проверку, но указывает на синтаксическую ошибку в шаблоне регулярного выражения.

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

Как создать регулярное выражение

Существует два способа создания регулярного выражения:

• При помощи литерала (фиксированного значения). При анализе скрипта литералы вызывают регулярное выражение. Способ используется при постоянном регулярном выражении и позволяет увеличить производительность.

Например:

var re = /ab+c/;

• Используя конструктор объекта RegExp. Компиляция регулярного выражения происходит во время выполнения скрипта. Способ стоит использовать при изменяемом регулярном выражении.

Например:

var re = new RegExp("ab+c");

Как создать шаблон регулярного выражения

Чтобы быстро освоить регулярные выражения, можно воспользоваться генератором регулярных выражений, например, regex101.

Чтобы создать самое простое регулярное выражение, необходимо выбрать JavaScript в левой колонке Flavor и отключить флаги multi line и global.

Например: введите в поле регулярного выражения слово map, а в тестовую строку map, cap, maps, dap, sap, MAP, lap, map, rap, tap, zap.

Как видим, некоторые строки в тестовой строке не совпадают. Это происходит потому, что регулярное выражение по умолчанию возвращает только первое найденное совпадение. Чтобы нашлись все совпадения, необходимо включить флаг global (g). Стоит обратить внимание, что шаблоны регулярных выражений учитывают регистр, потому следует также выбрать флаг insensitive (i).

Регулярное выражение теперь имеет вид /map/gi, а в тестовой строке найдены все совпадения, в том числе в верхнем регистре.

Чтобы сопоставить слова map, cap, rap, необходимо расширить написание регулярного выражения и использовать наборы символов, поместив их в квадратные скобки []. Так, [mcr]ap будет соответствовать строкам:

Чтобы сопоставить все слова, которые заканчиваются на «-ap», есть возможность использовать диапазон [a-z]ap.

Можно использовать следующие диапазоны:

• Заглавные буквы [A-Z];
• Цифры [0-9];
• Варианты выбора, например, [a-d] или [f-j];
• Символы [#$%&@];
• Смешанный диапазон, который может включать в себя прописные, заглавные буквы и цифры [a-zA-Z0-9].

Использование специальных символов

Специальные символы используются для написания более сложных регулярных выражений. Они необходимы в тех случаях, когда стоит задача найти пробелы, повторяющиеся символы. Ниже предоставлен полный список таких символов.

Специальные символы регулярных выражений

\	Буквальное использование специального символа. Например, m\* приводится в точное соответствие с m*, а не mmmmm.
+	Предшествующий символ, который может быть продублирован один или несколько раз. Например, m+ap будет соответствовать map, mmap и mmmmmap. Предыдущий символ можно повторять неограниченное количество раз. При этом вы все равно получите совпадение.
*	Предшествующий символ, который может быть продублирован 0 и более раз. Например, m*ap будет соответствовать ap, map и mmmmmap. Символ похож на сочетание + и ?.
?	Метасимвол для обозначения количества. Предшествующий символ, который может быть продублирован 0 или один раз. Например, m?ap будет соответствовать только map или ap.
. (десятичная точка)	Соответствие любому символу — цифре или букве. Однако точка не относится к символу новой строки. Например, .{6} будет соответствовать шестизначному паролю, состоящему из букв, цифр и символов. Например, carrot и c@rr0t.
^	Находит регулярное выражение, соответствующее началу строки. Если ^ находится внутри квадратных скобок, это означает, что шаблон соответствует любому символу, кроме указанных. Например, [^daf] – шаблон соответствует любому символу, кроме d, a, f.
$	Соответствие концу строки. Также может сопоставляться содержимому до переноса строки, при условии, что установлен флаг многострочности. Например, /p$/ не соответствует p в строке zipper, но соответствует строке zipp.
(x)	Захватывающие скобки. Соответствует x и запоминает соответствие. Например, /(too)/ соответствует too в too bar.
(?:x)	Не захватывающие скобки. Соответствует x, но не запоминает соответствие.
x(?=y)	Упреждение. Соответствует x, но если за x стоит y.   Найдя x, движок регулярных выражений проверяет наличие после него y. Если y нет, совпадение игнорируется и поиск продолжается. Например, /map(?=rat)/ соответствует map только если после него следует rat.
x(?!y)	Отрицательное упреждение. Соответствует x, но если за ним НЕ следует y.
a|b	Организация группы. Соответствие a или b. Например, /blue|red/ соответствует blue в blue flowers и red в red flowers.
{n}	n вхождения предыдущего символа. Является положительным целым. Например, /a{3}/ не соответствует a в map, но соответствует трем а в maaap или первым трем а в maaaap.
{n,m}	Количество символов от n до m. Где n и m являются положительными целыми. Например, /a{1,2}/ соответствует символу a в map, двум а в maap и первым двум а в maaap.
[abc]	Метасимвол для группировки. Соответствие только тем символам, которые перечислены в квадратных скобках.
[^abc]	Метасимвол для группировки. Соответствие любому символу, кроме тех, что находятся в квадратных скобках.
[a-z]	Метасимвол группировки. Соответствие всем латинским символам без учета регистра.
[A-z]	Метасимвол группировки. Соответствие всем латинским символам с учетом регистра.
[\b]	Соответствие бэкспейсу (U+0008).
\b	Соответствует границе слова, где символ слова — [a-zA-Z0-9_]. Например: ●            /\bbloo/ соответствует bloo в слове blood; ●            /oo\b/ не соответствует oo в слове blood, поскольку за oo стоит символ d, который является символом слова.
\B	Соответствие несловообразующим границам. Важно, чтобы предыдущие и следующие символы были однотипными — словообразующими или несловообразующими.
\cX	Соответствие управляющему символу. X — символ случайного выбора. Например, /\cM/ соответствует control-M (U+000D).
\d	Метасимвол для поиска. Находит цифру. Идентично [0-9]. Например, /\d/ или /[0-9]/ соответствует 5 в 5 oranges.
\D	Метасимвол для поиска. Находит нецифровые символы. Так, он будет находить точки, запятые, буквы, амперсанды, но не цифры. Идентично      [^0-9]. Например, /\D/ или /[^0-9]/ соответствует M samsung в M51 samsung.
\f	Символ управления печатью. Соответствие символу прогона страницы (U+000C).
\n	Соответствие символу перевода строки (U+000A).
\r	Соответствие символу возврата каретки (U+000D). Сам по себе не используется. Чаще всего применяется в комбинации \r\n.
\s	Находит пробельные символы (символы пустого пространства) — пробелы, прогоны страницы, табуляции. Сокращение от [\t\n\x0b\r\f].
\S	Находит любой непробельный символ. Находит абсолютно все символы, кроме пробелов. Сокращение от [^\s].
\t	Символ табуляции. Соответствие символу горизонтальной табуляции (U+0009).
\v	Соответствие символу вертикальной табуляции (U+000B).
\w	Буквенно-цифровой символ или знак подчеркивания. Совпадение любого символа в слове. Сокращение от [a-zA-Z_0-9]. Например, \w+ найдет и выделит в тексте все отдельные слова, но не пробелы, точки, запятые или амперсанды.
\W	Соответствие любому символу, не содержащему букву или цифру. Сокращение от [^\w]. Например, /\W/ найдет % в 100%.
\n	Символ новой строки. Обратная ссылка на последнюю найденную строку n. При этом n является положительным числом. Например, Names:\n * Ivan\n * Boris\n * Mary — список имен, каждое из которых будет отображаться с новой строки.
\0	Соответствие символу NULL (U+0000).
\xXX	Соответствие символам кода XX. Шестнадцатиричный юникод. Например, \x7A соответствует z.
\uXXXX	Шестнадцатиричный код, состоящий из четырех шестнадцатиричных цифр в кодировке UTF-16. Например, \u00A9 соответствует знаку копирайта ©.

Работа с регулярными выражениями

В JavaScript регулярные выражения используются в методах: exec, test, match, search, replace, split.

Методы, которые используют регулярные выражения

exec	При совпадении в строке возвращает массив и обновляет regexp.
test	Производит тестирование совпадений в строке. Может быть true или false.
match	Выполняет поиск совпадений. Возвращает массив, содержащий результаты этого поиска.
search	Производит тестирование совпадений в строке. Возвращает позицию первого символа в найденной строке. Если соответствие не найдено, вернет значение -1.
replace	Выполняет поиск совпадений в строке. Ищет строку для регулярного выражения и возвращает новую с измененными указанными значениями.
split	Выполняет разбиение строки с регулярным выражением в массив по указанному разделителю.

Методы test и search позволяют узнать, есть ли в строке соответствия шаблону регулярного выражения. Для получения более полной информации используют методы exec и match.

Приведем в пример поиск совпадения в строке с использованием метода exec. Скрипт выглядит так:

var myRe = /d(b+)d/g;
var myArray = myRe.exec("btbbndddpe")

Какими могут быть результаты выполнения регулярных выражений — рассмотрим в таблице ниже.

Результаты выполнения регулярного выражения

Объект	Индекс	Описание	Пример
myArray		Содержимое myArray.	[“tbbn”, “bn”]
	index	Индекс совпадения. Как правило, начинается с нуля.	2
	input	Исходная строка.	btbbndddpe
	[1], …[n]	Совпадения во вложенных скобках. Количество скобок может быть неограниченно.	[1] = bn [2] = n
	[0]	Совпавшие символы.	tbbn
myRe	lastIndex	Значение, с которого начинается следующий поиск совпадения.	3
	source	Текст шаблона. При создании регулярного выражения обновляется, но не меняется при его выполнении.	t(b+)(n)
	ignoreCase	Показывает, активирован ли флаг i — поиск в зависимости от регистра.	true
	global	Показывает, активирован ли флаг g.	true
	multiline	Показывает, активирован ли флаг m.	false

Флаги регулярных выражений

В регулярных выражениях могут применяться специальные флаги. Они влияют на поиск.

Флаг	Описание
i	Осуществляется поиск без привязки к регистру. Найдет соответствия в верхнем и нижнем регистрах (D и d).
g	Глобальный поиск. Осуществляется поиск всех совпадений, а не только первого.
m	Многострочный поиск. Влияет на символы ^ (поиск совпадений в начале строки) и $ (поиск совпадений в конце строки).
y	Поиск по заданной позиции в исходной строке.
u	Поддержка Unicode.
s	Поиск любого символа, включая перенос строки \n.

Флаги в шаблонах регулярных выражений используются с помощью синтаксисов:

var re = /pattern/flags;

или

var re = new RegExp("pattern", "flags");

Флаги указываются после шаблона/паттерна.

Примеры использования регулярных выражений

Проверка e-mail

Как проверить, действителен ли адрес электронной почты, введенный пользователем в соответствующее поле на сайте?

Регулярное выражение, которое соответствует любому e-mail адресу:

/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm

Проверка телефонных номеров

Этот пример может применяться для проверки любого телефонного номера:

^\+?\d{1,3}?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$

Проверка телефонного номера с кодом конкретной страны (например, Украины):

^((\+?3|8)[ \-] ?)?((\(\d{3}\))|(\d{3}))?([ \-])?(\d{3}[\- ]?\d{2}[\- ]?\d{2})$

Проверка строки с адресом видео на YouTube

Подходит для всех URL-адресов на YouTube:

/http:\/\/(?:youtu\.be\/|(?:[a-z]{2,3}\.)?youtube\.com\/watch(?:\?|#\!)v=)([\w-]{11}).*/gi

Проверка формата URL

Проверяет URL-адреса на соответствие синтаксису доменов. Учитывает протоколы HTTP и HTTPS:

/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi

Проверка текста на повторяющиеся слова

Поиск соответствий на повторяющиеся слова:

\b(\w+)\s+\1\b

\b — это граница слова, а \1 — ссылка на зафиксированное совпадение (первое слово).

Синтаксис поисковых запросов Google

Это выражение может стать основой для создания собственного алгоритма поиска. «+» добавляет ключевые слова, «–» — исключает слова из результатов выдачи:

/([+-]?(?:'.+?'|".+?"|[^+\- ]{1}[^ ]*))/g

Проверка имени пользователя

Username может включать буквы, цифры и символы, такие как: «–», «_», «*». Наборы допустимых в имени символов так же, как и длину строки, можно задавать самостоятельно:

/^[a-z0-9_-*]{3,16}$/

где:

• ^ — начало строки;
• _-* — набор допустимых символов;
• 3,16 — длина строки;
• $ — конец строки.

Проверка надежности паролей

Чтобы создать надежный пароль, необходимо придерживаться некоторых стандартов — использовать помимо букв и цифр другие символы в разных регистрах, а также спецзнаки. Это регулярное выражение уже содержит необходимые требования для проверки надежности паролей:

/^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$/

Проверка номера кредитной карты

С помощью регулярных выражений можно исключить номера платежных карт, в которых содержатся умышленные или случайные ошибки, неправильные последовательности введенных цифр:

/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/

Проверка цен

Цены имеют множество представлений и форматов. Единого регулярного выражения для них не существует. Приведем пример выражения для извлечения из текста цен в долларовом эквиваленте:

/(\$[0-9,]+(\.[0-9]{2})?)/

где {2} — комбинация, которая указывает на то, что символ из [0-9] должен повториться дважды (дробная часть цены).

Внимание! Регулярные выражения имеют в своем арсенале специальные символы, которые в обязательном порядке необходимо экранировать. В этот список входят: . ^ $ * + ? { } [ ] \ | ( ). Перед каждым таким символом необходимо добавлять обратный слэш \.

Сервисы и приложения для проверки регулярных выражений

Чтобы не писать код с нуля, существуют специальные онлайн-инструменты, которые позволяют протестировать уже написанные регулярные выражения или используются для тренировки.

• Regex101

Один из лучших сервисов по созданию регулярных выражений. Позволяет сгенерировать и получить ссылку на код для JavaScript, PHP, Python. Содержит огромную библиотеку уже готовых шаблонов регулярных выражений.

• RegExr 2.0

Удобный онлайн-тестер для выполнения простых задач. Не генерирует код, но поддерживает замену по шаблону.

• Expresso

Десктопная программа с рядом преимуществ. Содержит большую библиотеку шаблонов, может генерировать код. Для удобства работа осуществляется в визуальном редакторе.

• Regex Util (IDEA plugin)

Плагин для IDE. Поддерживает замены и разделения по шаблону, включает в себя подсказки и описания используемых элементов. Не сохраняет регулярные выражения, но прекрасно подходит для их проверки перед тем, как добавить в код.