→ Проверка формы регулярные выражения javascript примеры. Объект RegExp. Регулярные выражения. Извлечение числа из строки

Проверка формы регулярные выражения javascript примеры. Объект RegExp. Регулярные выражения. Извлечение числа из строки

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

Синтаксис

// с помощью специального синтаксиса литералов var regex = /pattern /flags ; // с помощью конструктора var regex = new RegExp("pattern ", "flags "); var regex = new RegExp(/pattern /, "flags ");

Значения параметров:

Флаги регулярных выражений

Флаг Описание
g Позволяет найти все совпадения, а не останавливаться после первого совпадения (global match flag ).
i Позволяет выполнить сопоставление без учета регистра (ignore case flag ).
m Сопоставление производится по нескольким строкам. Обработка начальных и конечных символов (^ и $) производится по нескольким строкам, то есть сопоставление происходит с началом или концом каждой строки (разделители \n или \r), а не только с началом, или концом всей строки (multiline flag ).
u Шаблон будет расценен как последовательность кодовых точек Юникода (unicode flag ).
y Сопоставление происходит по индексу на который указывает свойство lastIndex этого регулярного выражения, при этом сопоставление не производиться по более позднему, или раннему индексу (sticky flag ).

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

Метасимволы

Символ Описание
. Позволяет найти один символ, кроме символа новой строки, или символа конца строки (\n, \r, \u2028 или \u2029).
\d Позволяет найти символ цифры в базовом латинском алфавите. Эквивалентин использованию набору символов .
\D Позволяет найти любой символ, который не является цифрой в базовом латинском алфавите. Эквивалентен набору символов [^0-9].
\s Позволяет найти одиночный пробельный символ. Под пробельным символом понимается пробел, табуляция, перевод страницы, перевод строки и другие пробельные символы Юникода. Эквивалентен набору символов [\f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​\u3000].
\S Позволяет найти одиночный символ, который не является пробельным. Под пробельным символом понимается пробел, табуляция, перевод страницы, перевод строки и другие пробельные символы Юникода. Эквивалентен набору символов [^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​\u2001\u2002​\u2003\u2004​\u2005\u2006​\u2007\u2008​\u2009\u200a​\u2028\u2029​​\u202f\u205f​\u3000].
[\b] Позволяет найти символ backspace (специальный символ \b, U+0008).
\0 Позволяет найти символ 0 (ноль).
\n Позволяет найти символ новой строки.
\f Позволяет найти символ перевода страницы.
\r Позволяет найти символ возврата каретки.
\t Позволяет найти символ горизонтальной табуляции.
\v Позволяет найти символ вертикальной табуляции.
\w Позволяет найти любой буквенно-цифровой символ базового латинского алфавита, включая подчеркивание. Эквивалентен набору символов .
\W Позволяет найти любой символ, который не является символом из базового латинского алфавита. Эквивалентен набору символов [^a-Za-z0-9_].
\cX Позволяет найти контрольный символ в строке. Где X - буква от A до Z. Например, /\cM/ обозначает символ Ctrl-M.
\xhh Позволяет найти символ, используя шестнадцатеричное значение (hh - двухзначное шестнадцатеричное значение).
\uhhhh Позволяет найти символ, используя кодировку UTF-16 (hhhh - четырехзначное шестнадцатеричное значение).
\u{hhhh} или
\u{hhhhh}
Позволяет найти символ со значением Юникода U+hhhh или U+hhhhh (шестнадцатеричное значение). Только когда задан флаг u .
\ Указывает, что следующий символ является специальным и не должен интерпретироваться буквально. Для символов, которые обычно трактуются специальным образом, указывает, что следующий символ не является специальным и должен интерпретироваться буквально.

Ограничения

Квантификаторы

Символ Описание
n* Сопостовление происходит с любой строкой, содержащей ноль или более вхождений символа n .
n+ Сопостовление происходит с любой строкой, содержащей хотя бы один символ n .
n? Сопостовление происходит с любой строкой с предшествующим элементом n ноль или один раз.
n{x} Соответствует любой строке, содержащей последовательность символов n определенное количество раз x . X
n{x,} x вхождений предшествующего элемента n . X должно быть целым положительным числом.
n{x, y} Соответствует любой строке, содержащей по крайней мере x , но не более, чем с y вхождениями предшествующего элемента n . X и y должны быть целыми положительными числами.
n*?
n+?
n??
n{x}?
n{x,}?
n{x,y}?
Сопостовление происходит по аналогии с квантификаторами *, +, ? и {...}, однако при этом поиск идет минимально возможного сопоставления. По умолчанию используется "жадный" режим, ? в конце квантификатора позволяет задать "нежадный" режим при котором повторение сопоставления происходит минимально возможное количество раз.
x(?=y) Позволяет сопоставить x , только если за x следует y .
x(?!y) Позволяет сопоставить x , только если за x не следует y .
x|y Сопоставление происходит с любой из указанных альтернатив.

Группировка и обратные ссылки

Символ Описание
(x) Позволяет найти символ x и запомнить результат сопоставления ("захватывающие скобки"). Сопоставленная подстрока может быть вызвана из элементов результирующего массива ..., [n], или из свойств предопределенного объекта RegExp $1 ..., $9.
(?:x) Позволяет найти символ x , но не запоминать результат сопоставления ("незахватывающие скобки"). Сопоставленная подстрока не может быть вызвана из элементов результирующего массива ..., [n], или из свойств предопределенного объекта RegExp $1 ..., $9.
\n Обратная ссылка на последнюю подстроку, совпадающую с n-ой по счёту в круглых скобках в регулярном выражении (нумерация скобок идет слева направо). n должно быть целым положительным числом.

