Регулярні вирази
Регулярний вираз (regular expression, regexp, regex) - шаблон строки; рядок символів, який використовують для перевірки строки певним правилам, або для нечіткого пошуку підстроки.
Вікіпедія: регулярний вираз.
Регулярна на Лурку
Регулярні вирази зустрічаються в пошуку багатьох текстових редакторів, IDE, файлових менеджерах.
Регулярні вирази підтримуються всіма сучасними високорівнивими мовами програмування. Perl на 146% складається з регулярних виразів (шут ка).
Для тестування та дослідження регулярних виразів можна використовувати онлайн-сервіси:
http://regexr.com/
https://regex101.com/
http://www.regexpal.com/
http://regexstorm.net/tester
та інші.
Прапорці (flags)
Регурярний вираз має таку структуру:
/шаблон/прапорці
/Привіт!+/igm
Регулярні вирази вставляються в код без кавичок.
Прапорець (flag) - це буква після регулярного виразу, яка налаштовує регулярний вираз на певний режим роботи. Є три режима:
i - ignore case, режим при якому великі та маленькі літери вважаються одним і тим самим символом.
g - global, глобальний пошук, без цього прапорця буде здійснено пошук першого підходящого результату, а з ним - будуть знайдені всі результати.
m - miltiline, пошук конструкцій, що можуть займати декілька строк.
Букви-прапорці можна вказувати в будь-якому порядку.
Шаблони регулярних виразів
З повним переліком шаблонів можна ознайомитися на сторінці http://javascript.ru/regexp/ або у вікіпедії по посиланню вгорі лекції.
Розглянемо найбільш вживані шаблони.
. - заміняє будь-який символ, окрім перенесення рядка \n.
/./g - один символ
/.ода/g - пошук слів сода, вода, нода, оода, Dода і т.п.
? - попередній символ може бути присутнім або відсутнім.
/colou?r/i - шукає в англійському тексті слова color та colour.
+ - попередій символ може повторюватися.
/Привіт!+/ - знайде Привіт!, Привіт!!, Привіт!!!, Привіт!!!!! і т.д.
* - попередій символ може повторюватися, а може і бути відсутнім.
/Привіт!*/ - знайде Привіт, Привіт!, Привіт!!, Привіт!!!!! і т.д.
^ - початок строки.
/^А/g - знайде тільки першу А у виразі "Акваріум Антона."
$ - кінець строки.
/я$/g - знайде лише останню літеру "я" у виразі "середня куля".
\ - екранує спец-символи, для того, щоб їх можна було знайти в строці.
/\$/ - знаходить символ долара, а не кінець строки.
() - запам'ятовуючі дужки.
/+38(0..)/ - запам'ятає код оператора в телефоні вигляду "+380682096666".
| - логічний оператор "або", знаходить один з варіантів.
/width:.+(px|em|%)/ - знаходить одиницю виміру.
[abc] - набір допустимих символів.
/[свм]ода/ - знайде сода, вода, мода
[^abc] - набір недопустимих символів.
/[^свм]ода/ - знайде *ода, де зірочка - будь-який символ, окрім с, в та м.
\n - перевод строки.
\d - цифра.
\D - будь-який символ, окрім цифри.
\s - пробільний символ (різні пробіли, таб, перевод строки).
\S - будь-який символ, окрім пробілів.
\w - будь-який символ латиниці.
\W - будь-який символ, що не належить латиниці.
Методи строк для роботи з регулярними виразами
s.split(separator, limit) - дозволяє задати сепаратор у вигляді регулярного виразу:
var s = 'red, green; blue,orange, violet;aqua';
var colors = s.split(/[,;]\s*/)
s.search(regexp) - повертає індекс входження знайденого фрагмента, або -1.
console.log('Привіт, світ'.search(/в.т/)); // поверне 3
console.log('Привіт, світ'.search(/в.т$/)); // поверне 9
console.log('Привіт, світ'.search(/sos/)); // поверне -1
s.match(regexp) - повертає масив знайдених підстрок.
console.log('Привіт, світ'.match(/в.т/g)); // поверне ['віт', 'віт']
s.replace(regexp, newSubStr) - заміняє всі знайдені підстроки новими підстроками.
var re = /шаблон/прапорці; - створити об'єкт регулярний вираз.
re.test(s) - перевірити строку s, чи вона відповідає регулярному виразу.
re.exec(s) - виконати регулярний вираз до строки s, повертає масив з результатами пошуку.
re.lastIndex - вказує індекс, на якому закінчився пощук. Наступний пошук виконається з цього індекса. Цей параметр можна задати, він доступний для запису.
Жадібна, лінива та ревнива квантифікації
По замовчуванню використовується жадібний алгоритм пошуку підстрок. Це означає, що регулярний вираз намагається захопити якомога довшу підстроку:
/p.+class="(.+)"/
<p id="hey" class="title red"><span class="big">...
Даний регулярний вираз захопить не тільки класи абзаца, а всю підстроку до останньої кавички:
title red"><span class="big
Якщо після плюса поставити знак питання - це задасть лінивий алгоритм пошуку, при якому регулярний вираз буде шукати найменшу підходящу підстроку:
/p.+class="(.+?)"/
Практика: валідація полів форми
Скачайте файл і напишіть скрипти валідації полів форми.
Домашнє завдання
Для тренування порозгадуйте кросворди з регулярок: regexcrossword.com.
-
В онлайн-сервісі знайдіть:
всі символи;
всі пробіли;
всі пробільні символи;
всі цифри;
всі числа;
всі слова;
перше слово другого речення
слова, що починаються на f, s, t, w
останнє слово кожного речення;
домени верхнього рівня. - Створіть проект validator з формою вводу даних:
<form id="form1" action="#" method="GET">
<p><label><input id="fname" name="name" placeholder="Введіть ім'я"></label></p>
<p><label><input id="fmail" name="email" placeholder="Введіть e-mail"> формат: email@site.com</label></p>
<p><label><input id="ftel" name="phone" placeholder="Введіть телефон"> формат: +38 (099) 999-99-99</label></p>
<p><input type="submit" value="Відправити"></p>
</form> -
Напишіть функцію валідації імені, ім'я повинно складатися лише з латинських літер, без пробілів, перша літера велика.
function validName(s){Доступ до введених користувачем даних здійснюється таким чином:
var err = 'Невірний формат імені!\nФормат: латинські літери, перша - велика.'; ...
якщо введено невірні дані: alert(err);
return true або false;
}змінна = document.getElementById('ідентифікатор').value;
var a = document.getElementById('fname').value; -
Напишіть функцію валідації e-mail.
Логін повинен складатися з латинських символів, символів мінус, підкреслювання та крапка.
Домен повинен складатися лише з латинських символів.
Доменна зона може складатися з 2-5 латинських символів.
Регістр не має значення. -
Напишіть функцію фалідації телефона.
Пробіли, дужки, мінуси, можуть бути відсутні.
+380 - обов'язкові цифри, приймаються телефони лише України, 12 цифр.+380682091234
+38068 209-12-34
+3 8 (068) 209 12 34
+38(068)209-12-34
і т.п. -
Створіть валідатор форми:
document.getElementById("form1").onsubmit = function() {Якщо в функції onsubmit використати оператор return false;, то відправка даних на сервер перерветься, дані не будуть відправлені.
// напишіть алгоритм валідатора
// створіть код по алгоритму
}