Динамическое создание объектов RegExp

kirilljsx

Кто пытался освоить динамическое создание объектов 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

Эта функция принимает строку и шаблон, а затем проверяет, соответствует ли строка шаблону. Как же это полезно!

Работа с динамическими регулярными выражениями — это, конечно, не для слабонервных. Но, как же круто, когда ты можешь создавать шаблоны “на лету”! Главное — не забывать про экранирование спецсимволов и правильно использовать флаги.