Модификаторы

Символ «минус» (-) меред модификатором (за исключением U) создаёт его отрицание.

Спецсимволы

Аналог Описание
() подмаска, вложенное выражение
групповой символ
{a,b} количество вхождений от «a» до «b»
| логическое «или», в случае с односимвольными альтернативами используйте
\ экранирование спец символа
. любой сивол, кроме перевода строки
\d десятичная цифра
\D [^\d] любой символ, кроме десятичной цифры
\f конец (разрыв) страницы
\n перевод строки
\pL буква в кодировке UTF-8 при использовании модификатора u
\r возврат каретки
\s [ \t\v\r\n\f] пробельный символ
\S [^\s] любой символ, кроме промельного
\t табуляция
\w любая цифра, буква или знак подчеркивания
\W [^\w] любой символ, кроме цифры, буквы или знака подчеркивания
\v вертикальная табуляция

Спецсимволы внутри символьного класса

Позиция внутри строки

Пример Соответствие Описание
^ ^a a aa aaa начало строки
$ a$ aaa aaa конец строки
\A \Aa a aa aaa
aaa aaa
начало текста
\z a\z aaa aaa
aaa aaa
конец текста
\b a\b
\ba
aaa aaa
a aa a aa
граница слова, утверждение: предыдущий символ словесный, а следующий - нет, либо наоборот
\B \Ba\B aa a aa a отсутствие границы слова
\G \Ga aaa aaa Предыдущий успешный поиск, поиск остановился на 4-й позиции — там, где не нашлось a
Скачать в PDF , PNG .

Якоря

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

Здесь символ ^ обозначает начало строки. Без него шаблон соответствовал бы любой строке, содержащей цифру.

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

Символьные классы в регулярных выражениях соответствуют сразу некоторому набору символов. Например, \d соответствует любой цифре от 0 до 9 включительно, \w соответствует буквам и цифрам, а \W — всем символам, кроме букв и цифр. Шаблон, идентифицирующий буквы, цифры и пробел, выглядит так:

POSIX

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

Утверждения

Поначалу практически у всех возникают трудности с пониманием утверждений, однако познакомившись с ними ближе, вы будете использовать их довольно часто. Утверждения предоставляют способ сказать: «я хочу найти в этом документе каждое слово, включающее букву “q”, за которой не следует “werty”».

[^\s]*q(?!werty)[^\s]*

Приведенный выше код начинается с поиска любых символов, кроме пробела ([^\s]*), за которыми следует q . Затем парсер достигает «смотрящего вперед» утверждения. Это автоматически делает предшествующий элемент (символ, группу или символьный класс) условным — он будет соответствовать шаблону, только если утверждение верно. В нашем случае, утверждение является отрицательным (?!), т. е. оно будет верным, если то, что в нем ищется, не будет найдено.

Итак, парсер проверяет несколько следующих символов по предложенному шаблону (werty). Если они найдены, то утверждение ложно, а значит символ q будет «проигнорирован», т. е. не будет соответствовать шаблону. Если же werty не найдено, то утверждение верно, и с q все в порядке. Затем продолжается поиск любых символов, кроме пробела ([^\s]*).

Кванторы

Кванторы позволяют определить часть шаблона, которая должна повторяться несколько раз подряд. Например, если вы хотите выяснить, содержит ли документ строку из от 10 до 20 (включительно) букв «a», то можно использовать этот шаблон:

A{10,20}

По умолчанию кванторы — «жадные». Поэтому квантор + , означающий «один или больше раз», будет соответствовать максимально возможному значению. Иногда это вызывает проблемы, и тогда вы можете сказать квантору перестать быть жадным (стать «ленивым»), используя специальный модификатор. Посмотрите на этот код:

".*"

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

Привет, Мир

Приведенный выше шаблон найдет в этой строке вот такую подстроку:

"helloworld.htm" title="Привет, Мир"

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

".*?"

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

"helloworld.htm" "Привет, Мир"

Экранирование в регулярных выражениях

Регулярные выражения используют некоторые символы для обозначения различных частей шаблона. Однако, возникает проблема, если вам нужно найти один из таких символов в строке, как обычный символ. Точка, к примеру, в регулярном выражении обозначает «любой символ, кроме переноса строки». Если вам нужно найти точку в строке, вы не можете просто использовать « . » в качестве шаблона — это приведет к нахождению практически всего. Итак, вам необходимо сообщить парсеру, что эта точка должна считаться обычной точкой, а не «любым символом». Это делается с помощью знака экранирования.

Знак экранирования, предшествующий символу вроде точки, заставляет парсер игнорировать его функцию и считать обычным символом. Есть несколько символов, требующих такого экранирования в большинстве шаблонов и языков. Вы можете найти их в правом нижнем углу шпаргалки («Мета-символы»).

Шаблон для нахождения точки таков:

\.

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

Спецсимволы экранирования в регулярных выражениях

Подстановка строк

Подстановка строк подробно описана в следующем параграфе «Группы и диапазоны», однако здесь следует упомянуть о существовании «пассивных» групп. Это группы, игнорируемые при подстановке, что очень полезно, если вы хотите использовать в шаблоне условие «или», но не хотите, чтобы эта группа принимала участие в подстановке.

Группы и диапазоны

Группы и диапазоны очень-очень полезны. Вероятно, проще будет начать с диапазонов. Они позволяют указать набор подходящих символов. Например, чтобы проверить, содержит ли строка шестнадцатеричные цифры (от 0 до 9 и от A до F), следует использовать такой диапазон:

