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

В этом руководстве познакомимся с регулярными выражениями в JavaScript. После обучения вы узнаете, как эффективно использовать их для поиска и замены строк.

Регулярное выражение — это строка, описывающая шаблон, например адреса электронной почты и номера телефонов.

В JavaScript регулярки являются объектами и есть встроенный тип RegExp, который позволяет эффективно работать с ними.

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

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

Создание регулярного выражения

Чтобы создать регулярное выражение в JavaScript, вы заключаете его шаблон в символы косой черты( / ) следующим образом:

let re = /hi/;

Обратите внимание, что в регулярном выражении нет одинарных или двойных кавычек, как в обычной строке.

Или вы можете использовать конструктор RegExp :

let re = new RegExp('hi');

Оба регулярных выражения являются экземплярами типа RegExp. Они соответствуют строке 'hi'.

Тестирование на соответствие

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

Метод test() возвращает true, если строковый аргумент содержит совпадение.

В следующем примере метод test() используется для проверки соответствия строки 'hi John' шаблону hi :

let re = /hi/;
let result = re.test('hi John');

console.log(result); // true

Использование флагов шаблона

Помимо шаблона, объект RegExp также принимает необязательный параметр флага. Флаги — это настройки, которые изменяют поведение при поиске. Регулярные выражения имеют много флагов.

1) Флаг игнорирования( i )

Флаг i игнорирует регистры при поиске. Буква i означает ignore.

По умолчанию при поиске учитывается регистр. Например, /hi/ соответствует только строке hi, а не Hi. Для поиска строки hi в любом случае используется флаг i :

let re = /hi/i;
let result = re.test('Hi John');

console.log(result); // true

В этом примере /hi/i будет соответствовать любой строке hi, Hi и HI. Обратите внимание, что вы помещаете флаг i после последнего символа косой черты( / ).

В следующем примере показано, как использовать флаг в конструкторе RegExp :

let re = new RegExp('hi','i');
let result = re.test('HI John');

console.log(result); // true

2) Глобальный флаг( g )

Другим часто используемым флагом является глобальный флаг( g ). Без глобального флага объект RegExp только проверяет, есть ли совпадение в строке, и возвращает первое совпадение.

Когда доступен флаг g, RegExp ищет все совпадения и возвращает их все.

Можно комбинировать флаги, например, флаги gi объединяют флаги игнорирования( i ) и глобальные( g ).

Метод exec() объекта RegExp выполняет поиск совпадения в строке и возвращает массив, содержащий подробную информацию о совпадении.

Метод exec() возвращает null, если совпадений не найдено. Однако он возвращает одно совпадение сразу. Чтобы получить все совпадения, вам нужно выполнить exec() несколько раз.

В следующем примере используется метод exec() с циклом do...while для возврата всех совпадений:

let message = 'Hi, are you there? hi, HI...';
let re = /hi/gi;

let matches = [];
let match;
do {
    match = re.exec(message);
    if(match) {
      matches.push(match);
    }
} while(match != null)

console.dir(matches);

Выход:

Как это работает:

• Во-первых, объявите строку message, которая будет использоваться для поиска.
• Затем создайте объект регулярного выражения с шаблоном /hi/gi. Флаг игнорирования( i ) позволяет объекту re игнорировать случаи при выполнении поиска, а глобальный флаг( g ) указывает объекту re находить все совпадения, а не только первое.
• В-третьих, выполняйте метод exec() до тех пор, пока совпадение не будет найдено.
• Наконец, покажите массив результатов в консоли.

Поиск строк

Метод str.match(regexp) возвращает все совпадения regexp в строке str.

Чтобы найти все совпадения, используйте глобальный флаг( g ). И чтобы найти совпадения независимо от регистра, используйте флаг игнорирования( i ).

В следующем примере показано, как использовать метод match

let str = "Are you Ok? Yes, I'm OK";
let result = str.match(/OK/gi);

console.log(result);

Выход:

["Ok", "OK"]

Замена строк

В данном примере используется метод replace() для замены первого вхождения строки 'Ok' в строку str :

let str = "Are you OK? Yes, I'm OK.";
let result = str.replace('Ok','fine');

console.log(result);

Выход:

Are you fine? Yes, I'm OK

Чтобы заменить все вхождения OK, вы используете регулярное выражение с глобальным флагом( g ):

let str = "Are you OK? Yes, I'm OK.";
let result = str.replace(/OK/g,'fine');

console.log(result);

Выход:

Are you fine? Yes, I'm fine.

В следующем примере используются флаги игнорирования и глобальные флаги для замены всех вхождений OK независимо от случаев строкой fine :

let str = "Are you Ok? Yes, I'm OK.";
let result = str.replace(/OK/gi,'fine');

console.log(result);

Выход:

Are you fine? Yes, I'm fine.

Заключение

• Используйте /.../ или конструктор RegExp для создания регулярного выражения в JavaScript.
• Используйте флаг шаблона, например, ignore( i ) и global( g ), чтобы изменить поведение сопоставления.
• Используйте метод RegExp.test(), чтобы определить, найден ли шаблон в строке.
• Метод RegExp.exec() — чтобы найти совпадение и вернуть массив, содержащий информацию о совпадении.