Javascript, регулярний вираз: приклади, перевірка регулярних виразів

До появи мов розмітки, а швидше, до того моменту, як стало ясним, що потрібно не тільки знаходити, але й робити це при певних умовах, в конкретному місці, при змінених даних, в потрібних кількостях, звичайні функції пошуку і заміни влаштовували будь-якого досвідченого програміста. Створювалися шедеври пошукового мистецтва на мовах програмування, бази даних вправлялися у формах умов вибірки, оснащувалися збереженими процедурами, тригерами та іншими засобами вибірки з громіздких реляційних інформаційних композицій. Поява регулярних виразів до революції не призвело, але виявилося корисним і зручним засобом для пошуку і заміни інформації. Наприклад, регулярні вирази javascript email істотно спрощують реєстрацію відвідувачів, не завантажують сайт відправкою повідомлень за неіснуючими адресами.


Сказати, що на javascript регулярний вираз значно краще продуманнних послідовностей викликів indexOf() в обрамленні умовних і циклічних операторів, не можна, але стверджувати, що воно зробило код скрипта компактним, але слабо зрозумілих непосвяченому, можна однозначно.

Об'єкт RegExp = шаблон + движок

Регулярні вирази - це шаблон + движок. Перше є власне регулярний вираз – об'єкт javascript - RegExp, друге - це виконавець шаблону, застосовує його до рядку. Механізми, що реалізують регулярні вирази для кожної мови програмування, відрізняються. І хоча не всі відмінності істотні, це потрібно мати на увазі, так само як і обов'язково ретельно перевіряти регулярний вираз перед його експлуатацією.


Особлива нотація при написанні регулярних виразів цілком зручна і досить ефективна, але вимагає уважності, акуратності і терпіння від розробника. До нотації шаблонів регулярних виразів потрібно звикнути. Це не данина моді, це логіка реалізації механізму «javascript регулярні вирази».

Шаблон регулярного виразу

Допускається два варіанти: var expOne = /abc*/i; var expTwo = RegExp("abc*", "i"); Зазвичай використовується перший спосіб. У другому випадку застосовуються лапки, бо для використання символу '', його потрібно екранувати за загальними правилами. 'i' - прапор, що позначає «регістр не важливий». Можна використовувати також прапори 'g' - «глобальний пошук» і 'm' - багаторядковий пошук. Символ '/' прийнято використовувати для позначення шаблону.

Початок і кінець регулярного виразу

Символ '^' визначає символ(и), з якого починається регулярний вираз, а '$' визначає який символ(и) повинен бути в кінці. Не слід експериментувати з ними всередині виразу, там у них інший зміст. Наприклад, var eRegExp = new RegExp(cRegExp, 'i'); var cRegRes = "; var sTest = 'AbcZ'; if (eRegExp.test(sTest)) { cRegRes += ' - Yes'; } else { cRegRes += '- No'; } var dTestLine = document.getElementById('scTestLine'); dTestLine.innerHTML = 'Вираз /'+cRegExp+'/рядка "'+ sTest+'"'+cRegRes. В елементі 'scTestLine' буде результат (змінна cRegExp має відповідне значення): вираз /^AbcZ$/рядка "abcz" - Yes Якщо прибрати прапор 'i', то результат буде: вираз /^AbcZ$/рядка "abcz" - No

Зміст регулярного виразу