Чтобы проверить обратное, используйте отрицательный диапазон, который в нашем случае подходит под любой символ, кроме цифр от 0 до 9 и букв от A до F:

[^A-Fa-f0-9]

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

Использовать «или» очень просто: следующий шаблон ищет «ab» или «bc»:

Если в регулярном выражении необходимо сослаться на какую-то из предшествующих групп, следует использовать \n , где вместо n подставить номер нужной группы. Вам может понадобиться шаблон, соответствующий буквам «aaa» или «bbb», за которыми следует число, а затем те же три буквы. Такой шаблон реализуется с помощью групп:

(aaa|bbb)+\1

Первая часть шаблона ищет «aaa» или «bbb», объединяя найденные буквы в группу. За этим следует поиск одной или более цифр (+), и наконец \1 . Последняя часть шаблона ссылается на первую группу и ищет то же самое. Она ищет совпадение с текстом, уже найденным первой частью шаблона, а не соответствующее ему. Таким образом, «aaa123bbb» не будет удовлетворять вышеприведенному шаблону, так как \1 будет искать «aaa» после числа.

Одним из наиболее полезных инструментов в регулярных выражениях является подстановка строк. При замене текста можно сослаться на найденную группу, используя $n . Скажем, вы хотите выделить в тексте все слова «wish» жирным начертанием. Для этого вам следует использовать функцию замены по регулярному выражению, которая может выглядеть так:

Replace(pattern, replacement, subject)

Первым параметром будет примерно такой шаблон (возможно вам понадобятся несколько дополнительных символов для этой конкретной функции):

([^A-Za-z0-9])(wish)([^A-Za-z0-9])

Он найдет любые вхождения слова «wish» вместе с предыдущим и следующим символами, если только это не буквы или цифры. Тогда ваша подстановка может быть такой:

$1$2$3

Ею будет заменена вся найденная по шаблону строка. Мы начинаем замену с первого найденного символа (который не буква и не цифра), отмечая его $1 . Без этого мы бы просто удалили этот символ из текста. То же касается конца подстановки ($3). В середину мы добавили HTML тег для жирного начертания (разумеется, вместо него вы можете использовать CSS или ), выделив им вторую группу, найденную по шаблону ($2).

Модификаторы шаблонов

Модификаторы шаблонов используются в нескольких языках, в частности, в Perl. Они позволяют изменить работу парсера. Например, модификатор i заставляет парсер игнорировать регистры.

Регулярные выражения в Perl обрамляются одним и тем же символом в начале и в конце. Это может быть любой символ (чаще используется «/»), и выглядит все таким образом:

/pattern/

Модификаторы добавляются в конец этой строки, вот так:

/pattern/i

Мета-символы

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

Шпаргалка представляет собой общее руководство по шаблонам регулярных выражений без учета специфики какого-либо языка. Она представлена в виде таблицы, помещающейся на одном печатном листе формата A4. Создана под лицензией Creative Commons на базе шпаргалки, автором которой является Dave Child. Скачать в PDF , PNG .


Регулярные выражения (RegExp ) - это очень эффективный способ работы со строками.

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

  • искать текст в строке
  • заменять подстроки в строке
  • извлекать информацию из строки

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

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

Регулярные выражения реализованные в UNIX, таких как grep, sed и популярных текстовых редакторах, начали набирать популярность и были добавлены в язык программирования Perl, а позже и в множество других языков.

JavaScript, наряду с Perl, это один из языков программирования в котором поддержка регулярных выражений встроена непосредственно в язык.

Сложно, по полезно

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

Регулярные выражения сложно писать , сложно читать и сложно поддерживать/изменять .

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

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

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

Как выглядят регулярные выражения

В JavaScript регулярные выражения это объект, который может быть определён двумя способами.

Первый способ заключается в создании нового объекта RegExp с помощью конструктора:

Const re1 = new RegExp("hey")

Второй способ заключается в использовании литералов регулярных выражений :

Const re1 = /hey/

Вы знаете что в JavaScript есть литералы объектов и литералы массивов ? В нём также есть литералы regexp .

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

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

Как они работают?

Регулярное выражение, которое мы определили выше как re1 , очень простое. Оно ищет строку hey без каки-либо ограничений: строка может содержать много текста, а слово hey находиться где-то в середине и регулярное выражение сработает. Строка может содержать только слово hey и регулярка опять сработает.

Это довольно просто.

Вы можете попробовать протестировать регулярное выражение с помощью метода RegExp.test(String) , который возвращает логическое (boolean) значение:

Re1.test("hey") // ✅ re1.test("blablabla hey blablabla") // ✅ re1.test("he") // ❌ re1.test("blablabla") // ❌

В примере выше мы просто проверили удовлетворяет ли "hey" шаблону регулярного выражения, который храниться в re1 .

Это проще простого, но вы уже знаете много о регулярных выражениях.

Закрепление

/hey/

сработает независимо от того где находится hey внутри строки.

Если вы хотите найти строки, которые начинаются с hey , то используйте оператор ^ :

/^hey/.test("hey") // ✅ /^hey/.test("bla hey") // ❌

Если вы хотите найти строки, которые заканчиваются на hey , то используйте оператор $ :

/hey$/.test("hey") // ✅ /hey$/.test("bla hey") // ✅ /hey$/.test("hey you") // ❌

Объединяя два предыдущих оператора вы можете найти строку, которая полностью совпадает с hey:

