Кратко: в этом уроке вы узнаете что такое регулярные выражения js. Прочитав, вы поймете, как эффективно использовать регулярные выражения для поиска и замены строк.

Введение в Регулярные Выражения JavaScript

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

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

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

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

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

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

let regEx = /hi/;

Или вы можете использовать RegExp():

let regEx = RegExp('hi');

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

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

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

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

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

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

console.log(result); // true

Использование Флагов

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

1. Флаг Игнорирования Регистра (i)

Регулярные выражения имеют множество флагов. Например, флаг i игнорирует регистр при поиске.

По умолчанию при поиске учитывается регистр символов. Например, /hi/ соответствует только строке hi, а не Hi или HI.

Для поиска строки с любыми случаями вы используете флаг i:

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

console.log(result); // true

В этом примере /hi/i будет соответствовать любой строке hi, Hi и HI.

Ниже показано, как использовать флаг шаблона в конструкторе регулярных выражений RegExp:

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

console.log(result); // true

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

Следующим часто используемым флагом является глобальный флаг или флаг g. Без глобального флага объект регулярного выражения проверяет только наличие совпадения в строке и возвращает первое совпадение. Когда присутствует флаг g, регулярное выражение ищет все совпадения и возвращает их все.

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

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

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

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

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

console.dir(matches);

Вывод в консоль:

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

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

Поиск строк

Метод str.match(regEx) возвращает все совпадения регулярного выражения regEx в строке 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.

Подводим итоги

• Регулярные выражения js это просто.
• Используйте // или конструктор RegExp для создания регулярного выражения.
• Применяйте флаги, например, игнорировать регистр (i) и глобальный флаг (g), чтобы изменить поведение соответствия.
• Используйте метод RegExp.test(), чтобы определить, найден ли шаблон в строке.
• Используйте метод RegExp.exec(), чтобы найти совпадение и вернуть массив, содержащий информацию о совпадении.
• Некоторые строковые методы, такие как match() и replace(), поддерживают регулярные выражения.

Если вам понравилась статья, предлагаем вам прочитать другие наши статьи по JavaScript. Спасибо за внимание!