Сопоставление с образцом в JavaScript с помощью регулярных выражений: полное руководство

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

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

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

• Валидация данных: Проверка того, что пользовательский ввод соответствует определенным форматам (например, адреса электронной почты, номера телефонов).
• Извлечение данных: Получение конкретной информации из текста (например, извлечение дат, URL-адресов или цен).
• Поиск и замена: Нахождение и замена текста на основе сложных шаблонов.
• Обработка текста: Разделение, объединение или преобразование строк на основе определенных правил.

Создание регулярных выражений в JavaScript

В JavaScript регулярные выражения можно создавать двумя способами:

1. Используя литерал регулярного выражения: Заключить шаблон в косые черты (/).
2. Используя конструктор RegExp: Создать объект RegExp с шаблоном в виде строки.

Пример:

// Используя литерал регулярного выражения
const regexLiteral = /hello/;

// Используя конструктор RegExp
const regexConstructor = new RegExp("hello");

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

Базовый синтаксис Regex

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

• Литеральные символы: Соответствуют самим символам (например, /a/ соответствует символу 'a').
• Метасимволы: Имеют специальное значение (например, ., ^, $, *, +, ?, [], {}, (), \, |).
• Символьные классы: Представляют наборы символов (например, [abc] соответствует 'a', 'b' или 'c').
• Квантификаторы: Указывают, сколько раз должен встречаться символ или группа (например, *, +, ?, {n}, {n,}, {n,m}).
• Якоря: Соответствуют позициям в строке (например, ^ соответствует началу, $ — концу).

Основные метасимволы:

• . (точка): Соответствует любому одиночному символу, кроме новой строки.
• ^ (карет): Соответствует началу строки.
• $ (доллар): Соответствует концу строки.
• * (звездочка): Соответствует нулю или более вхождений предыдущего символа или группы.
• + (плюс): Соответствует одному или более вхождений предыдущего символа или группы.
• ? (вопросительный знак): Соответствует нулю или одному вхождению предыдущего символа или группы. Используется для необязательных символов.
• [] (квадратные скобки): Определяет символьный класс, соответствующий любому одиночному символу внутри скобок.
• {} (фигурные скобки): Указывает количество вхождений для сопоставления. {n} соответствует ровно n раз, {n,} — n или более раз, {n,m} — от n до m раз.
• () (круглые скобки): Группирует символы вместе и захватывает совпавшую подстроку.
• \ (обратная косая черта): Экранирует метасимволы, позволяя вам сопоставлять их буквально.
• | (вертикальная черта): Действует как оператор «или», сопоставляя либо выражение до, либо после него.

Символьные классы:

• [abc]: Соответствует любому из символов a, b или c.
• [^abc]: Соответствует любому символу, который *не* является a, b или c.
• [a-z]: Соответствует любой строчной букве от a до z.
• [A-Z]: Соответствует любой прописной букве от A до Z.
• [0-9]: Соответствует любой цифре от 0 до 9.
• [a-zA-Z0-9]: Соответствует любому буквенно-цифровому символу.
• \d: Соответствует любой цифре (эквивалентно [0-9]).
• \D: Соответствует любому нецифровому символу (эквивалентно [^0-9]).
• \w: Соответствует любому «словесному» символу (буквенно-цифровому символу плюс подчеркивание; эквивалентно [a-zA-Z0-9_]).
• \W: Соответствует любому «несловесному» символу (эквивалентно [^a-zA-Z0-9_]).
• \s: Соответствует любому пробельному символу (пробел, табуляция, новая строка и т.д.).
• \S: Соответствует любому непробельному символу.

Квантификаторы:

• *: Соответствует предыдущему элементу ноль или более раз. Например, a* соответствует "", "a", "aa", "aaa" и так далее.
• +: Соответствует предыдущему элементу один или более раз. Например, a+ соответствует "a", "aa", "aaa", но не "".
• ?: Соответствует предыдущему элементу ноль или один раз. Например, a? соответствует "" или "a".
• {n}: Соответствует предыдущему элементу ровно *n* раз. Например, a{3} соответствует "aaa".
• {n,}: Соответствует предыдущему элементу *n* или более раз. Например, a{2,} соответствует "aa", "aaa", "aaaa" и так далее.
• {n,m}: Соответствует предыдущему элементу от *n* до *m* раз (включительно). Например, a{2,4} соответствует "aa", "aaa" или "aaaa".

Якоря:

• ^: Соответствует началу строки. Например, ^Hello соответствует строкам, которые *начинаются* с "Hello".
• $: Соответствует концу строки. Например, World$ соответствует строкам, которые *заканчиваются* на "World".
• \b: Соответствует границе слова. Это позиция между словесным символом (\w) и несловесным символом (\W) или началом или концом строки. Например, \bword\b соответствует целому слову "word".

Флаги:

Флаги Regex изменяют поведение регулярных выражений. Они добавляются в конец литерала regex или передаются в качестве второго аргумента конструктору RegExp.

