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

hannadev

Регулярные выражения в JavaScript - мощный инструмент для поиска и обработки текста. Часто нужно динамически подставлять переменные в паттерны, чтобы делать код гибким. Это решает проблемы с жестко заданными шаблонами, когда данные приходят извне.

Без переменных приходится хардкодить каждый regex, что неудобно в реальных проектах. С переменными вы легко ищете email, URL или любые строки по условию пользователя. Давайте разберем, как это работает на практике.

Два основных способа создания RegExp

В JavaScript регулярные выражения создаются литералами или конструктором RegExp. Литералы подходят для статичных паттернов, они компилируются заранее и быстрее. Но для переменных нужен динамический подход через конструктор.

new RegExp() принимает строку с паттерном и флаги отдельно. Это позволяет вставлять переменные прямо в шаблон. Например, если у вас есть строка userInput = ‘test’, то RegExp(userInput) создаст поиск по ‘test’. Без конструктора литерал /test/ жестко зафиксирован.

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

Литерал для статики: var re = /test/i; - быстро, но без переменных.
Конструктор для динамики: var re = new RegExp('test', 'i'); - вставляем userInput вместо ‘test’.
Экранирование: используйте userInput.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), чтобы спецсимволы не сломали regex.

Способ	Пример	Когда использовать
Литерал	`/test/i`	Фиксированный паттерн
Конструктор	`new RegExp(var, 'i')`	Динамика с переменной

Практические примеры вставки переменной

Допустим, пользователь вводит слово для поиска в тексте. Без переменной код негибкий, приходится переписывать. С конструктором RegExp шаблон строится на лету из input.

Представьте поиск email по домену из переменной: let domain = 'gmail.com'; let re = new RegExp(domain + '$', 'i');. Это найдет адреса, заканчивающиеся на gmail.com. Работает с str.match(re) или str.replace(re, '***').

Валидация форм - типичный кейс. Переменная patternUser задает маску телефона, RegExp интегрирует ее динамически. Без этого пришлось бы if-else для каждого сценария.

Поиск по userInput:

let input = 'кот';
let re = new RegExp(input, 'gi');
let text = 'Кот в мешке, котлеты.';
console.log(text.match(re)); // ['Кот', 'кот']

Валидация с маской:

let mask = '^\\d{' + length + '}$';
let re = new RegExp(mask);
re.test('12345'); // true, если length=5

Нюанс: всегда экранируйте! let safe = input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

Задача	Переменная	RegExp
Поиск слова	‘кот’	`new RegExp('кот', 'gi')`
Email домен	‘yandex.ru’	`new RegExp(domain + '$')`
Телефон	‘^\d{10}$’	`new RegExp('^\\d{' + 10 + '}$')`

Флаги и продвинутые опции с переменными

Флаги вроде g, i, m передаются второй строкой в RegExp. С переменными удобно менять поведение: new RegExp(pattern, flagsVar). Это позволяет переключать глобальный поиск динамически.

Например, переменная isGlobal управляет флагами. Если true - добавляем ‘g’. Без этого литералы негибкие. В проектах с API флаги тоже приходят извне.

Важно: флаги в строке, не внутри паттерна. Комбинируйте: ‘gi’ для нечувствительного глобального поиска. Тестируйте на edge-кейсах вроде пустой строки.

Динамические флаги:

let flags = isCaseInsensitive ? 'i' : '';
flags += globalSearch ? 'g' : '';
let re = new RegExp(pattern, flags);

Многострочный режим: добавьте ‘m’ для ^ и $ на строках.
Проблема: повторное создание RegExp замедляет - кэшируйте по ключу pattern+flags.

Флаг	Описание	Пример с var
i	Игнор регистра	`new RegExp(pat, 'i')`
g	Глобальный	`new RegExp(pat, 'g')`
m	Многострочный	`new RegExp(pat, 'gm')`

Методы работы с динамическим RegExp

После создания используйте match, replace, test. С переменными они идеальны для поиска, замены, валидации. Например, replace с callback’ом меняет найденное по логике.

str.match(re) возвращает массив ��овпадений. С ‘g’ - все вхождения. Test() - булево для проверок форм. Заменяйте осторожно, экранируя группы.

В реальных задачах: очистка логов, парсинг JSON-подобных строк. Переменные делают универсальным инструмент.

match: text.match(re) - массив или null.
replace: text.replace(re, 'замена') - строка.
test: re.test(text) - true/false.
Совет: для групп используйте matchAll в ES2020+.

Метод	Возврат	С переменной
match	Массив	`text.match(new RegExp(var))`
replace	Строка	`text.replace(re, fn)`
test	Boolean	`re.test(input)`

Частые ошибки и как их обходить

Часто спецсимволы в переменной ломают RegExp - экранируйте заранее. Пустая строка создает /^$/, матчит все. Флаги дублируйте внимательно.

Повторное создание RegExp без кэша жрет производительность в циклах. Храните в Map: ключ - pattern+flags.

Безопасность: userInput не экранировать - XSS в replace. Всегда валидируйте вход.

Экранирование: var safePat = input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
Кэш: const cache = new Map(); re = cache.get(key) || (cache.set(key, new RegExp(pat, flags)), cache.get(key));
Нюанс: RegExp.lastIndex с ‘g’ сбрасывайте вручную.

Ошибка	Решение	Пример
Спецсимволы	Экранировать	`replace(/[...]/g, '\\$&')`
Медленный цикл	Кэшировать	Map по паттерну
Пустой паттерн	Проверка if	`if (!pat) return null;`

Тонкости динамических шаблонов на практике

С переменными RegExp открывает двери для конфигов из JSON или API. Остается углубиться в группы захвата, lookahead и производительность на больших текстах. Подумайте о polyfill для старых браузеров и интеграции с фреймворками вроде React, где state управляет паттернами.