Паттерны и флаги

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

В JavaScript регулярные выражения реализованы отдельным объектом RegExp и интегрированы в методы строк.

Регулярные выражения

Регулярное выражение (оно же «регэксп», «регулярка» или просто «рег»), состоит из паттерна (он же «шаблон») и необязательных флагов.

Существует два синтаксиса создания объекта регулярного выражения.

«Длинный» синтаксис:

regexp = new RegExp("шаблон", "флаги");

… И короткий синтаксис, использующий слеши "/":

regexp = /pattern/; // без флагов
regexp = /pattern/gmi; //  с флагами gmi (будут описаны далее)

Слеши "/" говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк.

Использование

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

Вот простой пример:

let str = "Я люблю JavaScript!"; // будем искать в этой строке

let regexp = /люблю/;
alert( str.search(regexp) ); // 2

Метод str.search ищет /люблю/ и возвращает позицию внутри строки. Как можно догадаться, /люблю/ – простейший возможный шаблон. То, что он делает, это обычный поиск подстроки.

Код выше – то же самое, что и:

let str = "Я люблю JavaScript!"; // будем искать в этой строке

let substr = 'люблю';
alert( str.search(substr) ); // 2

Поэтому поиск для /люблю/ то же самое, что и поиск 'люблю'.

Но это лишь пока. Очень скоро мы создадим более сложные регулярные выражения, и тогда увидим, что они гораздо мощнее.

Цветовые обозначения

Здесь и далее в тексте используется следующая цветовая схема:

  • регулярное выражение – красный
  • строка (там где происходит поиск) – синий
  • результат – зелёный
Когда использовать new RegExp?

Обычно мы используем короткий синтаксис /.../. Но он не поддерживает вставки переменных ${...}.

С другой стороны, new RegExp позволяет динамически создавать шаблон из строки.

Таким образом, мы можем выяснить, что нам нужно искать и создать из этого new RegExp:

let tag = prompt("Что вы хотите найти?", "h2");
let regexp = new RegExp(`<${tag}>`);

// по умолчанию найдёт <h2>
alert( "<h1> <h2> <h3>".search(regexp));

Флаги

Регулярные выражения могут иметь флаги, которые влияют на поиск.

В JavaScript их всего шесть:

i
С этим флагом поиск не зависит от регистра: нет разницы между A и a (см. пример ниже).
g
С этим флагом поиск ищет все совпадения, без него – только первое (мы увидим его использование в следующей главе).
m
Многострочный режим (рассматривается в главе Многострочный режим, флаг "m").
s
Режим «Dotall» позволяет . соответствовать символу новой строки (рассматривается в главе Символьные классы).
u
Включает полную поддержку юникода. Флаг разрешает корректную обработку суррогатных пар (подробнее об этом в главе Юникод: флаг "u").
y
Режим закрепления (описан в главе Липкий флаг "y", поиск на конкретной позиции)

Мы рассмотрим все эти флаги далее в этом учебнике.

На данный момент самый простой флаг – это i, вот пример:

let str = "Я люблю JavaScript!";

alert( str.search(/ЛЮБЛЮ/i) ); // 2 (найдено в нижнем регистре)

alert( str.search(/ЛЮБЛЮ/) ); // -1 (без флага 'i' ничего не найдено)

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

Итого

  • Регулярное выражение состоит из шаблона и необязательных флагов: g, i, m, u, s, y.
  • Без флагов и специальных символов, которые мы изучим позже, поиск по регулярному выражению аналогичен поиску по подстроке.
  • Метод str.search(regexp) возвращает индекс, в котором найдено совпадение, или -1, если совпадения нет. В следующей главе мы увидим другие методы.
Карта учебника

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.