JavaScript - Урок 14. Регулярные выражения

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

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

Для чего это нужно? Например:

Для организации поиска в тексте чего-либо.
Для замены одной части подстрок другими.
Для проверки корректности пользовательского ввода (наверно, вы не раз сталкивались с ситуацией, когда вводили адрес своей электронной почты в какую-либо форму и получали ошибку типа "Некорректный e-mail").

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


    var p=/pattern/flags;

где
pattern - шаблон, является основой регулярного выражения, определяющей критерии сопоставления строк. Состоит из литералов и метасимволов.
flags - флаги (модификаторы), задают дополнительные параметры сопоставления шаблона.

Пример:


    var par=/[0-9a-z]+/i;

Здесь [0-9a-z]+ - шаблон, буквально означающий следующее "любое количество цифр и букв 1 и более раз" (как задавать шаблон посмотрим чуть ниже).

i - флаг, означающий, что регистр символов не имеет значение.

Чтобы было понятнее о чем речь, рассмотрим пример. Предположим, что у нас есть форма, куда пользователь вводит свой e-mail и пароль. Мы хотим, чтобы при нажатии на кнопку "Зарегистрировать" осуществлялась проверка корректности ввода.

Код html-страницы будет следующим:

<html> <head> <title>javascript регулярные выражения</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Форма регистрации</h2> <form name="forma12"> <label>E-mail:</label><br> <input type="text" name="mail"><br> <label>Password:</label><br> <input type="password" name="pas"><br> <input type="button" value="Зарегистрировать" onclick="prov_adress(forma12);"> </form> </body> </html>

Итак, что же должна сделать функция 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=/[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i; var par_pattern=/[0-9a-z]+/i; }

Теперь осуществляем проверку на сопоставление образцу. Для этого воспользуемся методом test объекта RegExp:

Строка adr_pattern.test(adr) означает следующее: проверить существование в строке adr последовательности, сопоставляющейся с регулярным выражением adr_pattern. Метод test возвращает логическое значение (true или false).

Нам осталось только указать в нашей функции, что делать в случае успешной (или неуспешной) проверки:

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

Возьмем регулярное выражение для нашего пароля - /[0-9a-z]+/i:

/[0-9a-z]+/ - шаблон, в котором:
- 0-9 - любая цифра.
- a-z - любая строчная буква от a до z.
- [] - квадратные скобки означают, что в шаблоне может присутствовать любой из перечисленных в них литералов (в нашем случае цифры и строчные буквы)
- + - указывает, что данная часть шаблона (т.е. то, что в квадратных скобках) может повторяться один и более раз.

i - флаг, означающий, что регистр символов не имеет значение.

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

Например, если пользователь введет в поле пароля "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".

[] - такой шаблон сопоставим с любым одиночным символом, принадлежащим множеству, определенному в скобках. Множество задается перечислением или указанием диапазона. Например, шаблону /[abc]/ могут быть сопоставимы строки: "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 - соответствует все, кроме буквы, цифры или знака подчеркивания.

Используя вышеперечисленные литералы и метасимволы, можно составлять какие угодно шаблоны (считай регулярные выражения). Давайте, например, посмотрим что же мы написали для шаблона e-mail в нашем примере:

var adr_pattern=/[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i;

Итак, мы указали, что в адресе электронной почты идут цифры, буквы и знаки подчеркивания 1 и более раз, затем следует символ @, затем снова идут цифры, буквы и знаки подчеркивания 1 и более раз, затем идет символ точки, после которой идут буквы от 2 до 5 раз. Примерно такой вид имеют адреса электронной почты.

Теперь, зная, что именно мы задали в образце, можно проверить работу примера:

Форма регистрации

Попробуйте ввести e-mail вида "serega@mail" и посмотрите, что будет.

Надо сказать, что составление шаблонов это своего рода искусство. К тому же, одно и то же регулярное выражение можно записать по-разному. Например, /[0-9a-z_]/ - это тоже самое, что и /\w/.

Если хотите потренироваться, то можете усовершенствовать регулярное выражение для проверки e-mail в нашем примере (оно далеко от совершенства).

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

Предыдущий урок Вернуться в раздел Следующий урок

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

Код кнопки:

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