• g (global): Сопоставляет все вхождения шаблона, а не только первое.
• i (ignore case): Выполняет сопоставление без учета регистра.
• m (multiline): Включает многострочный режим, в котором ^ и $ соответствуют началу и концу каждой строки (разделенной \n).
• s (dotAll): Позволяет точке (.) соответствовать также символам новой строки.
• u (unicode): Включает полную поддержку Unicode.
• y (sticky): Сопоставляет только с индекса, указанного свойством lastIndex регулярного выражения.

Методы Regex в JavaScript

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

• test(): Проверяет, соответствует ли строка шаблону. Возвращает true или false.
• exec(): Выполняет поиск совпадения в строке. Возвращает массив, содержащий совпавший текст и захваченные группы, или null, если совпадение не найдено.
• match(): Возвращает массив, содержащий результаты сопоставления строки с регулярным выражением. Ведет себя по-разному с флагом g и без него.
• search(): Проверяет наличие совпадения в строке. Возвращает индекс первого совпадения или -1, если совпадение не найдено.
• replace(): Заменяет вхождения шаблона строкой замены или функцией, возвращающей строку замены.
• split(): Разделяет строку на массив подстрок на основе регулярного выражения.

Примеры использования методов Regex:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Вывод: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Вывод: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() с флагом 'g'
const regex3 = /\d+/g; // Находит одну или более цифр глобально
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Вывод: ["123", "456"]

// match() без флага 'g'
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Вывод: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Вывод: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Вывод: hello JavaScript

// replace() с функцией
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Вывод: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // Вывод: ["apple", "banana", "cherry"]

Продвинутые техники Regex

Захватывающие группы:

Круглые скобки () используются для создания захватывающих групп в регулярных выражениях. Захваченные группы позволяют извлекать определенные части совпавшего текста. Методы exec() и match() возвращают массив, где первый элемент — это все совпадение, а последующие элементы — это захваченные группы.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Вывод: 2023-10-27 (Полное совпадение)
console.log(match[1]); // Вывод: 2023 (Первая захваченная группа - год)
console.log(match[2]); // Вывод: 10 (Вторая захваченная группа - месяц)
console.log(match[3]); // Вывод: 27 (Третья захваченная группа - день)

Именованные захватывающие группы:

ES2018 ввел именованные захватывающие группы, которые позволяют присваивать имена захватывающим группам с помощью синтаксиса (?...). Это делает код более читабельным и поддерживаемым.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Вывод: 2023
console.log(match.groups.month); // Вывод: 10
console.log(match.groups.day);   // Вывод: 27

Незахватывающие группы:

Если вам нужно сгруппировать части регулярного выражения, не захватывая их (например, для применения квантификатора к группе), вы можете использовать незахватывающую группу с синтаксисом (?:...). Это позволяет избежать ненужного выделения памяти для захваченных групп.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Соответствует URL, но захватывает только доменное имя
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Вывод: www.example.com

Просмотры (Lookarounds):

Просмотры — это утверждения нулевой ширины, которые соответствуют позиции в строке на основе шаблона, который предшествует (просмотр назад) или следует (просмотр вперед) этой позиции, не включая сам шаблон просмотра в совпадение.

• Позитивный просмотр вперед: (?=...) Совпадает, если шаблон внутри просмотра *следует* за текущей позицией.
• Негативный просмотр вперед: (?!...) Совпадает, если шаблон внутри просмотра *не следует* за текущей позицией.
• Позитивный просмотр назад: (?<=...) Совпадает, если шаблон внутри просмотра *предшествует* текущей позиции.
• Негативный просмотр назад: (? Совпадает, если шаблон внутри просмотра *не предшествует* текущей позиции.

// Позитивный просмотр вперед: получить цену, только если за ней следует USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Вывод: ["100"]

// Негативный просмотр вперед: получить слово, только если за ним не следует число
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Вывод: null, потому что match() возвращает только первое совпадение без флага 'g', что нам не нужно.
// чтобы это исправить:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Вывод: [ 'banana' ]

// Позитивный просмотр назад: получить значение, только если ему предшествует $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Вывод: ["200"]

// Негативный просмотр назад: получить слово, только если ему не предшествует слово 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Вывод: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Вывод: true
console.log(emailRegex.test("invalid-email"));       // Вывод: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Вывод: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // Вывод: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //Исправленный CSV regex
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Вывод: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Вывод: true (Пример для США)
console.log(phoneRegex.test("+44 20 7946 0500")); // Вывод: true (Пример для Великобритании)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Вывод: true (Пример для Японии)
console.log(phoneRegex.test("123-456-7890"));   // Вывод: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Вывод: true
console.log(passwordRegex.test("password"));       // Вывод: false (нет прописной буквы или цифры)
console.log(passwordRegex.test("Password"));       // Вывод: false (нет цифры)
console.log(passwordRegex.test("Pass123"));        // Вывод: false (нет строчной буквы)
console.log(passwordRegex.test("P@ss1"));          // Вывод: false (менее 8 символов)