Динамическое создание объектов RegExp
-
Кто пытался освоить динамическое создание объектов RegExp в JavaScript тот поймет. Баля, это оказалось не так просто, как казалось на первый взгляд! Но давайте по порядку. Сукпздц, сколько всего интересного я узнал, пока разбирался с этой темой.
Что такое RegExp?
Для тех, кто в танке:
RegExp
(или регулярные выражения) — это мощный инструмент для работы со строками. С их помощью можно искать, заменять, проверять и извлекать данные из текста. Но что делать, если шаблон для поиска нужно создавать динамически? Тут-то всё и начинается… 🤯
Литералы vs Конструкторы
В JavaScript есть два способа создания регулярных выражений:
- Литералы:
const regex = /шаблон/;
- Конструктор
RegExp
:
const regex = new RegExp("шаблон");
Если шаблон статический, то литералы — это то, что нужно. Но если шаблон зависит от переменной или вводится пользователем, то без конструктора никуда. Вот тут-то и начинаются приключения.
Динамическое создание шаблона
Представьте, что у нас есть массив слов, и мы хотим найти их в тексте. Вот как это можно сделать:
const words = ["JavaScript", "RegEx", "динамический"]; const text = "Я изучаю JavaScript и RegExp, это сукпздц сложно!"; // Создаем динамическое регулярное выражение const pattern = words.join("|"); // "JavaScript|RegEx|динамический" const regex = new RegExp(pattern, "gi"); // Ищем совпадения const matches = text.match(regex); console.log(matches); // ["JavaScript", "RegEx"]
Это же целая магия! Мы используем
replace
с регулярным выражением, чтобы добавить обратный слэш\
перед каждым спецсимволом. Теперь всё работает как надо.
Добавляем флаги динамически
А что, если флаги тоже должны быть динамическими? Например, пользователь может выбрать, нужно ли игнорировать регистр или искать глобально. Вот как это можно реализовать:
function createRegex(pattern, flags = "") { return new RegExp(pattern, flags); } const dynamicPattern = "JavaScript"; const dynamicFlags = "gi"; // Пользователь выбрал глобальный поиск и игнорирование регистра const regex = createRegex(dynamicPattern, dynamicFlags); const text = "javascript is awesome, JavaScript is powerful!"; console.log(text.match(regex)); // ["javascript", "JavaScript"]
Удобно, правда? Теперь можно легко управлять как шаблоном, так и флагами.
Регулярки для валидации
А теперь давайте решим реальную задачу: напишем функцию, которая проверяет, соответствует ли строка динамическому шаблону. Например, валидация email:
function validateString(input, pattern) { const regex = new RegExp(pattern); return regex.test(input); } const emailPattern = "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$"; const email = "test@example.com"; console.log(validateString(email, emailPattern)); // true console.log(validateString("invalid-email", emailPattern)); // false
Эта функция принимает строку и шаблон, а затем проверяет, соответствует ли строка шаблону. Как же это полезно!
Работа с динамическими регулярными выражениями — это, конечно, не для слабонервных. Но, как же круто, когда ты можешь создавать шаблоны “на лету”! Главное — не забывать про экранирование спецсимволов и правильно использовать флаги.