Объект `RegExp`

В этой статье объясняется объект RegExp.

Мы объясним объект RegExp на практических примерах.

YouTube Video

Объект RegExp

Что такое RegExp?

RegExp (регулярное выражение) — это объект, используемый для представления шаблонов строк. В отличие от простого сравнения символов, вы можете гибко определять «строки, соответствующие определённым условиям».

Используя объект RegExp, вы можете лаконично и понятно выполнять такие операции, как поиск, проверка, извлечение и замена строк. Это очень эффективно для повседневных задач, таких как проверка ввода в формах, анализ логов и форматирование текста. Ниже приведены простые примеры регулярных выражений.

1const pattern = /abc/;

• Это регулярное выражение проверяет, содержится ли последовательность 'abc'.

Как создавать регулярные выражения (два способа)

Существует два типа синтаксиса RegExp: литеральная запись и конструкторная запись.

1// Literal notation: pattern and flags are written together
2const literal         = /hello/;
3const literalWithFlag = /hello/i;
4const literalDigits   = /\d+/;
5
6// Constructor notation: pattern and flags are passed separately
7const constructor         = new RegExp("hello");
8const constructorWithFlag = new RegExp("hello", "i");
9const constructorDigits   = new RegExp("\\d+");

• Литеральная запись является лаконичной и легко читаемой, что делает её подходящей для регулярных выражений, используемых в качестве констант.. С другой стороны, конструкторная запись используется, когда вы хотите создавать шаблон с помощью переменных или определять его содержимое во время выполнения программы.
• С помощью литеральной записи вы можете интуитивно описывать как регулярное выражение, так и его флаги вместе. Напротив, при использовании конструкторной записи вам необходимо указывать шаблон и флаги отдельно.
• Кроме того, при конструкторной записи регулярное выражение передаётся как строка, поэтому обратные слэши должны быть экранированы дважды.

test(): Самая простая проверка

Объект RegExp предоставляет методы для выполнения проверки и операций с использованием регулярных выражений. test() — это метод, который возвращает булево значение, показывающее, совпадает ли шаблон.

1const regex = /JavaScript/;
2
3console.log(regex.test("I love JavaScript")); // true
4console.log(regex.test("I love TypeScript")); // false

• Это первый метод, который стоит изучить; он идеален для условных переходов и проверки ввода.

match(): Получение совпавших результатов

match() возвращает массив, содержащий совпавшую строку и дополнительную информацию.

1const text = "Version 1.2.3";
2const result = text.match(/\d+\.\d+\.\d+/);
3
4console.log(result[0]); // "1.2.3"

• match() удобнее, чем test(), при извлечении и разборе данных.

replace(): Замена с помощью регулярных выражений

replace() заменяет совпавшую часть строки на другую строку.

1const text = "Hello   World";
2const result = text.replace(/\s+/g, " ");
3
4console.log(result); // "Hello World"

• Вы можете использовать это для форматирования логов или нормализации лишних пробелов.

Основы флагов (g, i, m)

В регулярных выражениях можно указывать «флаги». Флаги — это опции, которые управляют тем, как регулярное выражение обрабатывает строки согласно определённым правилам. Даже при одинаковом шаблоне результат может отличаться в зависимости от используемых флагов.

1const text = "apple Apple APPLE";
2const regex = /apple/gi;        // or new RegExp("apple", "gi");
3
4console.log(text.match(regex)); // ["apple", "Apple", "APPLE"]

• Флаг g (глобальный) осуществляет поиск по всей строке.
• Флаг i (игнорировать регистр) не учитывает разницу между большими и маленькими буквами при сопоставлении.

1const multilineText = `apple
2banana
3apple`;
4
5const regexM = /^apple/gm;
6
7console.log(multilineText.match(regexM)); // ["apple", "apple"]

• Флаг m (многострочный) используется для обработки многострочных строк по отдельным строкам. При этом символы ^ и $ работают относительно начала и конца каждой строки, а не всей строки целиком.

Классы символов: объединение разных вариантов

Используя квадратные скобки [], вы можете задать набор допустимых символов для одной позиции.

1const regex = /gr[ae]y/;
2
3console.log(regex.test("gray")); // true
4console.log(regex.test("grey")); // true

• Это полезно при учёте различных написаний и выборе альтернатив.

Метасимволы: популярные сокращения

Мета-символы — это символы, которые позволяют записывать часто используемые шаблоны в более короткой форме.

1const regex = /\d{4}-\d{2}-\d{2}/;  // or new RegExp("\\d{4}-\\d{2}-\\d{2}");
2
3console.log(regex.test("2025-12-29")); // true

• \d обозначает цифру, а {n} указывает количество повторений.

^ и $: Проверка всей строки целиком

^ и $ обозначают начало и конец строки.

1const regex = /^\d+$/;
2
3console.log(regex.test("123"));   // true
4console.log(regex.test("123a"));  // false

• Они важны в ситуациях, когда требуется полное совпадение, например, при вводе данных в форму.

Группировка и захват

С помощью скобок () можно извлекать отдельные части значения.

1const text = "2025/12/29";
2const regex = /(\d{4})\/(\d{2})\/(\d{2})/;
3const [, year, month, day] = text.match(regex);
4
5console.log(year, month, day); // 2025 12 29

• Часто используется для разбора дат и структурированных строк.

Распространённые ошибки и важные моменты

Регулярные выражения очень мощные, но часто становятся трудночитаемыми.

1// Hard to read
2const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+$/;

• Если выражение становится слишком сложным, стоит рассмотреть возможность добавления комментариев, разбивки выражения или пересмотра самого процесса.

Резюме

RegExp — это важнейшая базовая возможность в JavaScript для простого и точного описания обработки строк. Не стоит сразу изучать сложные регулярные выражения; важно освоить основные методы и синтаксис — такие как test, match и replace — и использовать их по мере необходимости. Если вы будете рассматривать регулярные выражения не как «особые знания», а как «инструменты для структурированного описания шаблонов», вы значительно улучшите качество и читаемость проверки ввода и обработки текста.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video