/^hey$/.test("hey") // ✅

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

/^hey.*joe$/.test("hey joe") // ✅ /^hey.*joe$/.test("heyjoe") // ✅ /^hey.*joe$/.test("hey how are you joe") // ✅ /^hey.*joe$/.test("hey joe!") // ❌

Поиск элементов по диапазону

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

// // a, b, c, ... , x, y, z // // A, B, C, ... , X, Y, Z // // a, b, c // // 0, 1, 2, 3, ... , 8, 9

Эти регулярные выражения ищут строки, которые содержат хотя бы один символ из выбранного диапазона:

//.test("a") // ✅ //.test("1") // ❌ //.test("A") // ❌ //.test("d") // ❌ //.test("dc") // ✅

Диапазоны можно комбинировать:

// //.test("a") // ✅ //.test("1") // ✅ //.test("A") // ✅

Поиск многократных совпадений элемента диапазона

Вы можете проверить содержит ли строка только один символ из диапазона с помощью символа - :

/^$/ /^$/.test("A") // ✅ /^$/.test("Ab") // ❌

Инверсия шаблона

Символ ^ в начале шаблона привязывает его к началу строки.

Использование этого символа внутри диапазона инвертирует диапазон, поэтому:

/[^A-Za-z0-9]/.test("a") // ❌ /[^A-Za-z0-9]/.test("1") // ❌ /[^A-Za-z0-9]/.test("A") // ❌ /[^A-Za-z0-9]/.test("@") // ✅

Метасимволы

  • \d совпадает с любым числом, эквивалентно
  • \D совпадает с любым символом, который не является числом, эквивалентно [^0-9]
  • \w совпадает с любым буквенно-числовым символом, эквивалентно
  • \W совпадает с любым символом, который не является буквенно-числовым значением, эквивалентно [^A-Za-z0-9]
  • \s совпадает с любым пробельным символом: пробел, табуляция, символ новой строки и пробелы Unicode
  • \S совпадает с любым символом, который не является пробелом
  • \0 совпадает с null
  • \n совпадает с символом новой строки
  • \t совпадает с символом табуляции
  • \uXXXX совпадает с символом Unicode с кодом XXXX (требуется флаг u)
  • . совпадает с любым символовом, кроме символа новой строки (таким как \n) (если вы не используете флаг s , объясним позже)
  • [^] совпадает с любым символом, включая символ новой строки. Полезно при работе с многострочными строками

Выбор в регулярных выражениях

Если вы хотите выбрать одну или другую строку, используйте оператор | .

/hey|ho/.test("hey") // ✅ /hey|ho/.test("ho") // ✅

Квантификаторы

Представьте что у вас есть регулярное выражение, которое проверяет строку на то чтобы она состояла только из одной цифры:

Вы можете использовать квантификатор ? , который сделает этот символ необязательным. В нашем случае цифра должна встречаться 0 или 1 раз:

но что если мы хотим чтобы регулярное выражение срабатывало на несколько цифр?

Вы можете сделать это 4 способами, используя + , * , {n} и {n,m} .

+

Совпадает с одним или более (>=1) элементами:

/^\d+$/ /^\d+$/.test("12") // ✅ /^\d+$/.test("14") // ✅ /^\d+$/.test("144343") // ✅ /^\d+$/.test("") // ❌ /^\d+$/.test("1a") // ❌

*

Совпадает с 0 или более (>=0) элементами:

/^\d+$/ /^\d*$/.test("12") // ✅ /^\d*$/.test("14") // ✅ /^\d*$/.test("144343") // ✅ /^\d*$/.test("") // ✅ /^\d*$/.test("1a") // ❌

{n}

Совпадает точно с n количеством элементов:

/^\d{3}$/ /^\d{3}$/.test("123") // ✅ /^\d{3}$/.test("12") // ❌ /^\d{3}$/.test("1234") // ❌ /^{3}$/.test("Abc") // ✅

{n,m}

Совпадает с диапазоном от n до m элементов:

/^\d{3,5}$/ /^\d{3,5}$/.test("123") // ✅ /^\d{3,5}$/.test("1234") // ✅ /^\d{3,5}$/.test("12345") // ✅ /^\d{3,5}$/.test("123456") // ❌

m можно опустить и оставить второй предел без ограничений, чтобы было минимум n элементов:

/^\d{3,}$/ /^\d{3,}$/.test("12") // ❌ /^\d{3,}$/.test("123") // ✅ /^\d{3,}$/.test("12345") // ✅ /^\d{3,}$/.test("123456789") // ✅

Опциональные элементы

Следующий за элементом знак? , сделает его необязательным:

/^\d{3}\w?$/ /^\d{3}\w?$/.test("123") // ✅ /^\d{3}\w?$/.test("123a") // ✅ /^\d{3}\w?$/.test("123ab") // ❌

Группы

Используя круглые скобки, вы можете создавать группы символов (...) .

Пример ниже ищет точное совпадение из 3 цифр за которым следует один или более буквенно-числовые символов:

/^(\d{3})(\w+)$/ /^(\d{3})(\w+)$/.test("123") // ❌ /^(\d{3})(\w+)$/.test("123s") // ✅ /^(\d{3})(\w+)$/.test("123something") // ✅ /^(\d{3})(\w+)$/.test("1234") // ✅

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

/^(\d{2})+$/ /^(\d{2})+$/.test("12") // ✅ /^(\d{2})+$/.test("123") // ❌ /^(\d{2})+$/.test("1234") // ✅

Захват групп

До сих пор мы видели, как тестировать строки и проверять, содержат ли они определенный шаблон.

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

