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

Регулярное выражение вроде ^[\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() вернёт только первое совпадение и остановится — частая причина, почему «регулярка вроде рабочая, а находит только один результат».

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

Три выражения, которые пригождаются чаще всего. Совпадения не идеальны на 100% для экзотических случаев (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 вернётся только первое совпадение.
• . нужно экранировать (\.), если имеется в виду буквальная точка, а не «любой символ».
• Не держите готовые паттерны в голове — тестируйте на живых данных.