Регулярные javascript. Совпадение множества символов
Тема регулярных выражений достаточно объемная и в одном уроке ее не охватить, но цель наших уроков дать Вам основные представления о языке javascript и его возможностях, поэтому и обойти стороной регулярные выражения никак нельзя.
Для начала разберемся, что же это такое.
Регулярное выражение
- это инструкция, описывающая на специально разработанном языке (RegExp)
закон "сходства" искомой строки с образцом.
Для чего это нужно? Например:
- Для организации поиска в тексте чего-либо.
- Для замены одной части подстрок другими.
- Для проверки корректности пользовательского ввода (наверно, вы не раз сталкивались с ситуацией, когда вводили адрес своей электронной почты в какую-либо форму и получали ошибку типа "Некорректный e-mail").
Не будем вдаваться в подробности, а посмотрим как задавать регулярные выражения. Существует два способа, в данной уроке мы рассмотрим один (создание в литеральной нотации):
Var p=/pattern/flags;
Где
pattern
- шаблон, является основой регулярного выражения, определяющей критерии сопоставления строк. Состоит из
литералов и метасимволов.
flags
- флаги (модификаторы), задают дополнительные параметры сопоставления шаблона.
Var par=/+/i;
Здесь + - шаблон, буквально означающий следующее "любое количество цифр и букв 1 и более раз" (как задавать шаблон посмотрим чуть ниже).
i
Чтобы было понятнее о чем речь, рассмотрим пример. Предположим, что у нас есть форма, куда пользователь вводит свой e-mail и пароль. Мы хотим, чтобы при нажатии на кнопку "Зарегистрировать" осуществлялась проверка корректности ввода.
Код html-страницы будет следующим:
Javascript регулярные выражения
Форма регистрации
Итак, что же должна сделать функция prov_adress() ? Для начала нам нужны две переменные, в которые мы поместим значения, введенные пользователем:
function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; }
Теперь нам нужно задать образцы (регулярные выражения), с которыми мы и будем сравнивать то, что ввел пользователь. Здесь, я их просто приведу, о том, как их составлять поговорим позже:
function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; var adr_pattern=/+@+\.{2,5}/i; var par_pattern=/+/i; }
Теперь осуществляем проверку на сопоставление образцу. Для этого воспользуемся методом test объекта RegExp :
function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; var adr_pattern=/+@+\.{2,5}/i; var par_pattern=/+/i; var prov=adr_pattern.test(adr); var prov1=par_pattern.test(par); }
Строка adr_pattern.test(adr) означает следующее: проверить существование в строке adr последовательности, сопоставляющейся с регулярным выражением adr_pattern . Метод test возвращает логическое значение (true или false).
Нам осталось только указать в нашей функции, что делать в случае успешной (или неуспешной) проверки:
function prov_adress(obj) { var adr=obj.mail.value; var par=obj.pas.value; var adr_pattern=/+@+\.{2,5}/i; var par_pattern=/+/i; var prov=adr_pattern.test(adr); var prov1=par_pattern.test(par); if (prov==true && prov1==true) { alert("Вы зарегистрированы!"); } else { alert("Введенные данные некорректны!"); } }
Готово, надеюсь, суть того, что мы делаем вы поняли. Но прежде, чем проверить работу нашего сценария, посмотрим, из чего же состоят наши регулярные выражения.
Возьмем регулярное выражение для нашего пароля - /+/i :
- /+/
- шаблон, в котором:
- 0-9 - любая цифра.
- a-z - любая строчная буква от a до z.
- - квадратные скобки означают, что в шаблоне может присутствовать любой из перечисленных в них литералов (в нашем случае цифры и строчные буквы)
- + - указывает, что данная часть шаблона (т.е. то, что в квадратных скобках) может повторяться один и более раз.
- i - флаг, означающий, что регистр символов не имеет значение.
Например, если пользователь введет в поле пароля "2", "a3b" или "leopard", то такой пароль будет считаться корректным. А если, он введет "ab&s" или "24?", то такой пароль корректным считаться не будет, т.к. он содержит спецсимволы, а мы их в регулярном выражении не разрешили.
Надеюсь теперь стало понятно как и зачем можно использовать регулярные выражения, осталось узнать принципы их составления. Собственно говоря, задача составления регулярного выражения сводится к созданию его шаблона. А шаблон, как вы помните, может состоять из литералов и метасимволов.
Начнем с самого простого - литералов:
- Каждый из таких символов представляет сам себя. Например, /abc/ - такому шаблону сопоставима только строка "abc".
- a-z - все строчные буквы от a до z. Например, /a-z/ - такому шаблону сопоставляются 26 строк: "a", "b", "c"... "z"
- A-Z - все заглавные буквы от A до Z.
- 0-9 - все цифры.
- * - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться 0 и более раз. Например, /ab*c/ - означает, что строка начинается с символа a, затем может быть сколько угодно символов b, после которых следует символ c. Т.е. это могут быть, например, такие строки: "ac", "abc", "abbbbbbc" и т.д.
- + - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться 1 и более раз. Например, /ab+c/ - означает, что строка начинается с символа a, затем может быть сколько угодно символов b (но не меньше 1), после которых следует символ c. Т.е. это могут быть, например, такие строки: "abc", "abbbbbbc" и т.д.
- . - указывает, что на этом месте может быть любой одиночный символ, кроме символа новой строки. Например, для шаблона /ab.c/ сопоставимы такие строки: "ab6c", "abxc", "ab=c" и т.д.
- ? - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться 0 или 1 раз. Например, /ab?c/ - означает, что строка начинается с символа a, затем может быть или не быть один символ b, после которого следует символ c. Т.е. это могут быть такие строки: "ac", "abc"
- {n} - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться ровно n раз. Например, /ab{3}c/ - означает, что строка начинается с символа a, затем идут 3 символа b, после которых следует символ c. Т.е. это будет строка "abbbc".
- {n,} - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться n и более раз. Например, /ab{3,}c/ - означает, что строка начинается с символа a, затем идут 3 или более символов b, после которых следует символ c. Т.е. это могут быть такие строки: "abbbc", "abbbbbbbc" и т.д.
- {n, m} - указывает, что символ (или часть шаблона, если она заключена в квадратные скобки) может повторяться от n до m раз. Например, /ab{1,3}c/ - означает, что строка начинается с символа a, затем идут от 1 до 3 символов b, после которых следует символ c. Т.е. это могут быть такие строки: "abc", "abbc", "abbbc".
- - такой шаблон сопоставим с любым одиночным символом, принадлежащим множеству, определенному в скобках. Множество задается перечислением или указанием диапазона. Например, шаблону // могут быть сопоставимы строки: "a", "b", "c".
- [^] - такой шаблон сопоставим с любым одиночным символом, не принадлежащим множеству, определенному в скобках. Например, шаблону /[^abc]/ могут быть сопоставимы строки: "f", "x", "Z", но не могут быть сопоставимы строки: "a", "b", "c".
- ^ - указывает, что символы сопоставимы с началом строки. Например, шаблону /^abc/ могут быть сопоставимы строки: "abcd", "abcfh", но не могут быть сопоставимы строки: "dabc", "cbabc" и т.д.
- $ - указывает, что символы сопоставимы с концом строки. Например, шаблону /abc$/ могут быть сопоставимы строки: "dabc", "fhabc", но не могут быть сопоставимы строки: "abcd", "abccb" и т.д.
- | - указывает на несколько альтернативных шаблонов. Например, шаблону /ab|c/ будут сопоставимы строки: "ab" и "c".
- \
- служит для экранирования специальных символов, т.е. обратный слэш перед символом указывает на то,
что он должен интерпретироваться как специальный. Например:
- \d - соответствует любая цифра от 0 до 9.
- \D - соответствует все, кроме цифры.
- \s - соответствует пробел.
- \S - соответствует все, кроме пробела.
- \w - соответствует буква, цифра или знак подчеркивания.
- \W - соответствует все, кроме буквы, цифры или знака подчеркивания.
Например, шаблону /x\d\d/ будут соответствовать строки: "x01", "x25" и т.д., но не будут соответствовать строки: "A15", "x0A"...
Также обратный слэш используется, чтобы специальный символ сделать литеральным. Например, если нам нужно найти строку "a*b", то мы зададим следующий шаблон /a\*b/.
Var adr_pattern=/+@+\.{2,5}/i;
Итак, мы указали, что в адресе электронной почты идут цифры, буквы и знаки подчеркивания 1 и более раз, затем следует символ @, затем снова идут цифры, буквы и знаки подчеркивания 1 и более раз, затем идет символ точки, после которой идут буквы от 2 до 5 раз. Примерно такой вид имеют адреса электронной почты.
Теперь, зная, что именно мы задали в образце, можно проверить работу примера:
Класс 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 должно быть целым положительным числом. |
JavaScript regexp – это тип объекта, который используется для сопоставления последовательности символов в строках.
Создаем первое регулярное выражение
Существует два способа создания регулярного выражения: с использованием литерала регулярного выражения или с помощью конструктора регулярных выражений. Каждый из них представляет один и тот же шаблон: символ «c », за которым следует «a », а затем символ «t ».
// литерал регулярного выражения заключается в слэши (/)
var option1 = /cat/;
// Конструктор регулярнго выражения
var option2 = new RegExp("cat");
Как правило, если регулярное выражение остается константой, то есть не будет меняться, лучше использовать литерал регулярного выражения. Если оно будет меняться или зависит от других переменных, лучше использовать метод с конструктором.
Метод RegExp.prototype.test()
Помните, я говорил, что регулярные выражения являются объектами? Это означает, что у них есть ряд методов. Самый простой метод – это JavaScript regexp test , который возвращает логическое значение:
True (истина ): строка содержит шаблон регулярного выражения.
False (ложь ): совпадения не найдено.
console.log(/cat/.test(“the cat says meow”));
// верно
console.log(/cat/.test(“the dog says bark”));
// неверно
Памятка по основам регулярных выражений
Секрет регулярных выражений заключается в запоминании типовых символов и групп. Я настоятельно рекомендую потратить несколько часов на таблицу, приведенную ниже, а затем вернуться, и продолжить изучение.
Символы
- . – (точка ) соответствует любому одиночному символу за исключением переноса строки;
- * – соответствует предыдущему выражению, которое повторяется 0 или более раз;
- + – соответствует предыдущему выражению, которое повторяется 1 или более раз;
- ? – предыдущее выражение является необязательным (соответствует 0 или 1 раз );
- ^ – соответствует началу строки;
- $ – соответствует концу строки.
Группы символов
- d – соответствует любому одиночному цифровому символу.
- w – соответствует любому символу (цифре, букве или знаку подчёркивания).
- [XYZ ] – набор символов. Соответствует любому одиночному символу из набора, заданного в скобках. Также можно задавать и диапазоны символов, например, .
- [XYZ ]+ – соответствует символу из набора, повторяемого один или более раз.
- [^A —Z ] – внутри набора символов «^ » используется как знак отрицания. В данном примере шаблону соответствует всё, что не является буквами в верхнем регистре.
Флаги :
В JavaScript regexp существует пять необязательных флагов. Они могут использоваться отдельно или вместе, и размещаются после закрывающего слеша. Например: /[A —Z ]/g . Здесь я приведу только два флага.
g – глобальный поиск.
i – поиск, нечувствительный к регистру.
Дополнительные конструкции
(x ) – захватывающие скобки. Это выражение соответствует x и запоминает это соответствие, поэтому им можно воспользоваться позже.
(?:x ) – незахватывающие скобки. Выражение соответствует x , но не запоминает это соответствие.
Соответствует x , только если за ним следует y .
Протестируем изученный материал
Сначала протестируем все выше сказанное. Допустим, что мы хотим проверить строку на наличие любых цифр. Для этого можно использовать конструкцию «d ».
console.log(/d/.test("12-34"));
// верно
Приведенный выше код возвращает значение true , если в строке есть хотя бы одна цифра. Что делать, если нужно проверить строку на соответствие формату? Можно использовать несколько символов «d », чтобы определить формат:
console.log(/dd-dd/.test("12-34"));
//верно
console.log(/dd-dd/.test("1234"));
//неверно
Если неважно, как в JavaScript regexp online идут цифры до и после знака «— », можно использовать символ «+ », чтобы показать, что шаблон «d » встречается один или несколько раз:
console.log(/d+-d+/.test("12-34"));
// верно
console.log(/d+-d+/.test("1-234"));
// верно
console.log(/d+-d+/.test("-34"));
// неверно
Для простоты можно использовать скобки, чтобы сгруппировать выражения. Допустим, у нас есть мяуканье кошки, и мы хотим проверить соответствие шаблону «meow » (мяу ):
console.log(/me+(ow)+w/.test("meeeeowowoww"));
// верно
Теперь давайте разберемся.
m => соответствие одной букве ‘m ‘;
e + => соответствие букве «e» один или несколько раз;
(ow) + => соответствие буквам «ow» один или несколько раз;
w => соответствие букве ‘w ’;
‘m’ + ‘eeee’ + ‘owowow’ + ‘w’ .
Когда операторы типа «+ » используются сразу после скобок, они влияют на все содержимое скобок.
Оператор «? ». Он указывает, что предыдущий символ является необязательным. Как вы увидите ниже, оба тестовых примера возвращают значение true , потому что символы «s » помечены как необязательные.
console.log(/cats? says?/i.test("the Cat says meow"));
//верно
console.log(/cats? says?/i.test("the Cats say meow"));
//верно
Если вы захотите найти символ слеша, нужно экранизировать его с помощью обратного слеша. То же самое верно для других символов, которые имеют особое значение, например, вопросительного знака. Вот JavaScript regexp пример того, как их искать:
var slashSearch = ///;
var questionSearch = /?/;
- d – это то же самое, что и : каждая конструкция соответствует цифровому символу.
- w – это то же самое, что [A —Za —z 0-9_] : оба выражения соответствуют любому одиночному алфавитно-цифровому символу или подчеркиванию.
Пример: добавляем пробелы в строки, написанные в «верблюжьем » стиле
В этом примере мы очень устали от «верблюжьего » стиля написания и нам нужен способ добавить пробелы между словами. Вот пример:
removeCc("camelCase") // => должен вернуть "camel Case"
Существует простое решение с использованием регулярного выражения. Во-первых, нам нужно найти все заглавные буквы. Это можно сделать с помощью поиска набора символов и глобального модификатора.
Это соответствует символу «C » в «camelCase »
Теперь, как добавить пробел перед «C »?
Нам нужно использовать захватывающие скобки! Они позволяют найти соответствие и запомнить его, чтобы использовать позже! Используйте захватывающие скобки, чтобы запомнить найденную заглавную букву:
Получить доступ к захваченному значению позднее можно так:
Выше мы используем $1 для доступа к захваченному значению. Кстати, если бы у нас было два набора захватывающих скобок, мы использовали бы $1 и $2 для ссылки на захваченные значения и аналогично для большего количества захватывающих скобок.
Если вам нужно использовать скобки, но не нужно фиксировать это значение, можно использовать незахватывающие скобки: (?: x ). В этом случае находится соответствие x , но оно не запоминается.
Вернемся к текущей задаче. Как мы реализуем захватывающие скобки? С помощью метода JavaScript regexp replace ! В качестве второго аргумента мы передаем «$1 ». Здесь важно использовать кавычки.
function removeCc(str){
return str.replace(/()/g, "$1");
}
Снова посмотрим на код. Мы захватываем прописную букву, а затем заменяем ее той же самой буквой. Внутри кавычек вставим пробел, за которым следует переменная $1 . В итоге получаем пробел после каждой заглавной буквы.
function removeCc(str){
return str.replace(/()/g, " $1");
}
removeCc("camelCase") // "camel Case"
removeCc("helloWorldItIsMe") // "hello World It Is Me"
Пример: удаляем заглавные буквы
Теперь у нас есть строка с кучей ненужных прописных букв. Вы догадались, как их удалить? Во-первых, нам нужно выбрать все заглавные буквы. Затем используем поиск набора символов с помощью глобального модификатора:
Мы снова будем использовать метод replace , но как в этот раз сделать строчной символ?
function lowerCase(str){
return str.replace(//g, ???);
}
Подсказка : в методе replace () в качестве второго параметра можно указать функцию.
Мы будем использовать стрелочную функцию, чтобы не захватывать значение найденного совпадения. При использовании функции в методе JavaScript regexp replace эта функция будет вызвана после поиска совпадений, и результат функции используется в качестве замещающей строки. Еще лучше, если совпадение является глобальным и найдено несколько совпадений — функция будет вызвана для каждого найденного совпадения.
function lowerCase(str){
return str.replace(//g, (u) => u.toLowerCase());
}
lowerCase("camel Case") // "camel case"
lowerCase("hello World It Is Me") // "hello world it is me"
Пример: преобразуем первую букву в заглавную
capitalize("camel case") // => должен вернуть "Camel case"
Еще раз воспользуемся функцией в методе replace(). Однако на этот раз нам нужно искать только первый символ в строке. Напомним, что для этого используется символ «^ ».
Давайте на секунду задержимся на символе «^ ». Вспомните пример, приведенный ранее:
console.log(/cat/.test("the cat says meow"));
//верно
При добавлении символа «^ » функция больше не возвращает значение true , поскольку слово «cat » находится не в начале строки.
В JavaScript регулярные выражения представлены объектами RegExp . Объекты RegExp могут быть созданы посредством конструктора RegExp(), но чаще они создаются с помощью специального синтаксиса литералов. Так же как строковые литералы задаются в виде символов, заключенных в кавычки, литералы регулярных выражений задаются в виде символов, заключенных в пару символов слэша / .
/pattern/флаги new RegExp("pattern"[, опции поиска])
pattern - регулярное выражение для поиска (о замене - позже), а флаги - строка из любой комбинации символов g(глобальный поиск), i(регистр неважен) и m(многострочный поиск). Первый способ используется часто, второй - иногда. Например, два таких вызова эквивалентны.
Опции поиска
При создании регулярного выражения мы можем указать дополнительных опции поиска
Символы в регулярных выражениях JavaScript
Символ | Соответствие |
---|---|
Алфавитно-цифровые символы | Соответствуют сами себе |
\0 | Символ NUL (\u0000) |
\t | Табуляция (\u0009) |
\n | Перевод строки (\u000A) |
\v | Вертикальная табуляция (\u000B) |
\f | Перевод страницы (\u000C) |
\r | Возврат каретки (\u000D) |
\xnn | Символ из набора Latin, задаваемый шестнадцатеричным числом nn; например, \x0A - это то же самое, что \n |
\uxxxx | Unicode-символ, заданный шестнадцатеричным числом xxxx; например, \u0009 - это то же самое, что \t |
\cX | Управляющий символ "X", например, последовательность \cJ эквивалентна символу перевода строки \n |
\ | Для обычных символов - делает их специальными. Например, выражение /s/ ищет просто символ "s". А если поставить \ перед s, то /\s/ уже обозначает пробельный символ.И наоборот, если символ специальный, например *, то \ сделает его просто обычным символом "звездочка". Например, /a*/ ищет 0 или больше подряд идущих символов "a". Чтобы найти а со звездочкой "a*" - поставим \ перед спец. символом: /a\*/ . |
^ | Обозначает начало входных данных. Если установлен флаг многострочного поиска ("m") , то также сработает при начале новой строки.Например, /^A/ не найдет "A" в "an A", но найдет первое "A" в "An A." |
$ | Обозначает конец входных данных. Если установлен флаг многострочного поиска, то также сработает в конце строки.Например, /t$/ не найдет "t" в "eater", но найдет - в "eat". |
* | Обозначает повторение 0 или более раз. Например, /bo*/ найдет "boooo" в "A ghost booooed" и "b" в "A bird warbled", но ничего не найдет в "A goat grunted". |
+ | Обозначает повторение 1 или более раз. Эквивалентно {1,} . Например, /a+/ найдет "a" в "candy" и все "a" в "caaaaaaandy". |
? | Обозначает, что элемент может как присутствовать, так и отсутствовать. Например, /e?le?/ найдет "el" в "angel" и "le" в "angle."Если используется сразу после одного из квантификаторов * , + , ? , или {} , то задает "нежадный" поиск (повторение минимально возможное количество раз, до ближайшего следующего элемента паттерна), в противоположность "жадному" режиму по умолчанию, при котором количество повторений максимально, даже если следующий элемент паттерна тоже подходит.Кроме того, ? используется в предпросмотре, который описан в таблице под (?=) , (?!) , и (?:) . |
. | (Десятичная точка) обозначает любой символ, кроме перевода строки: \n \r \u2028 or \u2029. (можно использовать [\s\S] для поиска любого символа, включая переводы строк). Например, /.n/ найдет "an" и "on" в "nay, an apple is on the tree", но не "nay". |
(x) | Находит x и запоминает. Это называется "запоминающие скобки". Например, /(foo)/ найдет и запомнит "foo" в "foo bar." Найденная подстрока хранится в массиве-результате поиска или в предопределенных свойствах объекта RegExp: $1, ..., $9 .Кроме того, скобки объединяют то, что в них находится, в единый элемент паттерна. Например, (abc)* - повторение abc 0 и более раз. |
(?:x) | Находит x , но не запоминает найденное. Это называется "незапоминающие скобки". Найденная подстрока не сохраняется в массиве результатов и свойствах RegExp.Как и все скобки, объединяют находящееся в них в единый подпаттерн. |
x(?=y) | Находит x , только если за x следует y . Например, /Jack(?=Sprat)/ найдет "Jack", только если за ним следует "Sprat". /Jack(?=Sprat|Frost)/ найдет "Jack", только если за ним следует "Sprat" или "Frost". Однако, ни "Sprat" ни "Frost" не войдут в результат поиска. |
x(?!y) | Находит x , только если за x не следует y . Например, /\d+(?!\.)/ найдет число, только если за ним не следует десятичная точка. /\d+(?!\.)/.exec("3.141") найдет 141, но не 3.141. |
x|y | Находит x или y . Например, /green|red/ найдет "green" в "green apple" и "red" в "red apple." |
{n} | Где n - положительное целое число. Находит ровно n повторений предшествующего элемента. Например, /a{2}/ не найдет "a" в "candy," но найдет оба a в "caandy," и первые два a в "caaandy." |
{n,} | Где n - положительное целое число. Находит n и более повторений элемента. Например, /a{2,} не найдет "a" в "candy", но найдет все "a" в "caandy" и в "caaaaaaandy." |
{n,m} | Где n и m - положительные целые числа. Находят от n до m повторений элемента. |
Набор символов. Находит любой из перечисленных символов. Вы можете указать промежуток, используя тире. Например, - то же самое, что . Найдет "b" в "brisket", а также "a" и "c" в "ache". | |
[^xyz] | Любой символ, кроме указанных в наборе. Вы также можете указать промежуток. Например, [^abc] - то же самое, что [^a-c] . Найдет "r" в "brisket" и "h" в "chop." |
[\b] | Находит символ backspace. (Не путать с \b .) |
\b | Находит границу слов (латинских), например пробел. (Не путать с [\b]). Например, /\bn\w/ найдет "no" в "noonday"; /\wy\b/ найдет "ly" в "possibly yesterday." |
\B | Обозначает не границу слов. Например, /\w\Bn/ найдет "on" в "noonday", а /y\B\w/ найдет "ye" в "possibly yesterday." |
\cX | Где X - буква от A до Z. Обозначает контрольный символ в строке. Например, /\cM/ обозначает символ Ctrl-M. |
\d | находит цифру из любого алфавита (у нас же юникод). Испльзуйте , чтобы найти только обычные цифры. Например, /\d/ или // найдет "2" в "B2 is the suite number." |
\D | Найдет нецифровой символ (все алфавиты). [^0-9] - эквивалент для обычных цифр. Например, /\D/ или /[^0-9]/ найдет "B" в "B2 is the suite number." |
\s | Найдет любой пробельный символ, включая пробел, табуляцию, переводы строки и другие юникодные пробельные символы. Например, /\s\w*/ найдет " bar" в "foo bar." |
\S | Найдет любой символ, кроме пробельного. Например, /\S\w*/ найдет "foo" в "foo bar." |
\v | Символ вертикальной табуляции. |
\w | Найдет любой словесный (латинский алфавит) символ, включая буквы, цифры и знак подчеркивания. Эквивалентно . Например, /\w/ найдет "a" в "apple," "5" в "$5.28," и "3" в "3D." |
\W | Найдет любой не-(лат.)словесный символ. Эквивалентно [^A-Za-z0-9_] . Например, /\W/ и /[^$A-Za-z0-9_]/ одинаково найдут "%" в "50%." |
Работа с регулярными выражениями в Javascript
Работа с регулярными выражениями в Javascript реализована методами класса String
exec(regexp) - находит все совпадения (вхождения в шаблон "регулярки") в строке. Возвращает массив (при совпадении) и обновляет свойство regexp-а, или null - если ничего не найдено,. С модификатором g - при каждом вызове этой функции, она будет возвращать следующее совпадение после предыдущего найденного - это реализовано с помощью ведения индекса смещения последнего поиска.
match(regexp) - найти часть строки по шаблону. Если указан модификатор g, то функция match() возвращает массив всех совпадений или null (а не пустой массив). Без модификатора g эта функция работает как exec();
test(regexp) - функция проверяет строку на соответствие шаблону. Возвращает true - если есть совпадение, и false - если совпадения нет.
split(regexp) - разбивает строку, для которой он вызван, на массив подстрок, используя аргумент в качестве разделителя.
replace(regexp, mix) - метод возвращает строку изменную в соответствии с шаблоном (регуляррным выражением). Первый параметр regexp также может содержать строку, а не регулярное выражение. Без модификатора g - метод в строке заменяет только первое вхождение; с модификатором g - происходит глобальная замена, т.е. меняются все вхождения в данной строке. mix - шаблон замены, может принитать значения строки, шаблона замены, функции (имя функции).
Спецсимволы в строке замены
Замена через функцию
Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении. В функции можно динамически генерировать и возвращать строку подстановки. Первый параметр функции - найденная подстрока. Если первым аргументом replace является объект RegExp, то следующие n параметров содержат совпадения из вложенных скобок. Последние два параметра - позиция в строке, на которой произошло совпадение и сама строка.
Regex или регулярные выражения пугают новичков, но необходимы любому программисту. Давайте разберемся в регулярных выражениях на 5 простых примерах с JavaScript.
Если у вас есть проблема и вы собираетесь решить ее регулярными выражениями – теперь у вас две проблемы. Есть такая поговорка. Регулярные выражения встречающиеся в коде, порой вызывают страх и ненависть у людей, которые с ними не знакомы.
Но фактически, любой regex – это всего лишь шаблонное выражение, способное в одну строку решить задачу целой функции. Однако для построения регулярного выражения необходимо учитывать набор строгих правил, в которых новичок может запутаться и ошибиться.
Совпадающие символы
Самые базовые регулярные выражения это те, что ищут совпадения по одному символу. Вот их правила:
1. Точка (.) соответствует любому символу. Если нужно искать именно точку, ее необходимо экранировать с помощью символа «\» (\.).
2. Знак вопроса (?) означает, что предыдущий символ является необязательным. Чтобы искать сам знак вопроса в строке, его также необходимо экранировать с помощью «\» (\?).
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit lest. Donec convallis dignissim ligula, et rutrum est elat vistibulum eu."; // Подойдут оба и "elit", и "elat". Точка означает, что подойдет любой символ. var regex = /el.t/g; console.log(text.match(regex)); // "est" и "lest" одинаково подойдут. Знак вопроса делает "l" необязательной. var regex2 = /l?est/g; console.log(text.match(regex2));
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit lest. Donec convallis dignissim ligula, et rutrum est elat vistibulum eu." ; // Подойдут оба и "elit", и "elat". Точка означает, что подойдет любой символ. var regex = /el.t/g ; console . log (text . match (regex ) ) ; // "est" и "lest" одинаково подойдут. Знак вопроса делает "l" необязательной. var regex2 = /l?est/g ; console . log (text . match (regex2 ) ) ; |
Совпадение множества символов
Множество – это один или несколько символов, заключенных в скобки, например . Такое выражение будет искать в строке только этот набор символов – в данном примере только a, b или c. Можно наоборот, искать вхождения любых символов, кроме с помощью символа «^». [^ abc] будет соответствовать любому символу, который не является a, b или c. Также можно указать диапазон символов или чисел, например , .
Существуют встроенные наборы символов, упрощающие запись регулярных выражений. Их называют сокращениями или shorthand. К примеру, вместо можно написать \D. Есть сокращения и для остальных символов (включая цифры и знак подчеркивания) – \w и \W, а также для пробелов – \s и \S.
// Подойдут только "cat" и "can", но не "car". var text = "cat car can"; console.log(text.match(/ca/g)); // Пройдет все, кроме cat и can (присутствует символ ^) console.log(text.match(/ca[^tn]/g)); // Еще один пример, где пройдут только цифры text = "I would like 8 cups of coffee, please."; console.log("How many cups: " + text.match(//g)); // Более простой способ с помощью сокращения \d console.log("How many cups: " + text.match(/\d/g)); // Пройдет все, кроме цифр console.log(text.match(/\D/g));
// Подойдут только "cat" и "can", но не "car". var text = "cat car can" ; console . log (text . match (/ca/g ) ) ; // Пройдет все, кроме cat и can (присутствует символ ^) console . log (text . match (/ca[^tn]/g ) ) ; // Еще один пример, где пройдут только цифры text = "I would like 8 cups of coffee, please." ; console . log ("How many cups: " + text . match (//g ) ) ; // Более простой способ с помощью сокращения \d console . log ("How many cups: " + text . match (/\d/g ) ) ; // Пройдет все, кроме цифр console . log (text . match (/\D/g ) ) ; |
Совпадающие слова
В большинстве случаев вам нужно искать целые слова, а не отдельные символы. Это делается с помощью модификаторов (+) и (—), которые повторяют символ или набор символов.
Добавление {X} задает точное количество повторений, {x, y} – диапазон (x и y — числа).
Кроме того, есть специальный шаблон \b, который соответствует границам на концах слов.
var text = "Hello people of 1974. I come from the future. In 2014 we have laser guns, hover boards and live on the moon!"; // Найдет годы. \d+ найдет один и более знаков var yearRegex = /\d+/g; console.log("Years: ", text.match(yearRegex)); // Найдет все предложения. Наши предложения начинаются с заглавной буквы, а кончаются точкой или восклицательным знаком. var sentenceRegex = /.+?(\.|!)/g; console.log("Sentences: ", text.match(sentenceRegex)); // Найдет все слова, начинающиеся на "h". Нам подойдут и заглавные и строчные, так что используем модификатор i // \b для определения границы слов. var hWords = /\bh\w+/ig; console.log("H Words: ", text.match(hWords)); // Найдет все слова от 4 до 6 символов var findWords = /\b\w{4,6}\b/g; console.log("Words between 4 and 6 chars: ", text.match(findWords)); // Найдет слова длиннее 5 символов console.log("Words 5 chars or longer: ", text.match(/\b\w{5,}\b/g)); // Найдет слова точно 6 символов длиной console.log("Words exactly 6 chars long: ", text.match(/\b\w{6}\b/g));
var text = "Hello people of 1974. I come from the future. In 2014 we have laser guns, hover boards and live on the moon!" ; // Найдет годы. \d+ найдет один и более знаков var yearRegex = /\d+/g ; console . log ("Years: " , text . match (yearRegex ) ) ; // Найдет все предложения. Наши предложения начинаются с заглавной буквы, а кончаются точкой или восклицательным знаком. var sentenceRegex = /.+?(\.|!)/g ; console . log ("Sentences: " , text . match (sentenceRegex ) ) ; // Найдет все слова, начинающиеся на "h". Нам подойдут и заглавные и строчные, так что используем модификатор i // \b для определения границы слов. var hWords = /\bh\w+/i g ; console . log ("H Words: " , text . match (hWords ) ) ; // Найдет все слова от 4 до 6 символов var findWords = /\b\w{4,6}\b/g ; console . log ("Words between 4 and 6 chars: " , text . match (findWords ) ) ; // Найдет слова длиннее 5 символов console . log ("Words 5 chars or longer: " , text . match (/\b\w{5,}\b/g ) ) ; // Найдет слова точно 6 символов длиной console . log ("Words exactly 6 chars long: " , text . match (/\b\w{6}\b/g ) ) ; |
Валидация целых строк
В JavaScript такие выражения можно использовать для проверки пользовательского ввода из текстовых полей. Для валидации строк используется обычное регулярное выражение, привязанное к началу и концу фрагмента текста, использующее для этого выражения ^ (начало строки) и $ (конец строки). Эти символы гарантируют, что шаблон, который вы пишете, охватывает всю длину текста, а не только соответствует его части.
Кроме того, в этом случае мы используем метод test() объекта regex, который возвращает true или false, при проверке соответствия регулярного выражения строке.
// У нас имеется массив строк, давайте найдем ссылки..com/", "123461", "https://сайт/?s=google", "http://not a valid url", "abc http://invalid.url/" ]; var regex = /^https?:\/\/[\w\/?.&-=]+$/; var urls = ; for(var i = 0; i < strings.length; i++){ if(regex.test(strings[i])){ // Валидная ссылка urls.push(strings[i]); } } console.log("Valid URLs: ", urls);
// У нас имеется массив строк, давайте найдем ссылки. var strings = [ "https://сайт/" , "this is not a URL" , "https://google.com/" , "123461" , "https://сайт/?s=google" , "http://not a valid url" , "abc http://invalid.url/" var regex = / ^ https ? : \ / \ / [ \ w \ / ? . & -= ] + $ / ; var urls = ; for (var i = 0 ; i < strings . length ; i ++ ) { if (regex . test (strings [ i ] ) ) { urls . push (strings [ i ] ) ; console . log ("Valid URLs: " , urls ) ; |
Поиск и замена
Другой общей задачей, которая облегчается использованием регулярных выражений, является поиск и замена текста.