Регулярний вираз є послідовність символів, яка є предметом пошуку. Вираз /qwerty/шукає входження саме цієї послідовності: вираз /qwerty/рядка "qwerty" - Yes вираз /qwerty/рядка "123qwerty456" - Yes Символ '^' змінює суть виразу: вираз /^qwerty/рядка "123qwerty456" – No вираз /^qwerty/рядка "qwerty456" - Yes Аналогічно символу кінця рядка. Регулярні вирази допускають послідовності: наприклад,[a-z],[A-Z],[0-9]- усі літери латинського алфавіту у вказаному регістрі або цифри. Російські літери теж допускається використовувати, проте слід звертати увагу на кодування рядків (де шукається, що шукається) і сторінки. Часто російські літери, як і спеціальні символи, переважно задавати кодами.
При формуванні регулярного виразу можна вказувати варіанти наявності тих чи інших символів у визначеному місці, при цьому їх кількість визначається так: '*' = повторення 0 або більше разів; '+' = повторення 1 або більше разів; {1} те ж, що і '+'; {n} = повторення рівно n раз; {n,} = повторення n і більше раз; {n,m} = повторення від n до m разів. Використовуючи квадратні дужки, можна вказати варіанти символу з набору. Це виглядає так.[abcd]=[a-d]= будь-який символ з чотирьох: 'a', 'b', 'c', 'd'. Можна вказати зворотне. Будь-який символ, крім зазначених у наборі:[^abcd]= будь-який символ окрім 'a', 'b', 'c', 'd'. '?' вказує, що в даному місці символу може і не бути. '.' визначає будь-який символ, окрім позначає переклад рядка. Це 'n', 'r', 'u2028' або 'u2029'. Вираз 's*|S*' = '[s|S]*' означає пошук будь-якого символу, включаючи переклади рядків.

Спрощені варіанти регулярного виразу

Вираз '[s|S]*' - пошук пробілу або його відсутності, тобто все, що є в рядку. В даному випадку позначення 's' означає пробіл, а 'S' - його відсутність. Аналогічно можна використовувати 'd' для пошуку десятковій цифри, а 'D' знайде нецифровому символ. Позначення 'f', 'r' і 'n' відповідають form-feed, carriage return і line-feed. Символ табуляції 't', вертикальної – 'v'. Позначення 'w' знайде будь-який символ латинського алфавіту (букви, цифри, знак підкреслення) =[A-Za-z0-9_]. Позначення 'W' еквівалентно[^A-Za-z0-9_]. Це означає будь-який символ, який не є буквою латинського алфавіту, цифрою або знаком '_'. Пошук символ '' = пошук символу NUL. Пошук 'xHH' або 'uHHHH' = пошук символу з кодом HH або HHHH відповідно. H - шістнадцяткова цифра.

Рекомендована формулювання та кодування регулярного виразу

Будь регулярний вираз важливо уважно тестувати на різних варіантах рядків. З досвідом створення регулярних виразів помилок буде менше, але тим не менше слід завжди мати на увазі, що власні знання з правил написання регулярного виразу можуть не відповідати дійсності, особливо коли «регулярка» переноситься з однієї мови на іншу.
Вибираючи між класикою (точна вказівка) і спрощеним варіантом регулярного виразу, краще віддати перевагу першу. Адже в класиці завжди чітко зазначено, що шукається. Якщо в регулярному виразі або в рядку пошуку є росіяни літери, слід привести до єдиної кодуванні всі рядки і сторінку, на якій функціонує javascript-код, що виконує регулярний вираз. Коли йде обробка символів, що не належать латинському алфавіту, має сенс розглянути зазначення кодів символів, а не самих символів. При реалізації алгоритмів пошуку на javascript регулярний вираз слід ретельно перевіряти. Особливо важливо контролювати кодування символів.

Дужки в регулярних виразах

Квадратні дужки задають варіанти символу, який повинен бути або не бути в певному місці, а круглі – варіанти послідовностей. Але це лише загальне правило. З нього немає винятків, але є безліч різноманітних варіантів застосувань. var cRegExp = "[a-z]*.(png|jpg|gif)"; var eRegExp = new RegExp(cRegExp, 'i'); var cRegRes = "; var sTest = 'picture.jpg'; if (eRegExp.test(sTest)) { cRegRes + = 'Yes'; } else { cRegRes += '- No'; } Результати: вираз /[a-z]*.(png|jpg|gif)/для рядка "picture.jpg - Yes вираз /^[a-d] [a-z]*.(png|jpg|gif)/для рядка "picture.jpg" – No вираз /^[a-d] [a-z]*.(png|jpg|gif)/для рядка "apicture.jpg - Yes вираз /^[a-d] [a-z]*.(png|jpg|gif)/для рядка "apicture.jg" - No Слід особливо відзначити, що всі, після чого коштує зірочка, може бути нуль разів. Це означає, що «регулярка» може спрацювати самим несподіваним чином як мінімум.

