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

Регулярное выражение — это последовательность символов (селекторов). Оно используется для поиска и обработки строк, слов, чисел и других текстовых данных.

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

Зачем нужны регулярные выражения

Шаблон регулярного выражения

Создать шаблон можно двумя способами. Выбирайте тот, что больше нравится:

Первый способ — через new RegExp():

regularExpression = new RegExp("регулярное выражение", "флаги");

Второй способ — через слеши:

regularExpression = /регулярное выражение/флаги;

Основные символы в регулярных выражениях

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

Символы текста

Буквы и цифры — самые простые символы. Например, регулярное выражение оса найдет совпадение даже в слове «автосалон».

Символы начала и конца строки

Каретка ^ используется для обозначения начала строки, а доллар $ — для конца. К примеру, если мы напишем ^оса$, то совпадением будет только со словом «оса».

Классы символов

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

[^] — отрицание диапазона символов. Если коротко, вы можете исключить поиск конкретных символов. Например, [^оса] не найдёт совпадений со словом «оса», а вот с «осадками» совпадение будет.

Цифры:

• [0-9] — любая цифра от нуля до девяти;
• \d — тоже любая цифра, это эквивалент [0-9].

Буквы:

• [а-яё] — любая буква кириллицы в нижнем регистре;
• [а-яёА-ЯЁ] — любая буква кириллицы в нижнем и верхнем регистре;
• [a-z] — любая буква на латинице в нижнем регистре;
• [a-zA-Z] — любая буква на латинице в нижнем и верхнем регистре;
• \w — любая цифра, латинская буква или знак подчёркивания.

Символы и знаки препинания:

• [.,:;?!-] — знаки препинания.
• \s — пробел.

Квантификаторы

Эти селекторы проверяют количество повторений предыдущего символа или группы символов:

• {n} — совпадение с точным количеством, где n — это положительное целое число. Например, конструкция [1-3]{1} будет искать одну цифру от одного до трёх.
• {min,max} — диапазон совпадений от минимального до максимального. Например, так можно указать минимальное и максимальное количество символов для ввода — {2,15}. А ещё одно из значений можно пропустить — {min,} или {,max}.
• — одно или бесконечное количество совпадений. Этот селектор равнозначен записи`.
• + — одно или более повторений. Этот селектор равнозначен записи {1,}.
• ? — ни одного или одно повторение. Селектор равнозначен записи {0,1}.

Модификаторы

Их ещё называют флагами. Это определённые параметры, которые задают настройки для поиска или замены текста.

Модификаторов много, мы перечислим лишь самые популярные:

• i — не учитывать регистр букв;
• g — искать все совпадения;
• u — поддержка юникод-символов.

Альтернация

Проще говоря, это условие. Альтернация обозначается символом | и указывает несколько вариантов, которые могут соответствовать регулярному выражению. Например, регулярное выражение (яблоко|банан) будет искать строки, содержащие либо слово «яблоко», либо «банан».

Символы группируются в скобках. При этом вы можете добавить условие «или» для любого количества символов: (a|b|c|d).

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

Сформулируйте условие. Например, вы хотите составить регулярное выражение для проверки логина. Этот логин должен быть длиннее трёх символов. Он может содержать буквы на кириллице и латинице или цифры. Регистр неважен.

Составьте выражение. Наполните шаблон селекторами, подходящими под ваши условия:

• Логин содержит буквы или цифры — /^[a-zа-яё0-9]/.
• Слово должно быть не короче трёх символов, максимальной длины нет — /^[a-zа-яё0-9]{3,}/.
• Регистр неважен — /^[a-zа-яё0-9]{3``,}$/i.

Протестируйте регулярное выражение. Напишите собственные тесты или воспользуйтесь одним из онлайн-сервисов, например, regex101.

Регулярные выражения можно составить разными способами — даже два разработчика-коллеги напишут для одной и той же задачи что-то своё. Кому-то важна лаконичность — чем выражение короче, тем лучше. Кто-то хочет предусмотреть все варианты — например, вдруг пользователь введёт в логине нижнее подчёркивание. А кто-то просто хорошо знает возможности регулярок и гибко использует этот инструмент.

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

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

Допустим, мы хотим проверить, что пользователь ввёл телефон в формате (XXX) XXX-XXXX. Можно составить следующее регулярное выражение: /^\d{3}-\d{3}-\d{4}$/. Здесь \d соответствует любой цифре, а фигурные скобки { и } указывают количество повторений.

Такое регулярное выражение будет соответствовать строкам, которые начинаются с открывающей скобки. За скобкой следуют три цифры, затем пробел, ещё три цифры, дефис и четыре цифры. Последним идёт символ конца строки.

Регулярное выражение для электронной почты

Составим регулярное выражение, которое проверяет формат почты username@domain.com — /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w)$/. Выражение сложное, поэтому давайте посимвольно разбирать, что здесь происходит:

• ^ — начало строки.
• \w — любая буква, цифра или символ подчёркивания.
• + — указывает, что предыдущий символ (любая буква, цифра или символ подчёркивания) должен повторяться один или более раз.
• ([.-]?\w+)* — группа символов. Она начинается с точки, дефиса или ни одного из них (?). За ними следует одна или более буквы, цифры или символы подчёркивания (\w+). Звёздочка указывает, что эта группа может встречаться нуль или более раз.
• @ — символ собаки, он обязателен в адресе электронной почты.
• \w — любая буква, цифра или символ подчёркивания.
• ([.-]?\w+)* — аналогичная группа символов, как описано выше.
• . — просто точка.
• \w — любые буквы, цифры или символ подчёркивания.
• $ — конец строки.

Если коротко, это регулярное выражение будет соответствовать строкам, которые начинаются с одной или более буквы, цифры или символа подчёркивания. За ними следует символ @. Затем идёт одна или более группа символов — она состоит из букв, цифр или подчёркивания, разделённых точкой. В конце — буквы, цифры или знак подчёркивания.

Регулярное выражение для проверки имени человека

Предположим, мы хотим проверить, что введённое имя содержит только буквы и начинается с заглавной буквы. Для этого можно составить такое выражение: /^[А-Я][а-яё]*$/. Здесь [А-Я] соответствует любой заглавной букве, а [а-яё] — любой букве в нижнем регистре. Звёздочка указывает, что предыдущий символ может повторяться нуль или более раз.

Заключение

Мы затронули лишь небольшую часть — основы регулярных выражений. Тема регулярок слишком обширна, чтобы рассказать обо всём в одной статье. Есть другие селекторы, модификаторы, да и сами регулярные выражения могут быть сложнее и интереснее.

Материалы по теме

• 3 способа валидации форм
• Зачем фронтендерам React, если есть JavaScript
• Частые ошибки в HTML-коде

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.