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

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

Регулярные выражения – специальные правила, которые делают процедуру поиска и замены более легкой. С помощью них можно серьёзно улучшить скрипт, применив всего несколько символов. Пользователь с ними сталкивается, когда заполняет форму обратной связи, где сразу проверяется правильность email, телефона и других данных. Для изучения регулярных выражений вам понадобится знание переменных, массивов, циклов, логических операторов, встроенных и пользовательских функций JavaScript.

Что понадобится для изучения

Для дальнейшей работы нам понадобится функция alert и replace. Напоминаем, что это за методы:


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

alert("Строка"); // выдаст «Строка»
var elem = "String";

alert(elem); // выдаст «String»

2. Вторая функция ищет указанную строку, после чего меняет её на группу символов. То есть формула выглядит так: "где ищем".replace("что ищем", "на что меняем")

alert( "String".replace("g", "gs") ); // выдаст «Strings»

Важно: строчки надо писать в кавычках (одинарных или двойных), а числа и переменные без них.

Модификаторы и ограничители

Сразу приведём пример, чтобы было понятнее:

alert( "Stringent line".replace(/n/, "@") ); // выдаст «Stri@gent line»

Слеши (/), в которые заключаем латинскую букву n, именуют ограничителями регулярных выражений. Внутри них некоторые знаки становятся спецсимволами. А сразу после ставятся модификаторы – правила, изменяющие действие регулярного выражения.


Рассмотрим модификатор g. В приведённом выше коде мы меняли букву n на собачку @, но команда сработала лишь на первом найденном символе. Модификатор g заставляет регулярное выражение находить все совпадения. Пример:

alert( "Stringent line".replace(/n/g, "@") ); // выдаст «Stri@ge@t li@e»

Ставить можно сразу несколько модификаторов. Например, поставим дополнительно i, который отменяет зависимость от регистра:

alert( "Big body".replace(/b/g, "@") ); // выдаст «Big @ody»

alert( "Big body".replace(/b/gi, "@") ); // выдаст «@ig @ody»

Точка – любой знак

Написанные цифры и буквы в большинстве случаев означают сами себя. Но есть и исключения – спецсимволы. Первым из них рассмотрим точку, которая переводится, как «любой символ». Под это понятие попадает не только буква или цифра, но также пробелы, дефисы и прочее:

alert( "wdw w w w1w w&w w-w wddw".replace(/w.w/g, "@") ); // выдаст «@ @ @ @ @ wddw»

Обратите внимание, что пробел тоже является символом. Под регулярное выражение попали все группы (кроме последней). Так как точка означала «любой символ», то она успешно заменила букву d, пробел, цифру 1 и амперсанд. Однако последняя группа – wddw – под правило не попала, так как в ней между w стоит 2 знака, а не один.

Операторы повтора *+?

Если поставим 2 точки, то регулярное выражение всё равно не захватит все группы символов:

alert( "ww wdw w w w1w w&w w-w wddw".replace(/w..w/g, "@") ); // выдаст «wdw w w w1w w&w w-w @»

Чтобы выражение захватило один, два и более символа, нужно использовать операторы повторения, их ещё называют квантификаторами:

  • плюс + повторяет символ один, два, три раза и более;
  • звездочка * повторяет символ ноль, один, два раза и более;
  • вопрос ? повторяет символ ноль или один раз.


Важно: эти операторы влияют лишь на тот символ, который стоит непосредственно перед ними.


Проще будет понять, если посмотреть на примеры:

alert( "ww wdw wddw wdddw w&w".replace(/wd+w/g, "@") ); // выдаст «ww @ @ @ w&w»

alert( "ww wdw wddw wdddw w&w".replace(/wd*w/g, "@") ); // выдаст «@ @ @ @ w&w»

alert( "ww wdw wddw wdddw w&w".replace(/wd?w/g, "@") ); // выдаст «@ @ wddw wdddw w&w»

В первом примере регулярное выражение искало одно и более совпадений, поэтому буквы «ww» не попали под него. Во втором примере они уже включились в правило. А в третьей строке под регулярное выражение попали лишь первые две группы символов – «ww» и «wdw».