Вы можете делать это с помощью групп, а точнее с помощью захвата групп .

По умолчанию, группы итак захватываются. Теперь вместо использования RegExp.test(String) , который просто возвращает логическое значение, мы будем использовать один из следующих методов:

  • String.match(RegExp)
  • RegExp.exec(String)

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

Если совпадений не найдено, то он возвращает null .

"123s".match(/^(\d{3})(\w+)$/) //Array [ "123s", "123", "123s" ] /^(\d{3})(\w+)$/.exec("123s") //Array [ "123s", "123", "s" ] "hey".match(/(hey|ho)/) //Array [ "hey", "hey" ] /(hey|ho)/.exec("hey") //Array [ "hey", "hey" ] /(hey|ho)/.exec("ha!") //null

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

"123456789".match(/(\d)+/) //Array [ "123456789", "9" ]

Опциональные группы

Захват групп можно сделать опциональным с помощью (...)? . Если ничего не будет найдено, то в возвращаемый массив будет добавлен элемент undefined:

/^(\d{3})(\s)?(\w+)$/.exec("123 s") //Array [ "123 s", "123", " ", "s" ] /^(\d{3})(\s)?(\w+)$/.exec("123s") //Array [ "123s", "123", undefined, "s" ]

Ссылка на найденную группу

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

Именованный захват групп

Это новая возможность ES2018.

Группе можно назначить имя, а не просто слот в возвращаемом массиве:

Const re = /(?\d{4})-(?\d{2})-(?\d{2})/ const result = re.exec("2015-01-02") // result.groups.year === "2015"; // result.groups.month === "01"; // result.groups.day === "02";

Использование match и exec без групп

Существует разница при использовании match и exec без групп: в первом элементе массива будет находится не полностью найденная строка, а прямое совпадение:

/hey|ho/.exec("hey") // [ "hey" ] /(hey).(ho)/.exec("hey ho") // [ "hey ho", "hey", "ho" ]

Незахватываемые группы

Так как по умолчанию группы являются захватываемыми, нам нужен способ игнорировать некоторые группы в возвращаемом массиве. Это возможно с помощью незахватываемых групп , которые начинаются с (?:...) .

"123s".match(/^(\d{3})(?:\s)(\w+)$/) // null "123 s".match(/^(\d{3})(?:\s)(\w+)$/) // Array [ "123 s", "123", "s" ]

Флаги

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

  • g: ищет совпадения глобально
  • i: делает регулярное выражение не чувствительным к регистру
  • m: включает многострочный режим. В этом режиме ^ и $ совпадают с началом и концом всей строки. Без этого флага, с многострочными строками они совпадают с началом и концом каждой строки.
  • u: включает поддержку Unicode (добавлено в ES6/ES2015)
  • s: (новое в ES2018) сокращение от "single line", он позволяет. совпадать с символами новой строки

Флаги можно комбинировать, а также они добавляются в конец строки литерала:

/hey/ig.test("HEy") // ✅

или передаются вторым параметром в конструктор объекта RegExp:

New RegExp("hey", "ig").test("HEy") // ✅

Инспектирование регулярных выражений

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

  • source - строка шаблона
  • multiline - принимается значение true если установлен флаг m
  • global - принимается значение true если установлен флаг g
  • ignoreCase - принимается значение true если установлен флаг i
  • lastIndex
/^(\w{3})$/i.source //"^(\\d{3})(\\w+)$" /^(\w{3})$/i.multiline //false /^(\w{3})$/i.lastIndex //0 /^(\w{3})$/i.ignoreCase //true /^(\w{3})$/i.global //false

Экранирование

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

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

/^\\$/ /^\^$/ // /^\^$/.test("^") ✅ /^\$$/ // /^\$$/.test("$") ✅

Границы строк

\b и \B позволяют определить находится ли строка в начале или конце слова:

  • \b совпадает если набор символов находится в начале или конце слова
  • \B совпадает если набор символов не находится в начале или конце слова

"I saw a bear".match(/\bbear/) //Array ["bear"] "I saw a beard".match(/\bbear/) //Array ["bear"] "I saw a beard".match(/\bbear\b/) //null "cool_bear".match(/\bbear\b/) //null

Замена с помощью регулярных выражений

Мы уже видели как нужно проверять строки на совпадение с шаблоном.

Также мы видели как можно извлекать часть строк соотвествующие шаблону в массив.

Теперь давайте рассмотрим как заменять части строки на основе шаблона.

У объекта String в JavaScript есть метод replace() , который можно использовать без регулярных выражений для одной замены в строке:

"Hello world!".replace("world", "dog") //Hello dog! "My dog is a good dog!".replace("dog", "cat") //My cat is a good dog!

Этот метод также может принимать и регулярное выражение в качестве аргумента:

"Hello world!".replace(/world/, "dog") //Hello dog!

Использование флага g - это единственный способ заменить несколько вхождений в строке на ванильном JavaScript:

"My dog is a good dog!".replace(/dog/g, "cat") //My cat is a good cat!

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

"Hello, world!".replace(/(\w+), (\w+)!/, "$2: $1!!!") // "world: Hello!!!"

Вместо строки можно использовать функцию, чтобы делать ещё более интересные вещи. В неё будет передан ряд аргументов, таких как возвращают методы String.match(RegExp) или RegExp.exec(String) , где количество аргументов зависит от количества групп:

"Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => { console.log(first); console.log(second); return `${second.toUpperCase()}: ${first}!!!` }) //"WORLD: Hello!!!"

Жадность

