3. Використання регулярних виразів в JavaScript

 

При пошуку по тексту можна використовувати шаблон, що описує підрядок. В JavaScript такий шаблон може бути описаний за допомогою об'єкта RegExp. У найпростішому випадку такий шаблон описує окремий символ, проте має сенс його використовувати для регулярних виразів.

Наступний нижче код описує RegExp об'єкт з ім'ям pttn, що містить регулярний вираз, що описує ціле десяткове число:

var pattn = new RegExp ("/ [0-9] + /");

 

Об'єкт RegExp має 3 вбудованих методи: test(), exec() і compile().

 

          Метод test () виконує пошук за шаблоном:

 

var pattn = new RegExp ("[0-9] +"); document.write (pattn. test ("38 папуг"));

 

Результат:

true

 

 

          Метод exec() виконує пошук підрядка за шаблоном і повертає знайдені відповідності; якщо відповідностей немає, повертається значення null:

 

var pattn = new RegExp ("[0-9] +"); document.write (pattn. exec ("38 папуг"));

 

Результат:

38

 

Якщо необхідно знайти всі відповідності, то при виклику конструктора RegExp слід вказати додатковий параметр "g", який вказує на необхідність глобального пошуку.

Приклад 2

var pattn = new RegExp ("[0-9] +", "g"); do { result = patt n. exec ("1 папуга, 2 папуги, ..., 38 папуг"); document.write ("" + result); } while (result! = null)

 

Результат:

2 Січень 38 null

 

 

          Метод compile() застосовується для зміни раніше створеного шаблону.

Приклад 3

var pattn = new RegExp ("[0-5] +"); document.write (pattn. exec ("38 папуг"));   pattn. compile ("[6-9] +"); document.write (";" + pattn. exec ("38 папуг"));

 

Результат:

3; 8

Порядок виконання роботи.

 

1. Використовуючи редактор, підготуйте на основі прикладів 1-2, 4-6 відповідні веб-сторінки і перегляньте їх за допомогою веб-браузера.

 

2. Перевірка значень, введених користувачем в поля форми для реєстрації.

1)       Для виконання лабораторної роботи необхідно створити веб-сторінку, що містить форму з полями, наступного вигляду:

 

2)       У тезі <form> додайте обробник події відправки даних виду:

onSubmit = "CheckData (); return false;"

В даному випадку вказана функція обробник CheckData(). Оператор return false; запобігає автоматичне відправлення даних після виконання функції-обробника. Відправка даних буде виконуватися з обробника.

3)       Додайте на сторінці секцію JavaScript коду, що описує функцію-обробник:

function CheckData () { var ans; ans = confirm ("Ви впевнені, що хочете відправити введені дані?"); if (ans) submit (); }

Як це видно з коду, функція CheckData() у випадку підтвердження з боку користувача самостійно викликає метод submit() для передачі даних з форми.

4)       Тепер необхідно додати перевірку значень, введених у поля форми користувачем.

Перш за все, необхідно переконатися в тому, що заповнені всі поля, обов'язкові для введення. Для цього можна використовувати перевірку на рівність нулю довжини рядка (властивість length), що є значенням вузла дерева документа, що відповідає полю введення, наприклад: document.getElementById ("uname"). value.length.

Наступна перевірка повинна контролювати структуру і вміст полів. Для цього можна використовувати об'єкт RegExp, наприклад:

var validEMail, pattn;   pattn = new RegExp ("^ [\. \-_A-Za-z0-9] +? @ [\. \-A-Za-z0-9] +? \. [A-Za-z0-9] { 2,6} $ ");   validEMail = pattn.test (document.getElementById ("email"). value));

У цьому фрагменті описана перевірка структури електронної адреси з поля форми з ідентифікатором "email". Для перевірки був використаний шаблон на основі регулярного виразу.

Контрольне задання. 

1. Створення таблиці випадково вибраних кольорів.

 

Взявши за основу сценарій побудови таблиці множення, побудуйте таблицю випадково вибраних кольорів. Колір комірки таблиці задається за допомогою атрибуту bgcolor. Колір комірки описується в рамках трикомпонентної моделі RGB, наприклад: <Td bgcolor = "# c 0 a 145">. Для генерації кожного компоненту можна використовувати генератор випадкових чисел за допомогою методів об'єкту Math і перетворення в шістнадцятковий формат:

color = Math.round (255.0 * Math.random ());

                                  r = color.toString (16);

Результуючий колір утворюється шляхом конкатенації компонентів:

color = r + g + b;

Вигляд результату роботи сценарію:

2. Самостійно побудуйте регулярний вираз, що описує шаблон для перевірки номера телефону і внесіть всі необхідні зміни і доповнення в функцію CheckData().