Шаблоны и флаги регулярных выражений в JavaScript

Введение в шаблоны и флаги JavaScript

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

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

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

1. Литерал регулярного выражения — записывается между слешами, флаги указываются после закрывающего слеша. Движок компилирует его один раз при загрузке скрипта, поэтому это самая быстрая и распространённая форма:

2. Конструктор new RegExp() — принимает шаблон в виде строки и флаги в виде второго строкового аргумента. Используйте его, когда шаблон формируется во время выполнения (например, из пользовательского ввода), поскольку литерал не может содержать переменные.

Список распространённых шаблонов

Ниже приведены часто используемые шаблоны:

• \w: Соответствует любому словесному символу (буквенно-цифровому символу или знаку подчёркивания). Эквивалент [a-zA-Z0-9_].
• \W: Соответствует любому не-словесному символу. Эквивалент [^a-zA-Z0-9_].
• \d: Соответствует любой цифре. Эквивалент [0-9].
• \D: Соответствует любому нецифровому символу. Эквивалент [^0-9].
• \s: Соответствует любому пробельному символу (пробелы, табуляция, переносы строк).
• \S: Соответствует любому непробельному символу. Эквивалент [^\s].
• .: Соответствует любому символу, кроме символа новой строки (\n).
• ^: Утверждает позицию в начале строки.
• $: Утверждает позицию в конце строки.
• \b: Соответствует границе слова (позиция между словесным и не-словесным символом).
• \B: Соответствует позиции, которая не является границей слова.
• \t: Соответствует символу табуляции.
• \n: Соответствует символу новой строки.
• \r: Соответствует символу возврата каретки.
• \\: Соответствует буквальному обратному слешу.
• \f: Соответствует символу перевода страницы.
• \v: Соответствует символу вертикальной табуляции.
• [abc]: Соответствует любому одному символу в скобках.
• [^abc]: Соответствует любому одному символу, не указанному в скобках.
• a|b: Соответствует либо a, либо b.
• (abc): Соответствует точной последовательности abc.
• a?: Соответствует a ноль или один раз.
• a*: Соответствует a ноль или более раз.
• a+: Соответствует a один или более раз.
• a{3}: Соответствует ровно 3 вхождениям a.
• a{3,}: Соответствует 3 или более вхождениям a.
• a{3,5}: Соответствует от 3 до 5 вхождений a.
• (?i): Не поддерживается в JavaScript. Используйте флаг i.
• (?:...): Не захватывающая группа.
• (?=...): Утверждение позитивного просмотра вперёд.
• (?!...): Утверждение негативного просмотра вперёд.
• (?<=...): Утверждение позитивного просмотра назад.
• (?<!...): Утверждение негативного просмотра назад.

Понимание шаблонов

Шаблон регулярного выражения заключён между слешами (/шаблон/флаги).

Пример: /H.llo/g

• Шаблон: H.llo соответствует любой строке, начинающейся с 'H', за которой следует любой одиночный символ (.), и заканчивающейся на 'llo'.
• Флаг: g означает глобальный поиск.
• Квантификатор: . соответствует ровно одному символу.

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

Рассмотрим несколько примеров:

Пример 1:

1. Шаблон: \d+ соответствует одному или нескольким цифровым символам (\d+).
2. Флаг: g означает глобальный поиск.
3. Квантификатор: + соответствует одному или нескольким вхождениям предшествующего элемента (\d).

Пример 2:

1. Шаблон: \D+ соответствует одному или нескольким нецифровым символам (\D+).
2. Флаг: g означает глобальный поиск.
3. Квантификатор: + соответствует одному или нескольким вхождениям предшествующего элемента (\D).

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

Квантификаторы определяют, сколько экземпляров символа, группы или класса символов должно присутствовать во входных данных для нахождения совпадения. Ниже приведены часто используемые квантификаторы с примерами:

• + — соответствует одному или нескольким вхождениям предшествующего элемента.

Этот шаблон соответствует последовательностям из одной или нескольких цифр.

• * — соответствует нулю или нескольким вхождениям предшествующего элемента.

Этот шаблон соответствует последовательностям из нуля или нескольких словесных символов.

• ? — соответствует нулю или одному вхождению предшествующего элемента.

Этот шаблон соответствует 'color' или 'colour'.

• {n} — соответствует ровно n вхождениям предшествующего элемента.

Этот шаблон соответствует ровно трём цифрам.

• {n,} — соответствует n или более вхождениям предшествующего элемента.

Этот шаблон соответствует последовательностям из двух или более цифр.

• {n,m} — соответствует от n до m вхождений предшествующего элемента.

Этот шаблон соответствует последовательностям от двух до трёх цифр.

Флаги

Флаги — это необязательные параметры, изменяющие способ применения шаблона. Их можно комбинировать в любом порядке (например, /abc/gi). Вот полный список:

Флаг	Название	Действие
g	Глобальный	Находит все совпадения, а не только первое.
i	Без учёта регистра	Поиск без различия верхнего/нижнего регистра.
m	Многострочный	^ и $ соответствуют началу/концу каждой строки.
s	DotAll	. также соответствует символам новой строки.
u	Unicode	Обрабатывает шаблон как кодовые точки Unicode; включает \u{...} и \p{...}.
y	Липкий	Поиск только с позиции, указанной свойством lastIndex.
d	Индексы	Добавляет indices (начальные/конечные позиции) к результатам поиска.

