Руководство по регулярным выражениям в JavaScript

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

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

JavaScript поддерживает регулярные выражения в синтаксисе Perl. Perl (Practical Extraction and Report Language) был первым распространенным языком программирования, который обеспечивал интегрированную поддержку регулярных выражений и большие возможности обработки и манипулирования текстом.

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

Определение регулярных выражений

В JavaScript регулярные выражения представлены объектом RegExp, который является нативным объектом JavaScript, таким как String, Array и так далее. Существует два способа создания нового объекта RegExp: один использует литеральный синтаксис, а другой — конструктор RegExp().

Литеральный синтаксис использует косую черту (/pattern/) для переноса шаблона регулярного выражения, тогда как синтаксис конструктора использует кавычки ("pattern"). В следующем примере демонстрируются оба способа создания регулярного выражения, которое соответствует любой строке, начинающейся с «Mr.».

// Литеральный синтаксис
var regex = /^Mr\./;

// Синтаксис конструктора
var regex = new RegExp("^Mr\\.");

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

Сравнение шаблонов с регулярным выражением

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

Символы, которым дается особое значение в регулярном выражении:
. * ? + [ ] ( ) { } ^ $ | \ . Вам нужно будет использовать обратную косую черту, если вы хотите использовать их буквально. Например, если вы использовать в регулярном выражении знак точка (.), вам нужно писать \. Все остальные символы автоматически принимают свои буквальные значения.

В следующих разделах описаны различные параметры, доступные для формулирования шаблонов:

Классы символов

Квадратные скобки, окружающие шаблон символов, называются классом символов, например [abc]. Класс символов всегда соответствует одному символу из списка указанных символов, что означает, что выражение [abc] соответствует только символу a, b или c.

Также могут быть определены классы отрицательных символов, которые соответствуют любому символу, кроме указанных в скобках. Класс отрицанных символов определяется путем размещения символа вставки (^) сразу после открывающей скобки, например [^abc], который соответствует любому символу, кроме a, b и c.

Вы также можете определить диапазон символов, используя символ дефиса (-) внутри класса символов, например [0-9]. Давайте посмотрим на некоторые примеры классов:

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

var regex = /ca[kf]e/;
var str = "He was eating cake in the cafe.";

// Проверяет строку на соответствие регулярному выражению
if(regex.test(str)) {
    alert("Match found!");
} else {
    alert("Match not found.");
}

Кроме того, вы можете добавить глобальный флаг g к регулярному выражению, чтобы найти все совпадения в строке:

var regex = /ca[kf]e/g;
var str = "He was eating cake in the cafe.";
var matches = str.match(regex);
alert(matches.length); // Выводит: 2

Предопределенные классы символов

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

В следующем примере показано, как найти и заменить пробел символом дефиса в строке, используя регулярное выражение с методом JavaScript replace():

var regex = /\s/g;
var replacement = "-";
var str = "Earth revolves around\nthe\tSun";

// Заменяем пробелы, новые строки и вкладки
document.write(str.replace(regex, replacement) + "<hr>");

// Заменяем только пробелы
document.write(str.replace(/ /g, "-"));

Количественные повторители (квантификаторы)

В предыдущем разделе мы узнали, как найти один символ в строке. Но что, если вы хотите сопоставить более одного символа? Например, допустим, вы хотите найти слова, содержащие один или несколько символов буквы p, или слова, содержащие не менее двух символов p.

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

В следующей таблице перечислены различные способы количественного определения конкретного шаблона:

Регулярное выражение в следующем примере разбивает строку на последовательность символов с помощью метода JavaScript split():

var regex = /[\s,]+/;
var str = "My favourite colors are red, green and blue";
var parts = str.split(regex);

// Проход по циклу и отображение подстрок
for(var part of parts){
    document.write("<p>" + part + "</p>");
}

Начало и конец строки (якоря)

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

Регулярное выражение в следующем примере будет соответствовать только тем именам в массиве имен, которые начинаются с буквы «J» с помощью функции JavaScript test():

var regex = /^J/;
var names = ["James Bond", "Clark Kent", "John Rambo"];

// Проходим по циклу и отображаем совпадающие имена
for(var name of names) {
    if(regex.test(name)) {
        document.write("<p>" + name + "</p>")
    }
}

Модификаторы (флаги)

Модификатор шаблона позволяет вам контролировать способ обработки соответствия шаблону. Модификаторы размещаются непосредственно после регулярного выражения, например, если вы хотите искать шаблон без учета регистра, вы можете использовать модификатор i, например: /pattern/i.

В следующей таблице перечислены некоторые из наиболее часто используемых модификаторов шаблонов.

В следующем примере показано, как использовать модификаторы g и i в регулярном выражении для выполнения глобального поиска без учета регистра с помощью метода match() JavaScript.

var regex = /color/gi;
var str = "Color red is more visible than color blue in daylight.";
var matches = str.match(regex); // глобальное совпадение без учета регистра
console.log(matches);
// expected output: ["Color", "color"]

Аналогично, в следующем примере показано, как сопоставлять начало каждой строки в многострочной строке, используя модификатор ^ anchor и m с методом JavaScript match().

var regex = /^color/gim;
var str = "Color red is more visible than \ncolor blue in daylight.";
var matches = str.match(regex); // глобальный, без учета регистра, многострочное соответствие
console.log(matches);
// expected output: ["Color", "color"]

Альтернатива

Чередование позволяет указать альтернативную версию шаблона. Чередование в регулярном выражении работает так же, как оператор OR в условном выражении if-else.

Вы можете указать чередование, используя вертикальную черту (|). Например, регулярное выражение /fox|dog|cat/ соответствует строке «fox», или строке «dog», или строке «cat». Вот пример:

var regex = /fox|dog|cat/;
var str = "The quick brown fox jumps over the lazy dog.";
var matches = str.match(regex);
console.log(matches);
// expected output: ["fox", index: 16, ...]

Группировка

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

Например, в regexp /go+/ квантификатор + применяется только к последнему символу o и соответствует строкам «go», «goo» и так далее. В регулярном выражении /(go)+/ квантификатор + применяется к группе символов g и o и соответствует строкам «go», «gogo» и т. д.

var regex = /(go)+/i; 
var str = "One day Gogo will go to school.";
var matches = str.match(regex); // совпадение без учета регистра
console.log(matches);
// expected output: ["Gogo", "go", index: 8, ...]

Границы слов

Символ границы слова (\b) помогает вам искать слова, которые начинаются и/или заканчиваются определенным шаблоном. Например, регулярное выражение /\bcar/ соответствует словам, начинающимся с шаблона car, и будет соответствовать cart, carrot, или cartoon, но не будет совпадать с oscar.

Аналогично, регулярное выражение /car\b/ соответствует словам, оканчивающимся шаблоном car, и будет соответствовать oscar или supercar, но не будет соответствовать cart. Аналогично, /\bcar\b/ соответствует словам, начинающимся и заканчивающимся шаблоном car и будет соответствовать только слову car.

Следующий пример выделит слова, начинающиеся с car жирным шрифтом:

var regex = /(\bcar\w*)/g;
var str = "Words begining with car: cart, carrot, cartoon. Words ending with car: oscar, supercar.";
var replacement = '<b>$1</b>';
var result = str.replace(regex, replacement);
document.write(result);

О регулярных выражениях в PHP см. Руководство по регулярным выражениям в PHP.