Регулярные выражения в TypeScript: полное руководство с примерами

Введение в регулярные выражения в TypeScript

Регулярные выражения (regex) — мощный инструмент для поиска, замены и валидации строк. В TypeScript, как и в JavaScript, они реализованы через встроенный объект RegExp. Однако TypeScript добавляет строгую типизацию, что делает работу с регулярными выражениями более безопасной и предсказуемой. В этой статье мы разберём синтаксис, методы, типизацию и практические примеры использования регулярных выражений в TypeScript.

Что такое регулярное выражение?

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

• Литеральный синтаксис: const regex: RegExp = /\d+/g;
• Конструктор RegExp: const regex: RegExp = new RegExp('\\d+', 'g');

Второй способ полезен, когда шаблон динамически формируется из переменных.

Основные методы работы с регулярными выражениями в TypeScript

1. Метод test() — проверка наличия совпадения

Метод test() возвращает boolean — есть ли совпадение в строке.

const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const email: string = 'user@example.com';

if (emailRegex.test(email)) {
  console.log('Email корректен');
} else {
  console.log('Email некорректен');
}
// Вывод: Email корректен

2. Метод exec() — получение деталей совпадения

Метод exec() возвращает объект RegExpExecArray | null. Он содержит совпадение, группы захвата и позицию в строке.

const dateRegex: RegExp = /(\d{2})\.(\d{2})\.(\d{4})/;
const dateString: string = 'Дата: 15.03.2023';
const match: RegExpExecArray | null = dateRegex.exec(dateString);

if (match) {
  console.log(`День: ${match[1]}, Месяц: ${match[2]}, Год: ${match[3]}`);
  // Вывод: День: 15, Месяц: 03, Год: 2023
}

3. Метод match() — поиск всех совпадений в строке

Метод строки match() принимает регулярное выражение и возвращает массив совпадений или null.

const text: string = 'Коты и кошки — лучшие!';
const catRegex: RegExp = /ко[тш]ки?/gi;
const matches: RegExpMatchArray | null = text.match(catRegex);

if (matches) {
  console.log(matches); // ['Коты', 'кошки']
}

4. Метод replace() — замена по шаблону

Метод replace() заменяет совпадения на указанную строку или результат функции.

const phone: string = '+7 (123) 456-78-90';
const cleanPhone: string = phone.replace(/[\s\-\(\)\+]/g, '');
console.log(cleanPhone); // 71234567890

// Замена с использованием групп захвата
const name: string = 'Иванов Иван';
const reversed: string = name.replace(/(\w+)\s(\w+)/, '$2 $1');
console.log(reversed); // Иван Иванов

5. Метод split() — разбиение строки

Регулярное выражение можно использовать для разделения строки на части.

const data: string = 'яблоко;груша,апельсин:банан';
const fruits: string[] = data.split(/[;,.:]/);
console.log(fruits); // ['яблоко', 'груша', 'апельсин', 'банан']

Типизация регулярных выражений в TypeScript

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

// Явное указание типа
const hexColor: RegExp = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;

// Типизация для функции, возвращающей RegExp
function createUrlRegex(baseUrl: string): RegExp {
  return new RegExp(`^${baseUrl}/[a-z]+$`, 'i');
}

const myRegex: RegExp = createUrlRegex('https://example.com');
console.log(myRegex.test('https://example.com/about')); // true

Работа с группами захвата и типизация результатов

При использовании exec() или match() TypeScript ожидает RegExpExecArray | null. Для удобства можно создать вспомогательную функцию с дженериками:

function extractGroups<T extends Record<string, string>>(
  regex: RegExp,
  str: string,
  groupNames: (keyof T)[]
): T | null {
  const match = regex.exec(str);
  if (!match) return null;
  
  const result = {} as T;
  groupNames.forEach((name, index) => {
    result[name] = match[index + 1] || '';
  });
  return result;
}

// Пример использования
const userRegex = /(?<name>\w+)\s(?<age>\d+)/;
const userStr = 'Анна 25';
const groups = extractGroups(userRegex, userStr, ['name', 'age']);
console.log(groups); // { name: 'Анна', age: '25' }

Практические примеры регулярных выражений в TypeScript

Пример 1: Валидация email

function validateEmail(email: string): boolean {
  const emailRegex: RegExp = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailRegex.test(email);
}

console.log(validateEmail('test@test.com')); // true
console.log(validateEmail('invalid-email')); // false

Пример 2: Извлечение URL из текста

function extractUrls(text: string): string[] {
  const urlRegex: RegExp = /https?:\/\/[^\s]+/g;
  return text.match(urlRegex) || [];
}

const text = 'Посетите https://example.com и http://test.ru';
console.log(extractUrls(text)); // ['https://example.com', 'http://test.ru']

Пример 3: Проверка сложности пароля

interface PasswordStrength {
  isValid: boolean;
  errors: string[];
}

function checkPasswordStrength