Обучение созданию сайтовУроки JavaScript → Урок 14. Регулярные выражения

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:
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; 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=/[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i; var par_pattern=/[0-9a-z]+/i; var prov=adr_pattern.test(adr); var prov1=par_pattern.test(par); if (prov==true && prov1==true) { alert("Вы зарегистрированы!"); } else { alert("Введенные данные некорректны!"); } }
Готово, надеюсь, суть того, что мы делаем вы поняли. Но прежде, чем проверить работу нашего сценария, посмотрим, из чего же состоят наши регулярные выражения.

Возьмем регулярное выражение для нашего пароля - /[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 - соответствует все, кроме буквы, цифры или знака подчеркивания.


  • Например, шаблону /x\d\d/ будут соответствовать строки: "x01", "x25" и т.д., но не будут соответствовать строки: "A15", "x0A"...

    Также обратный слэш используется, чтобы специальный символ сделать литеральным. Например, если нам нужно найти строку "a*b", то мы зададим следующий шаблон /a\*b/.
Используя вышеперечисленные литералы и метасимволы, можно составлять какие угодно шаблоны (считай регулярные выражения). Давайте, например, посмотрим что же мы написали для шаблона 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.



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