Антон Ларичев
Регулярные выражения в JavaScript — от основ до практики
Введение
Регулярные выражения (regexp, regex) — это мощный инструмент для поиска, проверки и замены текста по шаблону. Знание regexp кратно повышает эффективность работы с текстовыми данными: валидация форм, парсинг строк, поиск с заменой — всё это требует регулярных выражений.
JavaScript имеет встроенную поддержку regexp через тип RegExp и методы строк.
Создание регулярного выражения
Два способа создать RegExp:
// 1. Литеральный синтаксис (предпочтительный)
const re1 = /hello/;
const re2 = /hello/gi; // с флагами
// 2. Конструктор RegExp (когда паттерн динамический)
const pattern = 'hello';
const re3 = new RegExp(pattern);
const re4 = new RegExp(pattern, 'gi');
Используйте конструктор, когда паттерн формируется динамически (из переменной, пользовательского ввода). В остальных случаях — литеральный синтаксис.
Флаги
| Флаг | Описание |
|---|---|
g | Глобальный поиск (найти все вхождения, не только первое) |
i | Регистронезависимый поиск |
m | Многострочный режим (^ и $ работают для каждой строки) |
s | Точка . совпадает с символом новой строки |
u | Режим Unicode (правильная работа с emoji и спецсимволами) |
d | Добавляет indices в результат (индексы групп) |
const text = 'Hello World hello HELLO';
/hello/g.exec(text); // находит первое 'hello' (не 'Hello')
/hello/gi.exec(text); // находит 'Hello' (регистронезависимо)
'Hello World hello HELLO'.match(/hello/gi); // ['Hello', 'hello', 'HELLO']
Основные символы и метасимволы
Обычные символы и экранирование
/hello/.test('hello world'); // true — ищем буквальную строку 'hello'
// Специальные символы нужно экранировать через \
/3\.14/.test('3.14'); // true
/3\.14/.test('3514'); // false (точка — буквальная)
Специальные символы, требующие экранирования: \ . * + ? ^ $ { } [ ] | ( )
Метасимволы классов
/\d/.test('5'); // true — \d = цифра [0-9]
/\D/.test('a'); // true — \D = не цифра
/\w/.test('a'); // true — \w = буква, цифра или _ [a-zA-Z0-9_]
/\W/.test('!'); // true — \W = не \w
/\s/.test(' '); // true — \s = пробельный символ (пробел, таб, перенос)
/\S/.test('a'); // true — \S = не пробельный
/\./.test('.'); // true — экранированная точка
/./. test('a'); // true — . = любой символ кроме \n
Якоря (привязки)
/^hello/.test('hello world'); // true — ^ = начало строки
/^hello/.test('say hello'); // false
/world$/.test('hello world'); // true — $ = конец строки
/world$/.test('world class'); // false
/\bhello\b/.test('hello'); // true — \b = граница слова
/\bhello\b/.test('sayhello'); // false
Если вы хотите глубоко изучить JavaScript, включая работу с регулярными выражениями и строками — приходите на наш курс JavaScript с нуля. На курсе 218 уроков и 80 упражнений, AI-тренажёры для практики 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.
Классы символов
/[abc]/.test('a'); // true — один из символов a, b или c
/[a-z]/.test('m'); // true — любая строчная буква
/[A-Z]/.test('M'); // true — любая заглавная буква
/[0-9]/.test('5'); // true — эквивалент \d
/[^abc]/.test('d'); // true — ^ внутри [] = НЕ один из этих символов
/[a-zA-Z0-9]/.test('z'); // true — буква или цифра
Квантификаторы
| Квантификатор | Значение |
|---|---|
* | 0 или более |
+ | 1 или более |
? | 0 или 1 (необязательный) |
{n} | Ровно n раз |
{n,} | n или более раз |
{n,m} | От n до m раз |
/go*gle/.test('ggle'); // true — o встречается 0 раз
/go*gle/.test('google'); // true — o встречается 2 раза
/go+gle/.test('ggle'); // false — + требует минимум 1 раз
/colou?r/.test('color'); // true — u необязательна
/colou?r/.test('colour'); // true
/\d{4}/.test('2024'); // true — ровно 4 цифры
/\d{2,4}/.test('2024'); // true — от 2 до 4 цифр
По умолчанию квантификаторы «жадные» — захватывают как можно больше. ? делает их «ленивыми»:
const html = '<b>жирный</b> и <i>курсив</i>';
html.match(/<.+>/)[0]; // '<b>жирный</b> и <i>курсив</i>' — жадно
html.match(/<.+?>/)[0]; // '<b>' — лениво
Группы
Группы захвата
const date = '2024-04-22';
const match = date.match(/(\d{4})-(\d{2})-(\d{2})/);
// match[0] — полное совпадение
// match[1] — первая группа (год)
// match[2] — вторая группа (месяц)
// match[3] — третья группа (день)
console.log(match[1]); // '2024'
console.log(match[2]); // '04'
console.log(match[3]); // '22'
Именованные группы
const match = '2024-04-22'.match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/);
console.log(match.groups.year); // '2024'
console.log(match.groups.month); // '04'
console.log(match.groups.day); // '22'
Группы без захвата
// (?:...) — группирует, но не захватывает
/(?:https?|ftp):\/\//.test('https://example.com'); // true
// Группа нужна для группировки альтернатив, но не нужна в результате
Методы для работы с regexp
RegExp.test()
Возвращает true/false:
/^\d{10}$/.test('1234567890'); // true — ровно 10 цифр
/^\d{10}$/.test('123abc'); // false
String.match()
Без флага g возвращает первое совпадение с деталями. С флагом g — массив всех совпадений:
'Цена: 100 рублей и 200 долларов'.match(/\d+/);
// ['100', index: 7, input: '...', groups: undefined]
'Цена: 100 рублей и 200 долларов'.match(/\d+/g);
// ['100', '200']
String.matchAll()
Возвращает итератор всех совпадений с группами (требует флаг g):
const text = 'Дата: 2024-04-22, ещё дата: 2024-05-15';
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g;
for (const match of text.matchAll(re)) {
console.log(match.groups.year, match.groups.month, match.groups.day);
}
// 2024 04 22
// 2024 05 15
String.replace() и replaceAll()
// Замена первого вхождения
'hello world hello'.replace(/hello/, 'привет');
// 'привет world hello'
// Замена всех вхождений (флаг g)
'hello world hello'.replace(/hello/g, 'привет');
// 'привет world привет'
// С функцией-заменителем
'2024-04-22'.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
return `${day}.${month}.${year}`;
});
// '22.04.2024'
// С именованными группами
'2024-04-22'.replace(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/, '$<day>.$<month>.$<year>');
// '22.04.2024'
String.split()
'один, два,три ,четыре'.split(/\s*,\s*/);
// ['один', 'два', 'три', 'четыре'] — разделяем по запятой с пробелами
String.search()
Возвращает индекс первого совпадения или -1:
'hello world'.search(/world/); // 6
'hello world'.search(/xyz/); // -1
Практические примеры
Валидация email
function validateEmail(email) {
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
}
validateEmail('ivan@example.com'); // true
validateEmail('not-an-email'); // false
Валидация телефона (российский)
function validatePhone(phone) {
return /^(\+7|8)[\s\-]?\(?\d{3}\)?[\s\-]?\d{3}[\s\-]?\d{2}[\s\-]?\d{2}$/.test(phone);
}
validatePhone('+7 (999) 123-45-67'); // true
validatePhone('8 999 123 45 67'); // true
Извлечение URL из текста
function extractUrls(text) {
return text.match(/https?:\/\/[^\s'"]+/g) || [];
}
extractUrls('Посетите https://purpleschool.ru и https://github.com');
// ['https://purpleschool.ru', 'https://github.com']
Форматирование числа с разделителями
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}
formatNumber(1234567); // '1 234 567'
Частые ошибки
Забытое экранирование специальных символов.
/3.14/соответствует3514, потому что.— это любой символ. Используйте/3.14/.Жадность квантификаторов.
/<.+>/захватит всю строку от первого<до последнего>. Добавьте?для ленивого режима:/<.+?>.Отсутствие флага
gпри использованииreplaceдля всех вхождений.str.replace(/pattern/, replacement)заменяет только первое вхождение. Для всех нужен флагgилиreplaceAll.Состояние при глобальном поиске. RegExp с флагом
gхранитlastIndex. При повторном вызове.test()или.exec()поиск начинается сlastIndex, а не с начала строки.
Часто задаваемые вопросы
Когда использовать регулярные выражения?
Когда нужно найти, проверить или трансформировать текст по шаблону: валидация форм, парсинг данных, форматирование строк, поиск с заменой. Для простых операций (поиск подстроки) используйте includes, startsWith, endsWith — они читаемее.
Как протестировать регулярное выражение?
Используйте regex101.com — интерактивный тестировщик с объяснением паттерна. В браузере — консоль DevTools.
Что такое lookahead и lookbehind?
Это незахватывающие проверки: /foo(?=bar)/ — находит foo, только если за ним следует bar. /foo(?!bar)/ — находит foo, если за ним НЕ следует bar. (?<=prefix)foo — находит foo с предшествующим prefix.
Заключение
Регулярные выражения — незаменимый инструмент для работы с текстом в JavaScript. Освоив базовый синтаксис, флаги, квантификаторы и методы строк, вы сможете решать задачи валидации, парсинга и трансформации данных в несколько строк кода.
Для углублённого изучения JavaScript рекомендуем курс JavaScript с нуля. В первых модулях доступно бесплатное содержание — познакомьтесь с форматом обучения до покупки полного доступа.
Постройте личный план изучения Javascript до уровня Middle — бесплатно!
Javascript — часть карты развития Frontend
100+ шагов развития
30 бесплатных лекций
300 бонусных рублей на счет
Бесплатные лекции
Все гайды по Javascript
Лучшие курсы по теме

Основы JavaScript
Антон Ларичев
TypeScript с нуля
Антон Ларичев