Группирование символов

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

alert( "ww wqdw wqdqdw wqddw wqqddw".replace(/w(qd)+w/g, "@") ); // выдаст «ww @ @ wqddw wqqddw»

Как видно из примера, что модификатор повторения (+) влияет не на каждый символ по отдельности, а на всю строку, как единый объект. Другими словами, требуется точное повторение пары букв «qd», варианты «qdd» или «qqdd» не подходят.

Экранировка спецсимволов

А что если нам требуется найти или заменить точку, знак вопроса или другой спецсимвол? Для этого надо сделать так, чтобы он обозначал сам себя. Это можно сделать с помощью обратного слеша. Приём называется экранирование, а чёрточка ставится непосредственно перед символом. Пример:

alert( "one+two".replace(/e+t/g, "@") ); // выдаст «on@wo»

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


К спецсимволам относится $ ^ . * + ? {} [] () |


Обычными символами является @ : , ' '' ; - _ = % # ~ `& ! / 

Ограничение жадности

Особенность операторов повтора состоит в том, что они ищут максимально длинную строчку, попадающую под правило. Чтобы стало ясней, сразу напишем пример:

alert( "Stringent line".replace(/s.+n/gi, "@") ); // выдаст «@e»

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


Смотрим пример:

alert( "Stringent line".replace(/s.+?n/gi, "@") ); // выдаст «@gent line»

Чтобы убрать жадность у оператора *, нужно написать *?, тогда он также станет искать лишь до первого совпадения.

Точное количество повторов

А что делать, когда надо указать конкретное число повторов? В этом случае используются фигурные скобки, внутри которых можно указать требуемое количество символов несколькими способами:

  • статичное число повторов – {2} (повторить 2 раза);
  • промежуток – {3, 6} (от 3 до 6 раз включительно);
  • от определённого числа до бесконечности – {4,} (4 и более раза).


Важно: варианта {,5} не существует, вместо этого надо писать {0,5}.


Смотрим пример:

alert( "ww wqdw wqdqdw wqdqdqdw".replace(/w(qd){1,2}w/g, "@") ); // выдаст «ww @ @ wqdqdqdw»

Обратите внимание, что фигурные скобки работают на группу символов в круглых скобках.

Группа символов

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

Символ Значение Примеры
s Пробельный знак Пробел, табуляция, перевод строки
S Не пробел Всё кроме пробела
w Цифра или буква Цифры и латинские буквы (не кириллица)
W Не цифра и не буква Дефис, амперсанд, точка, запятая, двоеточие, подчёркивание и т.п.
d Цифра 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
D Не цифра Буквы, пробельные символы, другие спецзнаки


На примерах всё должно быть понятней:

alert( "1 23 456 qwerty @ & # %".replace(/s+/g, "!") ); // выдаст «1!23!456!qwerty!@!&!#!%»

alert( "1 23 456 qwerty @ & # %".replace(/S+/g, "!") ); // выдаст «! ! ! ! ! ! ! !»

alert( "1 23 456 qwerty @ & # %".replace(/w+/g, "!") ); // выдаст «! ! ! ! @ & # %»

alert( "1 23 456 qwerty @ & # %".replace(/W+/g, "!") ); // выдаст «1!23!456!qwerty!»

alert( "1 23 456 qwerty @ & # %".replace(/d+/g, "!") ); // выдаст «! ! ! qwerty @ & # %»

alert( "1 23 456 qwerty @ & # %".replace(/D+/g, "!") ); // выдаст «1!23!456!»

Оператор ИЛИ

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

Оператор [ ]

Сразу посмотрим пример:

alert( "wow wqw wdw wqdw wqqddw".replace(/w[qd]w/g, "@") ); // выдаст «wow @ @ wqdw wqqddw»

Как видно, под правило попали лишь те группы символов, где была только буква q или только d, группы с обоими символами под регулярное выражение не подошли.


Также можно сделать отрицание «всё кроме … или …» с помощью шляпки  ^:

alert( "ow qw dw 1w".replace(/[^qd]w/g, "@") ); // выдаст «@ qw dw @»

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

  • [A-Z] – заглавные латинские буквы;
  • [a-z] – строчные;
  • [0-9] – цифры от 0 до 9.