Регулярные выражения называются жадными по умолчанию.

Что это значит?

Возьмём например это регулярное выражение:

/\$(.+)\s?/

Предполагается, что нам нужно извлечь из строки сумму в долларах:

/\$(.+)\s?/.exec("This costs $100") //0

но что если у нас есть больше слов после числа, это отвлекает

/\$(.+)\s?/.exec("This costs $100 and it is less than $200") //100 and it is less than $200

Почему? Потому что регулярное выражение после знака $ совпадает с любым символом.+ и не останавливается пока не достигнет конца строки. Затем он останавливается, потому что \s? делает конечное пространство необязательным.

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

/\$(.+?)\s/.exec("This costs $100 and it is less than $200") //100

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

Опережение: соответствие строки в зависимости от того что за ней следует

Используйет?= для поиска совпадений в строке за которой следует определённая подстрока

/Roger(?=Waters)/ /Roger(?= Waters)/.test("Roger is my dog") //false /Roger(?= Waters)/.test("Roger is my dog and Roger Waters is a famous musician") //true

Выполняет обратную операцию и находит совпадений в строке за которыми не следует определённая подстрока:

/Roger(?!Waters)/ /Roger(?! Waters)/.test("Roger is my dog") //true /Roger(?! Waters)/.test("Roger is my dog and Roger Waters is a famous musician") //false

Ретроспектива: соответствие строки в зависимости от того что ей предшествует

Это новая возможность ES2018.

Опережение использует символ?= . Ретроспектива использует?<= :

/(?<=Roger) Waters/ /(?<=Roger) Waters/.test("Pink Waters is my dog") //false /(?<=Roger) Waters/.test("Roger is my dog and Roger Waters is a famous musician") //true

Инверсия ретроспективы использует?

/(?

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

Флаг u является обязательным при работе с Unicode строками, в частности когда может понадобится обрабатывать строки в астральных плоскостях, которые не включены в первые 1600 символов Unicode.

Например эмодзи, но и только они.

/^.$/.test("a") // ✅ /^.$/.test("?") // ❌ /^.$/u.test("?") // ✅

Поэтому, всегда используйте флаг u .

Unicode, как и обычные символы, может обрабатывать диапазоны:

//.test("a") // ✅ //.test("1") // ✅ /[?-?]/u.test("?") // ✅ /[?-?]/u.test("?") // ❌

JavaScript проверяет внутренние коды представления, поэтому? < ? < ? на самом деле \u1F436 < \u1F43A < \u1F98A . Посмотрите полный список эмодзи чтобы увидеть коды и узнать их порядок.

Экранирование свойств Unicode

Как мы говорили выше, в шаблоне регулярного выражения вы можете использовать \d чтобы найти совпадение на любую цифру, \s чтобы найти совпадение на любой символ кроме пробела, \w чтобы найти совпадение на любой буквенно-числовой символ и т. д.

Экранирование свойств Unicode - это возможность ES2018, которая добавляет очень крутую функцию, расширяя эту концепцию на всех Unicode символы и добавляя \p{} и \P{} .

У любого Unicode символа есть набор свойств. Например Script определяет семейство языков, ASCII - это логическое значение равное true для ASCII символов и т.д. Вы можете положить это свойство в фигурные скобки и регулярное выражение будет проверять чтобы его значение было истинным:

/^\p{ASCII}+$/u.test("abc") // ✅ /^\p{ASCII}+$/u.test("ABC@") // ✅ /^\p{ASCII}+$/u.test("ABC?") // ❌

ASCII_Hex_Digit - это ещё одно логическое свойство, которое проверяет содержит ли строка тольк валидные шестнадцатеричные цифры:

/^\p{ASCII_Hex_Digit}+$/u.test("0123456789ABCDEF") //✅ /^\p{ASCII_Hex_Digit}+$/u.test("h")

Существует много других логических свойств, которые вы можете проверить просто добавив их имя в фигурные скобки, включая Uppercase , Lowercase , White_Space , Alphabetic , Emoji и другие:

/^\p{Lowercase}$/u.test("h") // ✅ /^\p{Uppercase}$/u.test("H") // ✅ /^\p{Emoji}+$/u.test("H") // ❌ /^\p{Emoji}+$/u.test("??") // ✅

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

/^\p{Script=Greek}+$/u.test("ελληνικά") // ✅ /^\p{Script=Latin}+$/u.test("hey") // ✅

Примеры

Извлечение числа из строки

Предположим, что есть строка содержащая только одно число, которое нужно извлечь. /\d+/ должен сделать это:

"Test 123123329".match(/\d+/) // Array [ "123123329" ]

Поиск E-mail адреса:

Простейший подход заключается в проверке безпробельных символов до и после знака @ , с помощью \S:

/(\S+)@(\S+)\.(\S+)/ /(\S+)@(\S+)\.(\S+)/.exec("[email protected]") //["[email protected]", "copesc", "gmail", "com"]

Однако, это упрощенный пример, так как под него попадает множество не валидных E-mail адресов.

Захват текста между двойными кавычками

Представим, что у вас есть строка, которая содержит текст заключённый в двойные кавычки и вам нужно извлечь этот текст.

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

Мы найдём то что нам нужно в result :

Const hello = "Hello "nice flower"" const result = /"([^"]*)"/.exec(hello) //Array [ "\"nice flower\"", "nice flower" ]

Получение содержимого из HTML тега

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

/]*>(.*?)<\/span>/ /]*>(.*?)<\/span>/.exec("test") // null /]*>(.*?)<\/span>/.exec("test") // ["test", "test"] /]*>(.*?)<\/span>/.exec("test") // ["test", "test"]

