Регулярные выражения: как читать и составлять

Регулярное выражение вроде ^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$ выглядит как случайный набор символов, пока не знаешь, что каждый символ в нём отдельная команда с чётким смыслом. Разберём алфавит regex по токенам, а дальше в этой же статье стоит живой тестер, чтобы сразу проверить свой пример, не открывая другую вкладку.

Из чего состоит регулярное выражение

Регулярное выражение читается слева направо, токен за токеном, так же, как компьютер его и разбирает.

Квантификаторы отвечают на вопрос «сколько раз» и всегда стоят сразу после символа или группы, к которой относятся:

Собираем: \d{3}-\d{2}-\d{2} читается как «три цифры, дефис, две цифры, дефис, две цифры» и совпадёт с 123-45-67.

Живой regex-тестер

Впишите свой паттерн и тестовую строку, совпадения подсветятся сразу, без перезагрузки страницы:

Поставьте курсор в поле паттерна и попробуйте \d{3}-\d{2}-\d{2} вместо \d+. Подсветится только номер телефона целиком, а не отдельные цифры даты.

Жадные и ленивые квантификаторы

Это самое частое место, где регулярка «сработала не так».

По умолчанию квантификаторы жадные, они забирают максимум возможного:

'<b>жирный</b> и <i>курсив</i>'.match(/<.+>/)
// вернёт '<b>жирный</b> и <i>курсив</i>' целиком —
// от первой открывающей до последней закрывающей скобки

Жадный .+ не останавливается на первой попавшейся >. Он пытается забрать как можно больше символов, а потом «сдаёт назад» ровно настолько, чтобы совпадение всё ещё нашлось. Добавьте ? сразу после квантификатора, чтобы сделать его ленивым, и он остановится при первой возможности:

'<b>жирный</b> и <i>курсив</i>'.match(/<.+?>/)
// вернёт только '<b>'

Правило простое. Нужен самый короткий фрагмент между двумя разделителями, берите ленивый квантификатор (*?, +?, ??). Нужен самый длинный, оставляйте жадный по умолчанию.

Флаги

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

Без g String.prototype.match() вернёт только первое совпадение и остановится. Это частая причина, почему «регулярка вроде рабочая, а находит только один результат».

Готовые паттерны

Выражения, которые пригождаются чаще всего. На экзотических случаях они не идеальны (RFC для email длиннее любой статьи), но покрывают подавляющее большинство реальных данных:

// Email
const emailPattern = /^[\w.+-]+@[\w-]+\.[a-zA-Z]{2,}$/

// URL (http/https, необязательный путь)
const urlPattern = /^https?:\/\/[\w.-]+\.[a-zA-Z]{2,}(\/\S*)?$/

// Телефон в формате +7 999 123-45-67 (пробелы и дефисы необязательны)
const phonePattern = /^\+7[\s-]?\d{3}[\s-]?\d{3}[\s-]?\d{2}[\s-]?\d{2}$/

Вставьте любой из них в тестер выше (без /^.../$, только то, что между слэшами) и проверьте на своих данных.

Частые ошибки при чтении regex

Забыли экранировать спецсимвол. Точка . в regex значит «любой символ», а не буквальную точку. Чтобы найти именно точку, экранируйте её: \.. То же с +, *, ?, (, ), [, ], все они спецсимволы, и для буквального совпадения нужен обратный слэш перед ними.

Забыли ^ и $. Без них выражение ищет совпадение где угодно в строке, а не проверяет строку целиком. \d{3} совпадёт и внутри abc123def. Если нужна проверка «строка целиком состоит из трёх цифр», ставьте оба якоря: ^\d{3}$.

Перепутали [] и (). Квадратные скобки означают «один из перечисленных символов», [abc] совпадёт с одной буквой a, b или c. Круглые скобки задают группу, (abc) совпадёт только с точной последовательностью «abc» целиком.

Коротко

• Регулярное выражение читается токен за токеном. \d, \w, \s — классы символов, *, +, ?, {n,m} — сколько раз, ^ и $ — границы строки.
• Квантификаторы жадные по умолчанию, добавьте ? после них, чтобы сделать ленивыми.
• Без флага g вернётся только первое совпадение.
• . нужно экранировать (\.), если имеется в виду буквальная точка, а не «любой символ».
• Готовые паттерны в голове держать необязательно, проще проверить их на живых данных.