Перевірка RegExp - тестування email

На javascript регулярні вирази отримують два методу, test і exec, і можуть бути використані в об'єктах рядків (String) в їх методах (функціях): search, split, replace і match. Метод test вже було продемонстровано, він дозволяє перевірити правильність регулярного виразу. Результат методу: true/false. Розглянемо наступні регулярні вирази javascript. Перевірка email з числа «складно, але точно»: var eRegExp = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{13}.[0-9]{13}.[0-9]{13}.[0-9]{13}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2}))$/; для рядка var sTest ='SlavaChip@sci.by' дає true, тобто дана рядок є правильним email-адресою. Перевірка була проведена методом eRegExp.test(sTest).

Практичне використання: обробка e-Mail

Метод exec на виході надає масив, виклик: var aResult = eRegExp.exec(sTest); cRegRes = ' '+ aResult.length + ' ';
for (var i=0; i дає такий результат: 9
Slava.Chip@sci.by
Slava.Chip
Slava.Chip
.Chip
undefined
sci.by
undefined
sci.by
sci. Інші методи працюють аналогічно. Рекомендується перевірити їх самостійно. Розробку і використання регулярних виразів бажано відпрацювати на практиці, копіювання коду не завжди тут доцільно.

Популярні «регулярки»

Наведене javascript регулярний вираз для eMail не єдине, є безліч більш простих варіантів. Наприклад, /^[w-.]+@[w-]+.[a-z]{23}$/i. Однак цей варіант враховує не всі варіанти запису електронної адреси. Безумовно, необхідно переглядати досвід колег, аналізувати пропоновані ними способи, перш ніж проектувати власне на javascript регулярний вираз. Але є і певні складнощі. Не слід забувати, що на javascript регулярні вирази (приклади їх при копіюванні) можуть продублювати суттєві символи: '', '/' або лапки. Це призведе до помилки, яку можна довго шукати. Важливо враховувати звичний «людський аспект». Адже формальне javascript регулярний вираз для телефону, який може бути відвідувачем (людиною), буває зазначено різними способами: 123-45-67 (29) 123456780291234567 або +375291234567. І це все один і той же номер. Варіант написання декількох шаблонів не завжди прийнятний, а жорстка фіксація правила для написання номера може створити непотрібну незручність або обмеження. Варіант /^d[d() -]{414}d$/i годиться для більшості випадків перевірки номера телефону. Якщо необхідно скласти javascript регулярні вирази, тільки цифри перевіряє, то навіть такий простий випадок вимагає уточнень. Він повинен розглядати ціле або дробове, експоненційну запис або звичайну, додатне число або негативне. Можна враховувати також наявність символу валюти, число цифр після коми і розділення цілої частини числа на тріади. Вираз /^d+$/i перевірить лише цифри, а вираз /^d+.d+$/i дозволяє використовувати точку для вказівки дробової частини числа. В javascript перевірка регулярних виразів може бути використана для жорсткого вказівки формату даних, що вводяться, що актуально, зокрема при введенні анкет, паспортних даних, юридичних адрес і т. д.

Перевірка дати - просто про складне

Розглянемо ще javascript регулярні вирази. Приклади для дати, як і для числа або номера телефону являють собою вибір між твердістю й гнучкістю. Дата події - одне з істотних даних, які часто доводиться вводити. Але фіксація введення в певному форматі: 'дд-мм-рррр' або 'д. м. рр' часто приводить до незадоволеності клієнта. Перехід від поля вводу дня до місяця, сповнений класичної HTML-формою, може не відбутися при введенні тільки однієї цифри, а введення другої може викликати труднощі. Наприклад, у полі дня було вже введено 3 а наступна цифра 2 не замінює першу, і приписується до неї 32 що, природно, викличе незручність. Ефективність і зручність регулярних виразів істотно залежать від загального побудови діалогу з відвідувачем. В одному випадку для зазначення дати доцільно використовувати одне поле введення форми, в іншому випадку потрібно передбачити різні поля для дня, місяця і року. Але тоді виникнуть додаткові «витрати коду» на перевірку високосного року, місяців, кількості днів у них.

Пошук з заміною, пам'ять регулярного виразу

javascript replace (регулярні вирази) використовують метод об'єкту String і дозволяють знаходити значення і відразу його змінювати. Це зручно для виправлення помилок вводу, редагування вмісту полів форм і для перетворення даних з одного формату представлення до іншого. var cRegExp = /([а-я]+)s([а-я]+)s([а-я]+)/i; //при пошуці створюються три 'змінні' var sTest = 'ця стаття хороша!';
var cRegRes = sTest.replace(cRegExp, "$2 $3 $1"); var dTestLine = document.getElementById('scTestLine'); dTestLine.innerHTML = 'Вираз '+cRegExp+' для рядка "'+ sTest+'" вийде: '+cRegRes; Результат: вираз /([а-я]+)s([а-я]+)s([а-я]+)/i рядка "ця стаття хороша!" вийде: стаття хороша, ця! При виконанні кожна пара круглих дужок запам'ятовує результат в 'змінної' $n, де n - номер пари дужок ($1 $2 ). На відміну від загальноприйнятої, тут нумерація змінних ведеться з 1 а не з 0.

Загальні рекомендації

Регулярний вираз спрощує код, але час на його розробку часто має значення. Можна починати роботу з простих конструкцій, потім об'єднувати зроблене в більш складні вирази. Можна використовувати різні онлайн-сервіси для перевірки регулярних виразів або спеціальні локальні інструментальні засоби. Кращим варіантом залишиться створення власної бібліотеки регулярних виразів і власного інструменту для перевірки нових розробок. Це найкращий спосіб закріпити досвід і навчитися швидко створювати надійні та зручні конструкції. Використовуючи повторення символів і рядків, тобто спеціальні символи '*', '+' і фігурні дужки, що вказують кількості повторів, слід керуватися принципами простоти і доцільності. Важливо розуміти, що регулярний вираз з моменту початку його роботи і до отримання результату цілком у владі движка використовуваного браузера. Не всі мови javascript еквівалентні. Кожен браузер може привнести свої особисті переваги в інтерпретації регулярних виразів. Сумісність стосується не лише сторінок і таблиць стилів, до регулярних виразів вона також має відношення. Сторінка використовує javascript, може вважатися налагодженої, тільки коли вона успішно відпрацювала на різних браузерах.

javascript, String і RegExp

По праву робота на рівні клієнта, тобто в браузері відвідувача на мові javascript, вимагає високої кваліфікації від розробника. Досить давно з'явилася можливість налагоджувати javascript-код власними засобами браузера або за допомогою сторонніх розширень, редакторів коду, незалежних програм. Однак далеко не у всіх випадках відладчик може впоратися і забезпечити розробнику хорошу підтримку, швидке визначення помилок, виявлення вузьких місць. Часи, коли комп'ютер був орієнтований на обчислення, у далекому минулому. Тепер особливу увагу приділяють інформації та об'єкти рядків стали грати істотну роль. Числа стали рядками, а свою справжню сутність вони проявляють тільки в потрібний час і в потрібному місці. Регулярні вирази посилюють можливості рядків, але вимагають до себе належної поваги. Налагоджувати RegExp в процесі його роботи, навіть якщо це можливо змоделювати, не надто цікава затія. Розуміння структури та логіки об'єкта RegExp, сенсу об'єкта String, синтаксису і семантики javascript - вірна гарантія безпечного і надійного коду, стабільної роботи кожної сторінки і сайту в цілому.