Без переменных приходится хардкодить каждый 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.

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

Допустим, пользователь вводит слово для поиска в тексте. Без переменной код негибкий, приходится переписывать. С конструктором 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, '\\$&');

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

Флаги вроде 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.

Методы работы с динамическим 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+.

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

Часто спецсимволы в переменной ломают 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’ сбрасывайте вручную.

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

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