Регулярные выражения JS: полный гайд

const patternForEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

let searchTag = "div";
let dynamicPattern = new RegExp("<" + searchTag + ">", "gi");

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

Таблица ключевых метасимволов

Рассмотрим их на практике:

• {n} — точное количество повторений.
• {n,} — от n и более повторений.
• {n,m} — от n до m повторений включительно.
• * — ноль или более раз (эквивалент {0,}).
• + — один или более раз (эквивалент {1,}).
• ? — ноль или один раз (эквивалент {0,1}).

let productCodes = ["ABC-1234", "XYZ-7", "TEST-00"];
let findProductCode = /^[A-Z]{3,4}-\d{1,4}$/; // От 3 до 4 букв, дефис, от 1 до 4 цифр

productCodes.forEach(code => {
    console.log(code + ': ' + findProductCode.test(code));
    // Результат: ABC-1234: true, XYZ-7: true, TEST-00: false
});

Набор [abc] найдет либо a, либо b, либо c. Внутри набора можно указывать диапазоны через дефис: [a-z] — все маленькие латинские буквы, [0-9] — цифры. Если нужно исключить символы, используется знак отрицания ^ внутри скобок: [^0-9] означает «все, кроме цифр».

let userPassword = "MyP@ssw0rd!";
let allowedSymbols = /^[a-zA-Z0-9@!#]+$/; // Разрешены: буквы, цифры и символы @, !, #

if (allowedSymbols.test(userPassword)) {
    console.log("Надежный состав символов");
} else {
    console.log("Использованы запрещенные символы");
}

Существует два типа групп:

1. Захватывающие (capturing): (pattern) — результат помещается в отдельный элемент массива.
2. Незахватывающие (non-capturing): (?:pattern) — группа используется только для применения квантификатора, но не запоминается.

Обратная ссылка \1 ссылается на текст, совпавший с первой группой.

let htmlTagExample = "<div>Текст внутри</div>";
let findDoubleTag = /<([a-z]+)>.*<\/\1>/; // \1 означает то же имя, что и в первой группе

console.log(findDoubleTag.test(htmlTagExample)); // true
console.log(htmlTagExample.match(findDoubleTag)[1]); // "div"

1. Жадный режим: квантификатор старается захватить максимально длинную строку, подходящую под условие.
2. Ленивый режим: добавляем ? после квантификатора, и движок останавливается на первом же совпадении.

let textWithQuotes = "Метка: \"красный\" и \"большой\".";
let greedyPattern = /".*"/g; // Найдет "красный" и "большой" как одну строку
let lazyPattern = /".*?"/g;  // Найдет "красный" и "большой" отдельно

console.log(textWithQuotes.match(greedyPattern)); // ["\"красный\" и \"большой\""]
console.log(textWithQuotes.match(lazyPattern));   // ["\"красный\"", "\"большой\""]

Флаги регулярных выражений бывают следующих типов:

1. g (global): продолжает поиск после первого совпадения, возвращая все результаты.
2. i (ignore case): игнорирует регистр символов.
3. m (multiline): меняет поведение ^ и $ так, что они работают не только с началом/концом всей строки, но и с началом/концом каждой строки внутри текста.
4. s (dotAll): позволяет точке . находить символ перевода строки.
5. u (unicode): включает полную поддержку юникода.
6. y (sticky): поиск ведется строго с текущей позиции, заданной свойством lastIndex.

let multiLineText = `Первый ряд
второй ряд
третий ряд`;

// Ищем строки, начинающиеся со слова "второй"
let startWithWord = /^второй/gm;
console.log(multiLineText.match(startWithWord)); // ["второй"]

Без флага m это выражение ничего бы не нашло, так как ^ смотрит только на начало всего текста «Первый ряд…», а не на начало второй строки.

Методы строк (String)

str.search(regexp) : возвращает индекс первого совпадения или -1.

let userComment = "Ошибка: файл не найден. Код: 0xAF3";
let errorCodeIndex = userComment.search(/0x[A-F0-9]+/);
console.log(errorCodeIndex); // Индекс начала "0xAF3"

str.match(regexp) : возвращает массив совпадений. Без флага g вернет детальную информацию (группы, индекс).

let invoiceData = "Сумма: 1500р, Скидка: 200р";
let amounts = invoiceData.match(/\d+(?=р)/g); // Ищем цифры перед "р"
console.log(amounts); // ["1500", "200"]

str.replace(regexp, newSubstr) : заменяет совпадения. Очень мощный инструмент.

let secretMessage = "Мой номер: 123-45-67";
let hiddenNumber = secretMessage.replace(/\d/g, "*");
console.log(hiddenNumber); // "Мой номер: ***-**-**"

str.split(regexp) : разбивает строку по разделителю.

let csvLine = "яблоко;груша;слива;апельсин";
let fruits = csvLine.split(/;\s*/); // Разделитель: точка с запятой и возможный пробел
console.log(fruits); // ["яблоко", "груша", "слива", "апельсин"]

Методы RegExp

regexp.test(str) : самый быстрый метод. Проверяет, есть ли совпадение, возвращает true/false. Идеален для валидации.

let userEnteredIp = "192.168.0.1";
let ipPattern = /^(\d{1,3}\.){3}\d{1,3}$/;
if (ipPattern.test(userEnteredIp)) {
    console.log("Формат IP корректен");
}

regexp.exec(str) : продвинутый метод. При использовании с флагом g позволяет организовать итеративный поиск, запоминая позицию lastIndex.

Кроме начала и конца строки, существует понятие границы слова \b. Это не символ, а место между символом из \w и не из \w (или началом/концом строки).

let zooStory = "У нас есть кот и скунс. Коттедж пустует.";
let findExactCat = /\bкот\b/gi; // \b гарантирует, что это отдельное слово

console.log(zooStory.replace(findExactCat, "пёс"));
// Результат: "У нас есть пёс и скунс. Коттедж пустует."

• x(?=y) — позитивный опережающий поиск: найти x, только если за ним следует y.
• x(?!y) — негативный опережающий поиск: найти x, только если за ним НЕ следует y.
• (?<=y)x — позитивный ретроспективный поиск: найти x, только если перед ним y.
• (?<!y)x — негативный ретроспективный поиск: найти x, только если перед ним НЕ y.

let priceList = "Цена: 25€, старая цена: 30$";
let findEuroPrices = /\d+(?=€)/g; // Ищем цифры, перед которыми стоит €
let findDollarPrices = /(?<=\$)\d+/g; // Ищем цифры, после которых идет $ (ретроспектива)

console.log(priceList.match(findEuroPrices)); // ["25"]
console.log(priceList.match(findDollarPrices)); // ["30"]

Валидация email

Не пытайтесь написать идеальный regexp для email (это почти невозможно).

let checkEmailSimple = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(checkEmailSimple.test("support@example.co.uk")); // true (домен .co.uk пройдет, так как есть точка)

Валидация номера телефона (РФ, простой формат)

let phoneInput = "+7(123)456-78-90";
let phonePattern = /^\+7\(\d{3}\)\d{3}-\d{2}-\d{2}$/;
console.log(phonePattern.test(phoneInput)); // true

Извлечение параметров из URL

function obtainQueryValue(requiredField, urlToParse) {
    let urlObject = new URL(urlToParse);
    let searchParams = new URLSearchParams(urlObject.search);
    return searchParams.get(requiredField);
}

let sampleLink = "https://store.online/catalog?search=iphone&sort=price_asc&page=3&inStock=1";
console.log("Поисковый запрос: " + obtainQueryValue("search", sampleLink));
console.log("Сортировка: " + obtainQueryValue("sort", sampleLink));
console.log("Страница: " + obtainQueryValue("page", sampleLink));

Главная проблема — «катастрофический возврат». Он возникает, когда вложенные квантификаторы ((a+)+) заставляют движок перебирать миллионы комбинаций, чтобы понять, что строка не подходит.

Советы по оптимизации

• Избегайте излишней вложенности квантификаторов.
• Конкретизируйте классы: \d работает быстрее, чем [0-9] (хотя разница мала), но [0-9] читабельнее.
• Используйте атомарные группы и lookahead для обрыва ненужных проверок в сложных случаях.
• Если нужно просто проверить наличие символа (true/false), используйте regexp.test(), а не str.match(), так как test работает быстрее.

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

Впрочем, иногда проще делегировать. Если вам нужен готовый сайт с чистым кодом и идеальной валидацией форм, но нет времени погружаться в детали — доверьте это нам. Наша веб-студия создаст для вас современный, быстрый и надежный проект, чтобы вы могли сосредоточиться на бизнесе, а не на написании regexp.