The RegExp constructor creates a regular expression object for matching text with a pattern.

For an introduction to regular expressions, read the Regular Expressions chapter in the JavaScript Guide .

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

Literal, constructor, and factory notations are possible:

/ pattern / flags new RegExp(pattern [, flags ]) RegExp(pattern [, flags ])

Parameters

pattern The text of the regular expression; or as of ES5, another RegExp object or literal (for the two RegExp constructor notations only). Patterns can include so they can match a wider range of values than would a literal string. flags

If specified, flags is a string that contains the flags to add; or if an object is supplied for the pattern, the flags string will replace any of that object"s flags (and lastIndex will be reset to 0) (as of ES2015). If flags is not specified and a regular expressions object is supplied, that object"s flags (and lastIndex value) will be copied over.

flags may contain any combination of the following characters:

G global match; find all matches rather than stopping after the first match. i ignore case; if u flag is also enabled, use Unicode case folding. m multiline; treat beginning and end characters (^ and $) as working over multiple lines (i.e., match the beginning or end of each line (delimited by \n or \r), not only the very beginning or end of the whole input string). s "dotAll"; allows . to match newlines. u Unicode; treat pattern as a sequence of Unicode code points. (See also Binary strings). y sticky; matches only from the index indicated by the lastIndex property of this regular expression in the target string (and does not attempt to match from any later indexes).

Description

There are two ways to create a RegExp object: a literal notation and a constructor .

  • The literal notation"s parameters are enclosed between slashes and do not use quotation marks.
  • The constructor function"s parameters are not enclosed between slashes, but do use quotation marks.

The following expressions create the same regular expression:

/ab+c/i new RegExp(/ab+c/, "i") // literal notation new RegExp("ab+c", "i") // constructor

The literal notation provides a compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won"t be recompiled on each iteration.

The constructor of the regular expression object, for example, new RegExp("ab+c") , provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don"t know the pattern and are getting it from another source, such as user input.

