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

() translation by (you can also view the original English article)

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

Однако все не так просто. Будут моменты, когда вы не будете искать определенную подстроку, а набор подстрок, которые следуют определенной схеме.

Предположим, вы должны заменить все вхождения «Apples» в строке на «apples». Вы можете просто использовать theMainString.replace("Apples", "apples"). Легко и понятно.

Теперь предположим, что вам нужно заменить «appLes» на «apples». Аналогичным образом, «appLES» также должен стать «apples». В принципе, все вариации случаев «Apple» необходимо изменить на «apple». Передача простых строк в качестве аргумента больше не будет практичной или эффективной в таких случаях.

Здесь появляются регулярные выражения: вы можете просто использовать флаг i без учета регистра и готово. С этим флагом, уже не имеет значения, если исходная строка содержит «Apples», «APPles», «ApPlEs» или «Apples». Каждый экземпляр слова будет заменен на «apples».

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

Использование регулярных выражений в JavaScript

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

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

"I ate Apples".replace("Apples", "apples");
 // I ate apples
 
 "I ate Apples".replace(/Apples/i, "apples");
 // I ate apples
 
 "I ate aPPles".replace("Apples", "apples");
 // I ate aPPles
 
 "I ate aPPles".replace(/Apples/i, "apples");
 // I ate apples

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

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

Вы можете превратить нормальные символы в специальные символы, добавив обратную косую черту перед ними. Аналогичным образом, вы можете превратить специальные символы в обычные, добавив обратную косую черту перед ними.

Например, d не является особым символом. Однако \d используется для сопоставления символа цифры в строке. Точно так же D не является особым символом, но \D используется для сопоставления нецифровых символов в строке.

Цифры включают 0, 1, 2, 3, 4, 5, 6, 7, 8 и 9. Когда вы используете \d внутри регулярного выражения, оно будет соответствовать любому из этих девяти символов. Когда вы используете \D внутри регулярного выражения, оно будет соответствовать всем символам кроме цифр.

Следующий пример должен прояснить ситуацию.

1	"L8".replace(/\d/i, "E");
2	// LE
3
4	"L8".replace(/\D/i, "E");
5	// E8
6
7	"LLLLL8".replace(/\D/i, "E");
8	// ELLLL8

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

Точно так же, как \d и \D, есть и другие специальные последовательности символов.

Вы можете использовать \w для соответствия любому символу слова в строке. Здесь символ слова относится к A-Z, a-z, 0-9 и _. Таким образом, в основном, он будет соответствовать всем цифрам, всем строчным и прописным алфавитам и подчеркиванию.
Вы можете использовать \W для соответствия любому символу, отличному от слова, в строке. Он будет соответствовать символам, таким как%, $, #, ₹ и т.д.
Вы можете использовать \s для соответствия одному символу пробела, который включает пробел, табуляцию, фид формы и фид строки. Аналогично, вы можете использовать \S для соответствия всем другим символам, кроме пробелов.
Вы также можете искать конкретный символ пробела с помощью \f, \n, \r, \t и \v, которые обозначают фид формы, линию, возврат каретки, горизонтальную вкладку и вертикальную вкладку.

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

«A lot of pineapple images were posted on the app».

В этом случае мы хотим заменить слово « app» на « board». Однако использование простого шаблона регулярного выражения превратит « apple» в « boardle», и последнее предложение станет следующим:

«A lot of pineboardle images were posted on the app».

В таких случаях вы можете использовать другую специальную последовательность символов: \b. Это проверяет границы слова. Граница слов формируется с использованием любых неглавных символов, таких как пространство, «$», «%», «#» и т.д. Однако обратите внимание, что в них также включены акцентированные символы, такие как «ü».

"A lot of pineapple images were posted on the app".replace(/app/, "board");
 // A lot of pineboardle images were posted on the app
 
 "A lot of pineapple images were posted on the app".replace(/\bapp/, "board");
 // A lot of pineapple images were posted on the board

Аналогично, вы можете использовать \B для соответствия границе без слов. Например, вы можете использовать \B для соответствия только «app», когда оно находится в другом слове, например « pineapple».

Соответствие шаблону «n» Количество раз

