Регулярные выражения в JavaScript: test, match, replace

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

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

const literal = /hello/i;
const built = new RegExp("hello", "i");

console.log(literal.test("Hello, world"));
console.log(built.test("HELLO"));

Литеральная запись - со слэшами вокруг шаблона и флагами после закрывающего слэша - это то, что вы будете использовать чаще всего. А вот new RegExp(...) пригодится, когда сам шаблон динамический: например, собирается из пользовательского ввода или переменной.

Буква i в конце - это флаг. i означает поиск без учёта регистра. Про флаги расскажу чуть ниже.

test: есть ли совпадение?

Самый простой вопрос, который можно задать регулярке - «а есть ли в строке совпадение?». Для этого и нужен test:

const hasDigit = /\d/;

console.log(hasDigit.test("abc123"));
console.log(hasDigit.test("abcdef"));
console.log(hasDigit.test(""));

\d - это «любая цифра». Метод test возвращает строго true или false, больше ничего. Если вам нужен ответ в духе «да/нет» - проверить поле формы, отфильтровать массив - test подойдёт как нельзя лучше.

Метод match: достаём найденный текст

Когда нужен сам кусок текста, который совпал, пригодится метод строки match:

const text = "Order #4521 shipped on 2024-11-03";

console.log(text.match(/\d+/));
console.log(text.match(/\d+/g));

Без флага g метод match возвращает массив, где лежит первое совпадение вместе с метаданными (index, input). С флагом g на выходе - обычный массив строк со всеми найденными совпадениями. Если же ничего не нашлось, вернётся null, а не пустой массив - так что не забудьте это проверить:

const result = "no numbers here".match(/\d+/);
console.log(result ?? "no match");

Флаги меняют поведение паттерна

Флаги ставятся после закрывающего слэша и управляют тем, как работает поиск. Вот те, что пригождаются чаще всего:

• g - глобальный поиск: находит все совпадения, а не только первое.
• i - без учёта регистра.
• m - многострочный режим: ^ и $ совпадают с началом и концом каждой строки, а не всего текста.
• s - режим dotall: точка . начинает матчить и переводы строк.
• u - поддержка Unicode, без неё многие эмодзи и не-ASCII символы в паттернах работать не будут.

const poem = "Roses are red\nViolets are blue";

console.log(poem.match(/^\w+/));
console.log(poem.match(/^\w+/gm));

Без флага m символ ^ цепляется только к самому началу строки. А с флагом m - к началу каждой строки, поэтому в выдачу попадут и Roses, и Violets.

Классы символов и квантификаторы

Кирпичики, из которых собирается большинство regex-шаблонов в JavaScript:

• \d - цифра, \w - символ слова (буква, цифра или подчёркивание), \s - пробельный символ.
• [abc] - один из символов a, b или c. [^abc] - что угодно, кроме перечисленного. [a-z] - диапазон.
• . - любой символ, кроме перевода строки.
• * - ноль или больше, + - один или больше, ? - ноль или один.
• {3} - ровно три, {2,5} - от двух до пяти, {2,} - два и больше.
• ^ - начало, $ - конец.

Собираем всё вместе:

const patterns = {
  phone: /^\d{3}-\d{3}-\d{4}$/,
  hex: /^#[0-9a-f]{6}$/i,
  word: /\b\w+\b/g,
};

console.log(patterns.phone.test("415-555-0132"));
console.log(patterns.hex.test("#1a2B3c"));
console.log("hello, regex world".match(patterns.word));

\b - это граница слова, невидимая черта между символом слова и символом не-слова. Пригождается, когда нужно искать «слово целиком».

Группы захвата в regex: запоминаем части совпадения

Круглые скобки создают группу и запоминают то, что в неё попало. Методы exec и match возвращают эти захваты вместе с самим совпадением:

const date = /(\d{4})-(\d{2})-(\d{2})/;
const result = "today is 2024-11-03".match(date);

console.log(result[0]);
console.log(result[1]);
console.log(result[2]);
console.log(result[3]);

Индекс 0 - это полное совпадение, а каждая группа захвата идёт после него по своему индексу. Считать группы по номерам становится неудобно, как только их больше двух, поэтому лучше давать им имена:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const { groups } = "today is 2024-11-03".match(date);

console.log(groups.year, groups.month, groups.day);

Именованные группы захвата делают код на стороне вызова понятнее и не ломаются, если порядок групп в шаблоне поменяется.

replace: переписываем найденный текст

Метод replace принимает шаблон и замену. В роли замены может выступать как строка, так и функция:

const text = "Contact: alice@example.com or bob@example.com";

console.log(text.replace(/@example\.com/, "@acme.io"));
console.log(text.replace(/@example\.com/g, "@acme.io"));

Без флага g заменится только первое совпадение. Классическая ошибка - забыть этот флаг, а потом ломать голову, почему второй email всё ещё выглядит криво.

В строке замены можно использовать обратные ссылки. $1, $2 и так далее ссылаются на группы захвата, а $<имя> - на именованные группы:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

console.log("2024-11-03".replace(date, "$<day>/$<month>/$<year>"));

Если задача сложнее обычной замены, передавайте функцию. На вход она получает само совпадение и захваченные группы:

const prices = "Apples $3, Pears $5, Plums $2";

const doubled = prices.replace(/\$(\d+)/g, (_, n) => `$${Number(n) * 2}`);
console.log(doubled);

Подчёркивание - это полное совпадение (оно нам не нужно), а n - первая группа захвата. Связка «регулярка + функция-заменитель» закрывает большинство реальных задач по обработке текста.

matchAll: все совпадения вместе с группами

String.prototype.matchAll возвращает итератор по всем совпадениям вместе с их группами захвата - то, что обычный match с флагом g сделать не умеет:

const text = "alice@acme.io and bob@example.com";
const email = /(?<user>\w+)@(?<domain>[\w.]+)/g;

for (const m of text.matchAll(email)) {
  console.log(m.groups.user, "в", m.groups.domain);
}

matchAll работает только с флагом g. Без него получите TypeError. Если нужен произвольный доступ к элементам, а не перебор в цикле, разверните результат в массив: [...text.matchAll(email)].

Экранирование специальных символов

Символы . * + ? ( ) [ ] { } | \ ^ $ имеют особое значение в регулярных выражениях. Чтобы сопоставить их буквально, экранируйте обратным слэшем:

const withDot = /example\.com/;
const withoutDot = /example.com/;

console.log(withDot.test("example.com"));
console.log(withDot.test("examplexcom"));
console.log(withoutDot.test("examplexcom"));

Вариант без экранирования спокойно подхватит examplexcom, потому что . означает «любой символ». Такой баг встречается сплошь и рядом - и он молчаливый. Если регулярка цепляет лишнее, первым делом ищите неэкранированную ..

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

function escape(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

const userInput = "3.14";
const safe = new RegExp(escape(userInput));
console.log(safe.test("pi is 3.14"));
console.log(safe.test("pi is 3x14"));

$& в строке замены - это короткая запись для «всего совпадения».

Опережающие и ретроспективные проверки в regex

Иногда нужно найти совпадение только в том случае, если после него (или перед ним) идёт что-то определённое, - но при этом само это «что-то» в результат не включать. Ровно для таких ситуаций и придуманы lookaround-конструкции:

const prices = "items cost 10 USD, 25 EUR, 7 GBP";

console.log(prices.match(/\d+(?= USD)/));
console.log(prices.match(/(?<=\$)\d+/));

• (?= ...) - позитивный lookahead: «за чем следует».
• (?<= ...) - позитивный lookbehind: «чему предшествует».
• (?! ...) и (?<! ...) - их негативные варианты.

Lookaround'ы не «съедают» символы, поэтому то, на что мы «подсматриваем», остаётся доступным для следующей части паттерна.

Пара слов о валидации email

Этот вопрос всплывает постоянно: «дайте мне regex, который валидирует email». Честный ответ - не надо. Настоящая грамматика email'ов - это адский зверь, и любое регулярное выражение, достаточно короткое, чтобы его можно было прочитать, в чём-нибудь да ошибётся. Для валидации формы вполне сойдёт прагматичный паттерн:

const emailish = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailish.test("alice@acme.io"));
console.log(emailish.test("not an email"));
console.log(emailish.test("a@b"));

Читается это так: «несколько символов, которые не являются пробелами и не @, потом @, снова то же самое, точка, и опять то же самое». Такой шаблон ловит очевидные опечатки, но не претендует на соответствие RFC 5322. Если нужна настоящая проверка - отправьте письмо с подтверждением.

Типичные подводные камни

Несколько граблей, на которые стоит наступить в уме, а не в проде:

• Забыли флаг g при replace или matchAll. В первом случае заменится только одно совпадение, во втором прилетит TypeError.
• Состояние lastIndex у глобальных регулярок. Регулярное выражение с флагом g или y запоминает, где остановилось, между вызовами test/exec. Не переиспользуйте один и тот же объект на несвязанных строках - создавайте новый либо берите matchAll.
• Неэкранированные точки и слэши в динамических шаблонах. Всегда экранируйте пользовательский ввод, прежде чем пихать его в new RegExp(...).
• Катастрофический бэктрекинг. Вложенные квантификаторы вроде (a+)+ на «злой» входной строке способны намертво повесить вкладку. Если регулярка тормозит - упрощайте.

Дальше: даты и время

Регулярки отвечают за форму текста, но в реальных данных ещё есть временные метки - их нужно парсить, форматировать и складывать. На следующей странице разберём Date, Intl.DateTimeFormat и ту самую ментальную модель, благодаря которой баги с часовыми поясами обходят вас стороной.