Starting with ECMAScript 6, new RegExp(/ab+c/, "i") no longer throws a TypeError ("can"t supply flags when constructing one RegExp from another") when the first argument is a RegExp and the second flags argument is present. A new RegExp from the arguments is created instead.

When using the constructor function, the normal string escape rules (preceding special characters with \ when included in a string) are necessary. For example, the following are equivalent:

Let re = /\w+/ let re = new RegExp("\\w+")

Properties

RegExp.prototype Allows the addition of properties to all objects. RegExp.length The value of RegExp.length is 2 . get RegExp[@@species] The constructor function that is used to create derived objects. RegExp.lastIndex The index at which to start the next match.

Methods

The global RegExp object has no methods of its own. However, it does inherit some methods through the prototype chain.

RegExp prototype objects and instances

Properties

Examples

Using a regular expression to change data format

let str = "#foo#" let regex = /foo/y regex.lastIndex = 1 regex.test(str) // true regex.lastIndex = 5 regex.test(str) // false (lastIndex is taken into account with sticky flag) regex.lastIndex // 0 (reset after match failure)

Regular expression and Unicode characters

As mentioned above, \w or \W only matches ASCII based characters; for example, a to z , A to Z , 0 to 9 , and _ .

To match characters from other languages such as Cyrillic or Hebrew, use \uhhhh , where hhhh is the character"s Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.

Let text = "Образец text на русском языке" let regex = /[\u0400-\u04FF]+/g let match = regex.exec(text) console.log(match) // logs "Образец" console.log(regex.lastIndex) // logs "7" let match2 = regex.exec(text) console.log(match2) // logs "на" console.log(regex.lastIndex) // logs "15" // and so on

Extracting sub-domain name from URL

let url = "http://xxx.domain.com" console.log(/[^.]+/.exec(url).substr(7)) // logs "xxx"

Specifications

Specification Status Comment
ECMAScript 3rd Edition (ECMA-262) Standard Initial definition. Implemented in JavaScript 1.1.
ECMAScript 5.1 (ECMA-262)
Standard
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of "RegExp" in that specification.
Standard The RegExp constructor no longer throws when the first argument is a RegExp and the second argument is present. Introduces Unicode and sticky flags.
ECMAScript Latest Draft (ECMA-262)
The definition of "RegExp" in that specification.
Draft

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

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

Синтаксис:

//Первый вариант создания регулярного выражения var regexp=new RegExp(шаблон ,модификаторы ); //Второй вариант создания регулярного выражения var regexp=/шаблон /модификаторы ;

шаблон позволяет задать шаблон символов для поиска.

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

  • i - поиск без учета регистра букв;
  • g - глобальный поиск (будут найдены все совпадения в документе, а не только первое);
  • m - многострочный поиск.

Поиск слов и выражений

Самым простым применением регулярных выражений является поиск слов и выражений в различных текстах.

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

//Зададим регулярное выражение rv1 rv1=/Россия/; //Зададим регулярное выражение rv2 rv2=/Россия/g; //Зададим регулярное выражение rv3 rv3=/Россия/ig; //Жирным шрифтом выделено, где в тексте будут найдены совпадения при использовании //выражения rv1: Россия является крупнейшим государством мира. Россия граничит с 18 странами. РОССИЯ является государством-продолжателем СССР. //Жирным шрифтом выделено, где в тексте будут найдены совпадения при использовании //выражения rv2: Россия является крупнейшим государством мира. Россия граничит с 18 странами. РОССИЯ является государством-продолжателем СССР."; //Жирным шрифтом выделено, где в тексте будут найдены совпадения при использовании //выражения rv3: Россия является крупнейшим государством мира. Россия граничит с 18 странами. РОССИЯ является государством - продолжателем СССР.";

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

Помимо обычных символов в шаблонах регулярных выражений могут использоваться специальные символы (метасимволы). Специальные символы с описаниями приведены в таблице ниже:

Специальный символ Описание
. Совпадает с любым символом, кроме символа конца строки.
\w Совпадает с любым буквенным символом.
\W Совпадает с любым не буквенным символом.
\d Совпадает с символами, которые являются цифрами.
\D Совпадает с символами, которые не являются цифрами.
\s Совпадает с пробельными символами.
\S Совпадает с не пробельными символами.
\b Совпадения будут искаться только на границах слов (в начале или конце).
\B Совпадения будут искаться только не на границах слов.
\n Совпадает с символом перевода строки.

/* Выражение reg1 найдет все слова начинающиеся на две произвольные буквы и заканчивающиеся на "вет". Так как слова в предложении разделяются пробелом, то в начале и в конце добавим спецсимвол \s) */ reg1=/\s..вет\s/g; txt=" привет завет вельвет клозет "; document.write(txt.match(reg1) + "
"); /* Выражение reg2 найдет все слова начинающиеся на три произвольные буквы и заканчивающиеся на "вет" */ reg2=/\s...вет\s/g; document.write(txt.match(reg2) + "
"); txt1=" при2вет привет при1вет "; /* Выражение reg3 найдет все слова, которые начинаются на "при" в которых потом следует 1 цифра и заканчиваются на "вет" */ var reg3=/при\dвет/g; document.write(txt1.match(reg3) + "
"); // Выражение reg4 найдет все цифры в тексте var reg4=/\d/g; txt2="5 лет учебы, 3 года плавания, 9 лет стрельбы." document.write(txt2.match(reg4) + "
");

Быстрый просмотр

Символы в квадратных скобках

Используя квадратные скобки [кейу] Вы можете указать группу символов, поиск которых нужно произвести.

Символ ^ перед группой символов в квадратных скобках [^квг] говорит о том, что нужно произвести поиск всех символов алфавита кроме заданных.

Используя тире (-) между символами в квадратных скобках [а-з] Вы можете задать диапазон символов, поиск которых нужно произвести.

С помощью квадратных скобок Вы можете также искать числа.

//Зададим регулярное выражение reg1 reg1=/\sко[тдм]\s/g; //Зададим строку текста txt1 txt1=" кот коса код комод ком ковер "; //Произведем с помощью регулярного выражения reg1 поиск по строке txt1 document.write(txt1.match(reg1) + "
"); reg2=/\sсло[^тг]/g; txt2=" слот слон слог "; document.write(txt2.match(reg2) + "
"); reg3=//g; txt3="5 лет учебы, 3 года плавания, 9 лет стрельбы"; document.write(txt3.match(reg3));

Быстрый просмотр

Квантификаторы

Квантификатор - это конструкция позволяющая задать сколько раз предшествующий ей символ или группа символов должна встречаться в совпадение.

Синтаксис:

//Предшествующий символ должен встречаться x - раз {x} //Предшествующий символ должен встречаться от x до у раз включительно {x,y} //Предшествующий символ должен встречаться не менее x раз {x,} //Указывает, что предшествующий символ должен встречаться 0 или более раз * //Указывает что предшествующий символ должен встречаться 1 или более раз + //Указывает что предшествующий символ должен встречаться 0 или 1 раз ?


//Зададим регулярное выражение rv1 rv1=/ко{5}шка/g //Зададим регулярное выражение rv2 rv2=/ко{3,}шка/g //Зададим регулярное выражение rv3 rv3=/ко+шка/g //Зададим регулярное выражение rv4 rv4=/ко?шка/g //Зададим регулярное выражение rv5 rv5=/ко*шка/g //Жирным шрифтом показано, где в тексте будут найдены совпадения при использовании //выражения rv1: кшка кошка коошка кооошка коооошка кооооошка коооооошка кооооооошка //Жирным шрифтом показано, где в тексте будут найдены совпадения при использовании //выражения rv2: кшка кошка коошка кооошка коооошка кооооошка коооооошка кооооооошка //Жирным шрифтом показано, где в тексте будут найдены совпадения при использовании //выражения rv3: кшка кошка коошка кооошка коооошка кооооошка коооооошка кооооооошка //Жирным шрифтом показано, где в тексте будут найдены совпадения при использовании //выражения rv4: кшка кошка коошка кооошка коооошка кооооошка коооооошка кооооооошка //Жирным шрифтом показано, где в тексте будут найдены совпадения при использовании //выражения rv5: кшка кошка коошка кооошка коооошка кооооошка коооооошка кооооооошка

Обратите внимание: если Вы хотите использовать какой-либо специальный символ (такой как. * + ? или {}) как обычный Вы должны поставить перед ним \.

Использование круглых скобок

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

К примеру регулярное выражение /(Дмитрий)\sВасильев/ найдет строку "Дмитрий Васильев" и запомнит подстроку "Дмитрий".

В примере ниже мы используем метод replace(), чтобы изменить порядок слов в тексте. Для обращения к сохраненным совпадениям мы используем $1 и $2.

Var regexp = /(Дмитрий)\s(Васильев)/; var text = "Дмитрий Васильев"; var newtext = text.replace(regexp, "$2 $1"); document.write(newtext);

Быстрый просмотр

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

 

 

Это интересно: