W3Docs

Тема

Русский

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

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

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

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

Вот некоторые часто используемые шаблоны:

  • \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{3}: Соответствует ровно 3 вхождениям a.
  • a{3,}: Соответствует 3 или более вхождениям a.
  • a{3,5}: Соответствует от 3 до 5 вхождений a.
  • (?i): Не поддерживается в JavaScript. Вместо этого используйте флаг i.
  • (?:...): Некаптурирующая группа.
  • (?=...): Положительная проверка вперёд.
  • (?!...): Отрицательная проверка вперёд.
  • (?<=...): Положительная проверка назад.
  • (?<!...): Отрицательная проверка назад.

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

Шаблон regex заключается между слэшами (/pattern/flags).

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

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

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

Теперь давайте рассмотрим несколько примеров:

Пример 1: ​

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

Пример 2: ​

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

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

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

  • + - Соответствует одному или нескольким вхождениям предыдущего элемента.
Output appears here after Run.

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

  • * - Соответствует нулю или более вхождениям предыдущего элемента.
Output appears here after Run.

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

  • ? - Соответствует нулю или одному вхождению предыдущего элемента.
Output appears here after Run.

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

  • {n} - Соответствует ровно n вхождениям предыдущего элемента.
Output appears here after Run.

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

  • {n,} - Соответствует n или более вхождениям предыдущего элемента.
Output appears here after Run.

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

  • {n,m} - Соответствует от n до m вхождений предыдущего элемента.
Output appears here after Run.

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

Флаги ​

Флаги — это необязательные параметры, которые позволяют выполнять глобальный поиск, поиск без учёта регистра и многое другое. Вот некоторые часто используемые флаги с примерами:

  • g - Глобальный поиск.
Output appears here after Run.

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

  • i - Поиск без учёта регистра.
Output appears here after Run.

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

  • m - Многострочный поиск.
Output appears here after Run.

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

  • s - Позволяет . совпадать с символами новой строки (также известен как флаг dotAll).
Output appears here after Run.

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

  • u - "Unicode"; рассматривает шаблон как последовательность кодовых точек Unicode.
Output appears here after Run.

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

  • y - "Sticky"; совпадает только с индекса, указанного свойством lastIndex этого регулярного выражения в целевой строке.
Output appears here after Run.

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

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

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

Output appears here after Run.

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

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

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

Output appears here after Run.

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

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

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

Output appears here after Run.

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

Разделение текста: str.split() ​

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

Output appears here after Run.

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

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

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

Output appears here after Run.

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

Синтаксис regex в JavaScript ​

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

Output appears here after Run.

Этот шаблон regex разбирает URL на его компоненты:

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

Подробнее:

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

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

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

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

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

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

Проверка пользовательского ввода ​

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

Output appears here after Run.

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

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

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

Output appears here after Run.

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

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

INFO

Всегда проверяйте свои шаблоны regex с помощью таких инструментов, как regex101.com, чтобы убедиться в точности и эффективности перед внедрением их в код.

Заключение ​

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

Практика ​

What are the properties of regular expressions in JavaScript as described in the provided URL?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.