Регулярные выражения. Часть 1. Базовые концепции

Регулярное выражение (regex) — это набор символов, определяющий поисковый шаблон. Регулярные выражения могут быть очень полезны в повседневной жизни разработчика. Существует реализация регулярных выражений для различных языков программирования, но мы остановимся на использовании регулярных выражений в языке JavaScript. В данной серии статей мы рассмотрим механизм работы регулярных выражений и то, как они могут использоваться в реальной жизни.

Способы создания регулярных выражений

В JavaScript существует 2 способа создания регулярных выражений:

1. Использование /.../. Обратите внимание, что 2 косые черты не являются частями поискового шаблона. Они только указывают на начало и конец регулярного выражения.

   const regex = /dog/;

2. Использование конструктора RegExp javascript const regex = new RegExp('dog'); После создания объекта RegExp вы всегда можете вызвать метод test, чтобы узнать соответствует ли строка данному шаблону:

regex.test("dog"); // true
regex.test("hot-dog"); // true

Простые шаблоны

Простейшим типом регулярных выражений является поиск заданного текста. Строка будет соответствовать регулярному выражению /dog/ только если будет содержать все символы из регулярного выражения и они будут в нужном порядке.

/dog/.test('hot-dog'); // true
/dog/.test('do games'); // false

Более интересным применением регулярных выражений является случай когда вы хотите использовать более сложные шаблоны.

Специальные символы

Мы можем искать не просто вхождение определённой строки. Для этого нам пригодятся специальные символы, которые не являются непосредственной частью поисковой строки, но могут сделать её более обобщённой.

Любой символ(.)

Для поиска любого символа(кроме символа переноса строки) может быть использован символ .

const regex = /.og/;
regex.test("fog"); // true
regex.test("dog"); //true

А что если мы хотим найти именно точку, а не произвольный символ?

Обратная косая черта(\)

Если мы хотим, чтобы специальный символ использовался как часть поисковой строки, мы можем использовать символ \

const regex1 = /dog./;
regex1.test("dog."); // true
regex1.test("dog1"); // true

const regex2 = /dog\./;
regex1.test("dog."); // true
regex1.test("dog1"); // false

Набор символов

Если мы хотим использовать символ из определённого набора, то мы можем заключить этот набор символов в квадратные скобки.

/[dfl]og/.test("dog"); // true
/[dfl]og/.test("fog"); // true
/[dfl]og/.test("log"); // true

Обратите внимание, что внутри квадратных скобок не нужно экранировать специальные символы. Ещё одни способом использования набора символов является указание диапазона значений.

/[A-z]/.test("a"); // true
/[A-z]/.test("Z"); // true

Обратите внимание, что если вы хотите, чтобы диапазон включал строчные и заглавные буквы, то вам стоит использовать диапазон вида /[a-zA-Z]/.

С помощью символа ^ вы исключить набор символов. Например:

/[^df]og/.test("dog"); // false
/[^df]og/.test("fog"); // false
/[^df]og/.test("log"); // true

Несколько повторений

Очень полезной возможностью является поиск некоторого количество повторений выражения. Для использования данной возможности нам понадобятся фигурные скобки. Давайте попробует создать функцию, которая на вход будет получать строку и проверять является ли она корректным номером телефона. Номер телефона имеет формат +xx xxx xxx xxx, где x это цифра.

function isPhoneNumber(number) {
  return /\+[0-9]{2} [0-9]{3} [0-9]{3} [0-9]{3}/.test(number);
}

isPhoneNumber("+12 123 123 123"); // true
isPhoneNumber("123212"); // false

Существуют следующие способы использования фигурных скобок:

1. {x} - точное количество повторений;
2. {x,} - как минимум x повторений;
3. {x,y} - количество повторений от x до y;

Ноль и более повторений

С помощью символа * мы можем осуществлять поиск 0 и более повторений. Это эквивалентно использованию {0,}. Теперь мы легко можем определить поисковый шаблон, который будет соответствовать любой цифре или символу: /.*/

Флаги

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

1. /dog/i
2. new RegExp(/dog/,'i')

Далее мы рассмотрим наиболее полезные флаги.

i - игнорировать регистр

При использовании данного флага поиск становится регистронезависимым

/dog/i.test("dog"); // true
new RegExp("dog", "i").test("DoG");

g - поиск всех совпадений

Данный флаг позволяет нам найти все совпадения. Без данного флага мы получим только первое совпадение.

String.prototype.replace

Одним из самых популярных случаев использования флага g в регулярных выражениях является поиск в строке и замена. Вы наверняка уже знакомы с функцией replace, которая применяется к строке и возвращает новую строку заменяя её содержимое, соответствующее шаблону. Данный шаблон может быть задан в виде регулярного выражения. Проблема заключается в том, что будет заменено только первое совпадение с шаблоном. Если мы хотим заменить все совпадения, то нам на помощь приходит флаг g:

const lorem = "lorem_ipsum_dolor_sit_amet";

lorem.replace("_", " "); // 'lorem ipsum_dolor_sit_amet'

lorem.replace(/_/g, " "); // 'lorem ipsum dolor sit amet'

Заключение

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