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

16 июня 2026
Автор

Антон Ларичев

Введение

Регулярные выражения (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 - инструкция для начинающихОператоры в JavascriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие mouseout в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
AI-тренажерыAI-тренажеры
Практика в студииПрактика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.8
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

TypeScript с нуля

Антон Ларичев
AI-тренажерыAI-тренажеры
Практика в студииПрактика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.8
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

Next.js - с нуля

Антон Ларичев
AI-тренажерыAI-тренажеры
Практика в студииПрактика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее

Отправить комментарий