В разделах ниже каждый флаг демонстрируется по очереди:

• g — глобальный поиск.

Этот флаг позволяет находить все совпадения в строке.

• i — поиск без учёта регистра.

Этот флаг делает поиск нечувствительным к регистру.

• m — многострочный поиск.

Этот флаг позволяет ^ и $ соответствовать началу и концу каждой строки в тексте.

• s — позволяет . соответствовать символам новой строки (также известен как флаг dotAll).

Этот флаг позволяет точке . также соответствовать символам новой строки.

• u — «Unicode»; обрабатывает шаблон как последовательность кодовых точек Unicode.

Этот флаг включает полное сопоставление Unicode.

• y — «Липкий»; выполняет поиск только начиная с индекса, указанного свойством lastIndex данного регулярного выражения в целевой строке.

Этот флаг позволяет начинать поиск с определённого индекса в строке. Липкий флаг полезен для токенизаторов и парсеров, которые сканируют строку позиция за позицией — подробнее см. Липкий флаг "y", поиск по позиции.

Проверка шаблонов: regexp.test()

Метод test() проверяет наличие шаблона в строке, возвращая true или false.

Этот код проверяет наличие слова "world" в строке.

Замена текста: str.replace()

Функция replace() позволяет изменять строки, заменяя их части новым текстом.

Этот код заменяет "morning" на "evening".

Замена всех вхождений: str.replaceAll()

Метод replaceAll() заменяет все вхождения шаблона новой строкой.

Этот код заменяет каждую "a" на "o".

Разбивка текста: str.split()

Метод split() делит строку на array подстрок на основе шаблона.

Этот код разбивает строку по каждой запятой.

Поиск в тексте: str.match()

Метод match() извлекает совпадения шаблона в строке — полезен для получения конкретных данных.

Этот код находит все числа в тексте.

Последовательный перебор совпадений: regexp.exec()

Метод exec() возвращает одно совпадение за раз. С флагом g (или y) регулярное выражение запоминает свою позицию в lastIndex, поэтому вызов exec() в цикле перебирает все совпадения — и в отличие от match() с флагом g, каждый результат по-прежнему содержит индекс совпадения и захватывающие группы.

Перебор совпадений: str.matchAll()

matchAll() — это современная, более удобная альтернатива циклу с exec(). Метод возвращает итератор полных объектов совпадений (включая захватывающие группы) и требует флага g.

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

Скобки (...) создают захватывающую группу, открывая доступ к части совпадения для повторного использования. Группы также можно именовать с помощью (?<name>...) и читать из object .groups — это гораздо удобнее числовых индексов.

Синтаксис регулярных выражений в JavaScript

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

Этот шаблон регулярного выражения разбивает URL на составные части:

• ^(\w+): Соответствует любому словесному символу (эквивалент [a-zA-Z0-9_]) в начале — представляет протокол.
• :\/\/: Соответствует буквальной последовательности "://".
• ([\w.-]+): Соответствует одному или нескольким словесным символам, точкам или дефисам — представляет домен.
• \/(\S*)$: Соответствует слешу, за которым следуют любые непробельные символы до конца строки — представляет путь.

Подробнее:

Этот JavaScript-код проверяет, соответствует ли веб-адрес детальному шаблону.

• Задание шаблона: Шаблон структурирован для захвата различных компонентов веб-адреса: протокола (например, "https"), доменного имени (например, "www.w3docs.com") и пути (всего, что идёт после домена).
• Проверка веб-адреса: Код проверяет "https://www.w3docs.com/pathname/?search=test" по этому шаблону.
• Вывод результата: Если веб-адрес соответствует шаблону, код выводит части, соответствующие шаблону.

Ожидаемый результат: Вывод представляет собой array со следующими элементами:

1. Полный веб-адрес: "https://www.w3docs.com/pathname/?search=test".
2. Используемый протокол: "https".
3. Доменное имя: "www.w3docs.com".
4. Путь и строка запроса: "pathname/?search=test".

Практическое применение шаблонов и флагов

Regex используется в различных сценариях для улучшения JavaScript-приложений:

Валидация пользовательского ввода

Regex помогает убедиться, что пользовательский ввод соответствует определённым критериям, что важно для качества данных и безопасности.

Этот код проверяет, состоит ли имя пользователя из 3–16 буквенно-цифровых символов или знаков подчёркивания.

Извлечение информации

Regex позволяет эффективно извлекать конкретную информацию из больших текстов или наборов данных.

Этот JavaScript-код извлекает конкретную информацию из текстовой строки.

• Определение текста: Код начинается со строки data, которая содержит информацию о заказе, включая ID заказа и дату.
• Задание шаблона: Используется шаблон (idPattern) для поиска фразы "Order ID:", за которой следует последовательность цифр. Шаблон предназначен для захвата числовой части сразу после "Order ID:".
• Извлечение ID заказа: Код ищет в строке data совпадение с idPattern. При нахождении совпадения извлекается только числовая часть (без текста "Order ID:"), представляющая ID заказа.
• Отображение результата: Затем ID заказа выводится в консоль.

Заключение

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

Практика