Вы можете использовать ^, чтобы указать JavaScript, чтобы посмотреть только начало строки для соответствия. Аналогично, вы можете использовать $, чтобы смотреть только на конец строки для соответствия.

Вы можете использовать * для соответствия предыдущему выражению 0 или более раз. Например, /Ap*/ будет соответствовать A, Ap, App, Appp и т.д.

Аналогичным образом вы можете использовать + для соответствия предыдущему выражению 1 или более раз. Например, /Ap +/ будет соответствовать Ap, App, Appp и т.д. Выражение не будет совпадать с единичной A на этот раз.

Иногда вы хотите только сопоставить определенное количество вхождений заданного шаблона. В таких случаях вы должны использовать последовательность символов {n}, где n - число. Например, /Ap{2}/ будет соответствовать App, но не Ap. Он также будет соответствовать первым двум «p» в Appp и оставить третий нетронутым.

Вы можете использовать {n,}, чтобы совместить хотя бы «n» вхождения данного выражения. Это означает, что /Ap{2,}/ будет соответствовать App, но не Ap. Он также будет соответствовать всем «p» в Apppp и заменяет их вашей заменяющей строкой.

Вы также можете использовать {n, m} для указания минимального и максимального числа и ограничить количество совпадений данного выражения. Например, /Ap{2,4}/ будет соответствовать App, Appp и Apppp. Он также будет соответствовать первым четырем «p» в Apppppp и оставит их без изменений.

"Apppppples".replace(/Ap*/, "App");
 // Apples
 
 "Ales".replace(/Ap*/, "App");
 // Apples
 
 "Appppples".replace(/Ap{2}/, "Add");
 // Addppples
 
 "Appppples".replace(/Ap{2,}/, "Add");
 // Addles
 
 "Appppples".replace(/Ap{2,4}/, "Add");
 // Addples

Использование скобок для запоминания совпадений

До сих пор мы заменяли шаблоны только постоянной строкой. Например, в предыдущем разделе замена, которую мы использовали, всегда была «Add». Иногда вам придется искать совпадение шаблона внутри данной строки, а затем заменить его на часть шаблона.

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

"I like Apple".replace(/(\w{5,})/, '$1s');
 // I like Apples
 
 "I like Banana".replace(/(\w{5,})/, '$1s');
 // I like Bananas
 

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

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

1	"I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');
2	// I am looking for Jason and John

Использование флагов с регулярными выражениями

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

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

g: Этот флаг будет выполнять глобальный поиск вместо остановки после первого совпадения.
i: Этот флаг будет выполнять поиск без проверки правильности совпадения. Например, Apple, aPPLe и apPLE обрабатываются одинаково во время поиска без учета регистра.
m: Этот флаг будет выполнять многострочный поиск.
y: Этот флаг будет искать совпадение в индексе, указанном свойством lastIndex.

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

"I ate apples, you ate apples".replace(/apples/, "mangoes");
 // "I ate mangoes, you ate apples"
 
 "I ate apples, you ate apples".replace(/apples/g, "mangoes");
 // "I ate mangoes, you ate mangoes"
 
 "I ate apples, you ate APPLES".replace(/apples/, "mangoes");
 // "I ate mangoes, you ate APPLES"
 
 "I ate apples, you ate APPLES".replace(/apples/gi, "mangoes");
 // "I ate mangoes, you ate mangoes"
 
 
 var stickyRegex = /apples/y;
 stickyRegex.lastIndex = 3;
 "I ate apples, you ate apples".replace(stickyRegex, "mangoes");
 // "I ate apples, you ate apples"
 
 var stickyRegex = /apples/y;
 stickyRegex.lastIndex = 6;
 "I ate apples, you ate apples".replace(stickyRegex, "mangoes");
 // "I ate mangoes, you ate apples"
 
 var stickyRegex = /apples/y;
 stickyRegex.lastIndex = 8;
 "I ate apples, you ate apples".replace(stickyRegex, "mangoes");
 // "I ate apples, you ate apples"

Заключение

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

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

Если есть что-то, что вы хотели бы, чтобы я уточнил в этом уроке, не стесняйтесь, дайте мне знать в комментариях.