Курс навчання JavaScript: Регулярні вирази в JavaScript


Автор: Артем'єв Сергій Ігорович ICQ: 438856621 email: [email protected]


Регулярні вирази - одне з найпотужніших засобів обробки даних в JavaScript. Крім того, це найзручніший спосіб обробки даних у випадках, коли точний шаблон пошуку задати неможливо. Найпростіший приклад - треба виділити в тексті всі адреси електронної пошти і номери телефонів. Очевидно, що простим пошуком подстроки обійтися не вдасться, тому що ми заздалегідь не знаємо які саме адреси і телефони встетіть в тексті.

Регулярні вирази оперують точними значеннями, а шаблонами. Шаблон (pattern) записується за допомогою мови регулярних виразів і з його основами ми зараз познайомимося.

Отже, будь-який регулярний вираз складається з роздільника, тіла шаблону і модифікаторів (іноді їх ще називають перемикачами, switches).

/ Pattern / switch

Тут "/" - це роздільник, "pattern" - тіло шаблону, а "switch" - модифікатори.

В JavaScript можливо всього два шляхи використання регулярних виразів: за допомогою методів об'єкта RegExp або за допомогою методів об'єкта String.

Примірник об'єкта RegExp може створюватися двома способами - явним і непрямим:

// явний спосіб var re = new RegExp ( "pattern", "switch"); // непрямий (альтернативний) спосіб var re = / pattern / switch;

Зверніть увагу, що при непрямому способі шаблон задається БЕЗ лапок.

Будь-яке регулярне вираз складається зі звичайних символів, спецсимволов і квантіфікаторов повторення. Як звичайних символів виступають букви, цифри і символьні знаки, при цьому в якості символів можна використовувати національні символи і символи в Unicode. Увага! "Пропуск" в регулярних виразах теж вважається значущим, тому будьте дуже уважні при додаванні прогалин в вираз. А краще скористайтеся спеціальним метасимволом (дивіться символ \ s в таблиці нижче).

Спецсимволи (або Метасимволи) - це основа регулярних виразів, тому що саме спецсимволи визначають порядок пошуку та вказують інтерпретатора вираження на додаткові умови і обмеження. У таблиці наведені основні спецсимволи і дано їх короткий опис.

Спецсимвол Відповідність в шаблоні \ Для символів, які зазвичай трактуються буквально, означає, що наступний символ є спеціальним. Наприклад, / n / відповідає букві n, а / \ n / відповідає символу перекладу рядка. Для символів, які зазвичай трактуються як спеціальні, означає, що символ повинен розумітися буквально. Наприклад, / ^ / означає початок рядка, а / \ ^ / відповідає просто символу ^. / \\ / відповідає зворотної косої межі \. ^ Відповідає початку рядка. $ Відповідає кінця рядка. (Pattern) Відповідає рядку pattern і запам'ятовує знайдене відповідність. (?: Pattern) Відповідає рядку pattern, але не запам'ятовує знайдене відповідність. Використовується для угруповання частин зразка, наприклад, / ко (?: Т | шка) / - це короткий запис вираження / кіт | кішка /. (? = Pattern) Відповідність з "загляданням вперед", відбувається при відповідності рядка pattern без запам'ятовування знайденого відповідності. Наприклад, / Windows (? = 95 | 98 | NT | 2000) / відповідає "Windows" в рядку "Windows 98", але не відповідає в рядку "Windows 3.1". Після зіставлення пошук триває з позиції, наступної за знайденим відповідністю, без урахування заглядання вперед. (?! Pattern) Відповідність з "загляданням вперед", відбувається при невідповідності рядка pattern без запам'ятовування знайденого відповідності. Наприклад, / Windows (?! 95 | 98 | NT | 2000) / відповідає "Windows" в рядку "Windows 3.1", але не відповідає в рядку "Windows 98". Після зіставлення пошук триває з позиції, наступної за знайденим відповідністю, без урахування заглядання вперед. x | y Відповідає x або y. [Xyz] Відповідає будь-якому символу з ув'язнених в квадратні дужки. [^ Xyz] Відповідає будь-якому символу, крім вкладених у квадратні дужки. [Az] Відповідає будь-якому символу у вказаному діапазоні. [^ Az] Відповідає будь-якому символу, крім лежать в зазначеному діапазоні. \ B Відповідає кордоні слова, т. Е. Позиції між словом і пропуском або переведенням рядка. \ B Відповідає будь-якій позиції, окрім кордоні слова. \ СX Відповідає символу Ctrl + X. Наприклад, / \ cI / еквівалентно / \ t / \ d відповідає цифрі. Еквівалентно [0-9]. \ D Відповідає нецифровому символу. Еквівалентно [^ 0-9]. \ F Відповідає символу перекладу формату (FF). \ N Відповідає символу перекладу рядка (LF). \ R Відповідає символу повернення каретки (CR). \ S Відповідає символу пробілу. Еквівалентно / [\ f \ n \ r \ t \ v] /. \ S Відповідає будь-якому непробельний символу. Еквівалентно / [^ \ f \ n \ r \ t \ v] /. \ T Відповідає символу табуляції (HT). \ V Відповідає символу вертикальної табуляції (VT). \ W відповідає латинської букви, цифри або підкреслення. Еквівалентно / [A-Za-z0-9_] /. \ W Відповідає будь-якому символу, крім латинської букви, цифри або підкреслення. Еквівалентно / [^ A-Za-z0-9_] /. \ N n - позитивне число. Відповідає n-ної запомненной підрядку. Обчислюється шляхом підрахунку лівих круглих дужок. Якщо лівих дужок до цього символу менше, ніж n, то еквівалентно \ 0n. \ 0n n - вісімкове число, не більше 377. Відповідає символу з восьмеричним кодом n. Наприклад, / \ 011 / еквівалентно / \ t /. \ Xn n - шістнадцяткове число, що складається з двох цифр. Відповідає символу з шістнадцятковим кодом n. Наприклад, / \ x31 / еквівалентно / 1 /. \ Un n - шістнадцяткове число, що складається з чотирьох цифр. Відповідає символу Unicode з шістнадцятковим кодом n. Наприклад, / \ u00A9 / еквівалентно / © /. . Крапка. Відповідає будь-якому символу.

