JavaScript 101: разоблачение регулярных выражений

Тестирование всех примеров

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

Вот почему вы можете писать небольшие скрипты для тестирования примеров кода, которыми мы поделимся здесь, или вы можете использовать RegExp101.

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

Вот скриншот RegExp101:

Обратите внимание, что мы используем простое/world/gрегулярное выражение, а под ним есть пара строк текста. Он выделяет совпадения, а справа также объясняет, почему они совпадают. Довольно удобно.

Это действительно полезно для изучения и совершенно бесплатно, поэтому настоятельно рекомендуем вам попробовать, особенно при ознакомлении с этой статьей!

Понимание регулярных выражений

Отлично, давайте перейдем к сути. Регулярные выражения (они же “regex” для крутых ребят) подобны магическим заклинаниям для вашего кода JavaScript. Они позволяют вам искать и сопоставлять шаблоны в строке текста.

Итак, как работают эти волшебные заклинания регулярных выражений? Что ж, все начинается с шаблона. Шаблон регулярных выражений состоит из символов, некоторые из которых имеют особые значения. Например, символ точки (.) соответствует любому отдельному символу, в то время как символ звездочки (*) соответствует нулю или более предыдущего символа.

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

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

const regex = new RegExp('hello');

Это создаст новое регулярное выражение, которое соответствует слову “hello” в любом тексте. Проще простого, не так ли? Вы даже можете избежать всегоRegExpконструктора и определить его следующим образом:

const regex = /hello/

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

Но подождите, это еще не все! Регулярные выражения также могут использовать специальные символы для соответствия определенным типам символов, таким как цифры или пробелы. Например,\dсимвол соответствует любой цифре, в то время как\sсимвол соответствует любому пробелу (пробел, табуляция и т.д.).

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

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

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

Итак, давайте приступим к разгадке!

Давайте начнем с простого примера. Допустим, вы хотите сопоставить любую строку, начинающуюся со слова “hello”. Вы можете сделать это, используя следующее регулярное выражение:

const regex = /^hello/;

Здесь символ каретки (^) используется для обозначения начала строки, за которым следует буквальная строка “hello” (обратите внимание, что мы говорим о строках, но при определении регулярного выражения не используем кавычки). Это будет соответствовать любой строке, начинающейся с “hello”.

Вы также можете использовать регулярные выражения для сопоставления с определенными символами или классами символов. Например, если вы хотите сопоставить любую строку, содержащую одну цифру, вы можете использовать следующее выражение:

const regex = /\d/;

Здесь обратная косая черта, за которой следует “d” (\d), является сокращением для класса символов digit. Это будет соответствовать любой строке, содержащей одну цифру.

Еще один полезный шаблон для сопоставления - это последовательность символов, которая может встречаться один или несколько раз. Например, если вы хотите сопоставить любую строку, содержащую ряд букв, за которыми следует двоеточие, вы можете использовать следующее выражение:

const regex = /[a-z]+:/;

let strings = [
 "hello there", //не будет соответствовать
 "greeting: hello there!", //будет соответствовать
 "123: this is a greeting", //это не будет соответствовать
 "greETING: yo! What's up!?", //это не будет соответствовать
]

Здесь квадратные скобки указывают на класс символов, который соответствует любой строчной букве, в то время как знак плюс (+) указывает, что шаблон может встречаться один или несколько раз. Это будет соответствовать любой строке, содержащей одну или несколько строчных букв, за которыми следует двоеточие.

Это всего лишь несколько примеров из множества шаблонов, которые вы можете сопоставить, используя регулярные выражения в JavaScript.

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

const regex =" /[a-z]+:/;

let strings =" [
"hello there", // не будет соответствовать
"greeting: hello there!", // будет соответствовать
"123: this is a greeting", // это не будет соответствовать
"greETING: yo! What's up!?", // это не будет соответствовать
]

strings.forEach( str ="> {
let match = regex.exec(str)
if(!match) console.log("There is no match for: ", str);
else console.log("The string '", str, "' matches the expression");

Но что, если мы захотим большего? Что, если мы захотим посмотреть, какая часть строки соответствует? А что, если мы захотим получить эту подстроку и что-то с ней сделать?

Давайте продолжать!

Расширенные регулярные выражения

Теперь, когда мы понимаем основы регулярных выражений, давайте немного углубимся в кроличью нору, не так ли?

Одна из моих любимых функций в них - “захват групп”. Или, другими словами, их способность выбирать части строки на основе шаблона.

Захват групп

Допустим, у вас есть строка, содержащая дату в формате “дд-мм-гггг".

Вы можете использовать следующее регулярное выражение для сопоставления и извлечения дня, месяца и года:

const regex = /(\d{2})-(\d{2})-(\d{4})/;
const match = regex.exec("25-12-2023");

console.log(match[1]); // "25"
console.log(match[2]); // "12"
console.log(match[3]); // "2023"

Здесь круглые скобки используются для создания групп захвата, которые соответствуют дню, месяцу и году по отдельности.\dКак мы уже видели, это сопоставление любой цифры, а части{2}и{4}определяют длину совпадения.

Если использовать другие термины, шаблон будет

• 2 цифры
• Тире
• 2 цифры
• Еще один штрих
• на этот раз 4 цифры

Затем сопоставленные значения извлекаются с помощьюexec()метода. Да, вы могли бы использоватьsplitв строке, и результат был бы тем же самым. Но как только строка становится более сложной, а шаблон соответственно увеличивается, разница становится более очевидной.

Lookahead и lookbehind

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

Допустим, у вас есть строка, содержащая список элементов, разделенных запятыми. Вы хотите сопоставлять только те элементы, перед которыми не стоит слово “not”. Для достижения этой цели вы можете использовать следующее регулярное выражение:

const regex = /(?<!not\s)(\w+)/g;
const match = "apple, not orange, banana, not pear".match(regex);

console.log(match); // ["apple", "banana"]

Здесь(?<!not\s)синтаксис представляет собой отрицательный взгляд назад, который соответствует любому слову, перед которым не стоит слово "not", за которым следует пробел.\w+Шаблон соответствует любым символам слов, которые следуют за отрицательным взглядом сзади.

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

Поздравляем! Теперь вы вступили в мистический мир регулярных выражений. Вы узнали, как создавать простые и сложные шаблоны, как использовать специальные символы и как извлекать определенные части сопоставляемых строк.

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

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