68. Regex Patterns

JavaScript: Мозги. Regex Patterns

Регулярные выражения (Regex) – это мощный инструмент для поиска и манипулирования текстом. Они позволяют описывать шаблоны, которым должен соответствовать текст, чтобы его можно было найти, заменить или проверить.

Что такое Regex?

Regex, или регулярные выражения, – это последовательность символов, определяющая шаблон поиска. Представьте, что у вас есть лупа, которая ищет конкретные слова или структуры в огромном тексте. Regex – это инструкция для этой лупы.

Пример:

const text = "Hello world! Hello JavaScript!";
const pattern = /Hello/; // Простейший regex, ищет слово "Hello"

const result = text.match(pattern);
console.log(result); // Вывод: [ 'Hello', index: 0, input: 'Hello world! Hello JavaScript!', groups: undefined ]

В этом примере pattern – это регулярное выражение, которое ищет слово “Hello”. Метод match() возвращает массив с информацией о найденном совпадении (если оно есть).

Основные элементы Regex

• Литералы: Обычные символы, которые ищутся буквально (например, a, b, 1, 2).
• Метасимволы: Специальные символы, имеющие особое значение (например, ., *, +, ?, ^, $).
• Квантификаторы: Указывают, сколько раз должен повториться предыдущий символ или группа символов (например, *, +, ?, {n}, {n,}, {n,m}).
• Символьные классы: Определяют набор символов, которые могут соответствовать (например, [abc], [^abc], \d, \w, \s).
• Якоря: Указывают позицию, в которой должен находиться шаблон (например, ^ – начало строки, $ – конец строки).

Примеры с метасимволами и квантификаторами:

const text = "abc123def456ghi";

// . (точка) - любой символ (кроме переноса строки)
const pattern1 = /a.c/; // Ищет "a", любой символ, затем "c"
console.log(text.match(pattern1)); // Вывод: [ 'abc', index: 0, input: 'abc123def456ghi', groups: undefined ]

// + (плюс) - один или более раз
const pattern2 = /\d+/; // Ищет одну или более цифр
console.log(text.match(pattern2)); // Вывод: [ '123', index: 3, input: 'abc123def456ghi', groups: undefined ]

// * (звездочка) - ноль или более раз
const pattern3 = /a\d*c/; // Ищет "a", ноль или более цифр, затем "c"
console.log(text.match(pattern3)); // Вывод: [ 'abc', index: 0, input: 'abc123def456ghi', groups: undefined ]

Практические примеры

// Проверка email
const email = "[email protected]";
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
console.log(emailPattern.test(email)); // Вывод: true

// Поиск всех чисел в строке
const text2 = "There are 123 apples and 456 oranges.";
const numberPattern = /\d+/g; // g - глобальный поиск (все совпадения)
console.log(text2.match(numberPattern)); // Вывод: [ '123', '456' ]

// Замена всех пробелов на подчеркивания
const text3 = "Hello world!  This is a test.";
const spacePattern = /\s+/g;
const replacedText = text3.replace(spacePattern, "_");
console.log(replacedText); // Вывод: Hello_world!_This_is_a_test.

Жизненный пример

Regex широко используются в веб-разработке для:

• Валидации форм: Проверка правильности введенных данных (email, телефон, пароль и т.д.). Например, jQuery Validation плагин активно использует regex.
• Поиска и замены текста: В текстовых редакторах, IDE, и при обработке данных на сервере. Многие JavaScript фреймворки (React, Angular, Vue) используют regex для обработки строк и шаблонов.
• Парсинга URL: Извлечение информации из URL-адресов. Например, для определения маршрута в SPA (Single Page Application).
• Анализа логов: Поиск определенных событий или ошибок в файлах логов.

Ключевые моменты

• Regex – это мощный инструмент, но может быть сложным для понимания на первый взгляд.
• Тестируйте свои regex на онлайн-сервисах (например, regex101.com) для проверки их корректности.
• Используйте комментарии в коде, чтобы объяснить, что делает каждый regex.
• Не бойтесь разбивать сложные regex на более простые.
• Помните о производительности – сложные regex могут замедлять работу вашего приложения.

Интерактивный пример