Спецсимволов досить багато і з їх допомогою можна описати практично будь-які словосполучення або пошукові фрази.

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

(Pattern_1) | (pattern_2) {quont}

Тут квантіфікатор "quont" относітcя тільки до "pattern_2".

У таблиці наведено всі основні квантіфікатори:

Квантіфікатор Відповідність в шаблоні * Відповідає повторення попереднього символу нуль або більше разів. + Відповідає повторення попереднього символу один або більше разів. ? Відповідає повторення попереднього символу нуль або один раз. . Відповідає будь-якому символу, крім символу нового рядка. {N} n - невід'ємне число. Відповідає рівно n входженням попереднього символу. {N,} n - невід'ємне число. Відповідає n або більше входженням попереднього символу. / X {1,} / еквівалентно / x + /. / X {0,} / еквівалентно / x * /. {N, m} n і m - невід'ємне числа. Відповідає не менше ніж n і не більше ніж m входженням попереднього символу. / X {0,1} / еквівалентно / x? /.

Отже, з основами мови регулярних виразів ми познайомилися і тепер випробуємо нові знання на практиці. Ось приклад використання методу test ()

<Script type = "text / javascript"> var sample = "З апельсинів роблять апельсиновий сік"; var re = / апельсин * /; var result = re.test (sample)? " '": "' Не«; document.write ( "Рядок '" + sample + result + "відповідає зразку" + re); </ Script>

Приклад використання методу exec ()

<Script type = "text / javascript"> var sample = "З апельсинів роблять апельсиновий сік"; var re = / апельсин * /; var result = re.exec (sample); document.write ( "Знайдено збіг: '" + result [0] + "'"); </ Script>

А в цьому прикладі ми скористаємося альтернативним способом створення об'єкта RegExp:

<Script type = "text / javascript"> var sample = "З апельсинів роблять апельсиновий сік"; var result = /апельсін*/.test(sample)? " '": "' Не«; document.write ( "Рядок '" + sample + result + "відповідає зразку"); </ Script>

Наступний приклад - реально діючий скрипт. Він дозволяє позбутися від бага з відображенням прозорості PNG-картинок в Internet Explorer версії 5 і 6. Цей скрипт вже згадувався нами при розгляді шарів і їх застосування в JavaScript.

function correctPNG () {// перевіряємо рядок підпису браузера користувача if (/ MSIE (5 \ .5 | 6). + Win / .test (navigator.userAgent)) {for (var i = 0; i <document.images. length; i ++) {var img = document.images [i]; var imgName = img.src.toUpperCase (); if (imgName.substring (imgName.length-3, imgName.length) == "PNG") {var imgID = (img.id)? "Id = '" + img.id + "'": "" var imgClass = (img.className)? "Class = '" + img.className + "'": "" var imgTitle = (img.title)? "Title = '" + img.title + "'": "title = '" + img.alt + "'" var imgStyle = "display: block;" + Img.style.cssText if (img.align == "left") imgStyle = "float: left;" + ImgStyle if (img.align == "right") imgStyle = "float: right;" + ImgStyle if (img.parentElement.href) imgStyle = "cursor: hand;" + ImgStyle var strNewHTML = "<span" + imgID + imgClass + imgTitle + "style = \" "+" width: "+ img.width +" px; height: "+ img.height +" px; "+ imgStyle +"; "+" filter: progid: DXImageTransform.Microsoft.AlphaImageLoader "+" (src = \ ' "+ img.src +" \', sizingMethod = ' crop '); \ "> </ span>" img.outerHTML = strNewHTML i = i-1}}}} window.attachEvent ( "onload", correctPNG);

Тут ми використовуємо регулярні вирази для перевірки того, що скрипт виконується в IE потрібних нам версій. Якщо перевірка не вдалася - значить додаткова обробка не потрібна і можна просто завершити скрипт.

конструкція

/ MSIE (5 \ .5 | 6). + Win / .test (navigator.userAgent)

читається так: "перевірити, чи відповідає рядок, що міститься у властивості navigator.userAgent, Наступний шаблоном: Рядок MSIE, після якої стоїть пробіл, потім набори символів" 5.5 "або" 6 ", після яких один або більше символів, за якими слід набір символів "Win" ".

Ми розглянули тут лише найбільш використовувані функції. Більш докладний список ви легко зможете знайти в Інтернет. Регулярні вирази - дуже потужний засіб, але не позбавлене недоліків. І головний з них - продуктивність. Розбір, компіляція і пошук в тексті за шаблоном значно більш витратна операція, ніж простий пошук на точну відповідність. Тому не варто впадати в крайнощі і використовувати регулярні вирази для точного пошуку.



На початок сторінки



На початок сторінки

X {0,1} / еквівалентно / x?
Test (sample)?
Test(sample)?
ToUpperCase (); if (imgName.substring (imgName.length-3, imgName.length) == "PNG") {var imgID = (img.id)?
Id + "'": "" var imgClass = (img.className)?
ClassName + "'": "" var imgTitle = (img.title)?

Дополнительная информация

rss
Карта