Их можно группировать:

  • [a-zA-Z] – все латинские буквы (прописные и строчные);
  • [a-z0-9] – цифры и строчные буквы;
  • и прочее.


Приведём пример для ясности:

alert( "ow qw dw 1w".replace(/[a-z]w/g, "@") ); // выдаст «@ @ @ 1w»

А что если нужно включить в группу дефис или шляпку? Тогда нужно поставить их туда, где они не будут являться спецсимволами. Шляпку пишут в конце, а дефис – в начале или в конце. Также можно воспользоваться экранированием. Ещё спецсимволом внутри [ ] являются сами квадратные скобки, поэтому их тоже надо экранировать.

Оператор |

Кроме того, существует другой оператор «или» – прямая вертикальная черта. Вот наглядный пример:

alert( "ow qw dw 1w".replace(/q|d/g, "@") ); // выдаст «ow @w @w 1w»

Теперь попробуем сделать так, чтобы регулярное выражение заменяло группы «qw» или «dw»:

alert( "ow qw dw 1w".replace(/q|dw/g, "@") ); // выдаст «ow @w @ 1w»

Вместо того чтобы заменить группы «qw» или «dw», регулярное выражение сработало на «q» и «dw». То есть вертикальная черта ставит выбор между всеми символами, которые стоят перед и после неё.


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

alert( "ow qw dw 1w".replace(/(q|d)w/g, "@") ); // выдаст «ow @ @ 1w»

Важным отличием оператора | от квадратных скобок является то, что в нём допускается применение спецзнаков повторения *?+ к отдельным символам. Что невозможно внутри [ ], так как в нём данные квантификаторы являются обычными символами.

Работа с кириллицей

Первое и главное – кириллица не включена в w, поэтому требуется писать [а-яА-Я]. Второй и тоже важный момент – к указанной группе не причисляется буква ё, так что лучше писать [а-яА-ЯЁё].


Работает это вот так:

alert( "ас ад ау ах а1 аё".replace(/а[б-яё]/g, "@") ); // выдаст «@ @ @ @ а1 @»

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

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


Примеры:

alert( "ас ад ау ах а1 аё".replace(/^а[б-яё]/g, "@") ); // выдаст «@ ад ау ах а1 аё»

alert( "ас ад ау ах а1 аё".replace(/а[б-яё]$/g, "@") ); // выдаст «ас ад ау ах а1 @»

Если в начале регулярного выражения поставить ^, а в конце - $, то правило будет проверять на соответствие всю строчку целиком.

Проблема обратного слеша

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


В частности используется для того, чтобы кавычки в строчном элементе обозначали сами себя:

var str = "это \" кавычки";

Чтобы поставить обратный слеш, как обычный символ, его нужно экранировать. То есть писать 2 раза подряд:

var str = "это \\ обратный слеш";

Об этом правиле надо помнить, когда вы используете регулярные выражения

Карманы

Круглые скобки используются не только для группировки, но также для создания «карманов» – специального правила, которое сохраняет часть того, что мы ищем по регулярному выражению. После чего можно достать содержимое кармана с помощью знака доллара и цифры, которая означает его порядковый номер: $1, $2 …


Чтобы было понятнее, лучше привести пример:

alert( "ow qw dw 1w".replace(/(q|d)w/g, "w$1") ); // выдаст «ow wq wd 1w»

С помощью карманов можно делать интересный фокус – менять содержимое строки местами:

alert( "w&s ww&ss".replace(/([a-z]+)&([a-z]+)/g, "$2@$1") ); // выдаст «s@w ss@ww»

В данном выражении то, что стоит перед амперсандом, кладётся в первый карман, а то, что стоит после &, попадает во второй. После чего первый и второй карманы меняются местами.


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

alert( "w&s ww&ss".replace(/(?:[a-z]+)&([a-z]+)/g, "@$1") ); // выдаст «@s @ss»

В первые скобки попадают буквы «w» и «ww», но они не попадают в карман, поэтому в $1 лежат символы «s» и «ss».

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

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

()
28 Июля 2018

Возврат к списку