Застосовуємо регулярний вираз в Javascript. Регулярні вирази JavaScript має javascript вбудовану підтримку регулярних виразів

JavaScript regexp - це тип об'єкта, який використовується для зіставлення послідовності символів в рядках.

Створюємо перше регулярне вираз

Існує два способи створення регулярного виразу: з використанням литерала регулярного виразу або за допомогою конструктора регулярних виразів. Кожен з них представляє один і той же шаблон: символ « c», За яким слід« a», А потім символ« t».

// літерал регулярного виразу полягає в Слеш (/) var option1 = / cat /; // Конструктор регулярнго вираження var option2 = new RegExp ( "cat");

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

Метод RegExp.prototype.test ()

Пам'ятаєте, я казав, що регулярні вирази є об'єктами? Це означає, що у них є ряд методів. Найпростіший метод - це JavaScript regexp test, Який повертає логічне значення:

True (істина): рядок містить шаблон регулярного виразу.

False (брехня): збіги не знайдено.

console.log (/cat/.test ( "the cat says meow")); // вірно console.log (/cat/.test ( "the dog says bark")); // невірно

Пам'ятка з основ регулярних виразів

Секрет регулярних виразів полягає в запам'ятовуванні типових символів і груп. Я настійно рекомендую витратити кілька годин на таблицю, наведену нижче, а потім повернутися, і продовжити вивчення.

символи

• . - (точка) відповідає будь-якому одиночному символу за винятком перенесення рядка;
• * - відповідає попередньому висловом, яке повторюється 0 або більше разів;
• + - відповідає попередньому висловом, яке повторюється 1 або більше разів;
• ? - попередній вираз є необов'язковим ( відповідає 0 або 1 раз);
• ^ - відповідає початку рядка;
• $ - відповідає кінцю рядка.

Групи символів

• d- відповідає будь-якому одиночному цифровому символу.
• w- відповідає будь-якому символу (цифри, букви або знаку підкреслення).
• [XYZ]- набір символів. Відповідає будь-якому одиночному символу з набору, заданого в дужках. Також можна задавати і діапазони символів, наприклад, .
• [XYZ] +- відповідає символу з набору, повторюваного один або більше разів.
• [^A -Z]- всередині набору символів «^» використовується як знак заперечення. В даному прикладі шаблону відповідає все, що не є буквами у верхньому регістрі.

прапори:

В JavaScript regexp існує п'ять необов'язкових прапорів. Вони можуть використовуватися окремо або разом, і розміщуються після закриває слеша. Наприклад: / [ A -Z] / g. Тут я приведу тільки два прапора.

g- глобальний пошук.

i- пошук, нечутливий до регістру.

додаткові конструкції

(x)- захоплюючі дужки. Цей вислів відповідає x і запам'ятовує це відповідність, тому їм можна скористатися пізніше.

(?:x)- незахвативающіе дужки. Вираз відповідає x, але не запам'ятовує це відповідність.

Відповідає x, тільки якщо за ним слід y.

Протестуємо вивчений матеріал

Спочатку протестуємо все вище сказане. Припустимо, що ми хочемо перевірити рядок на наявність будь-яких цифр. Для цього можна використовувати конструкцію «d».

console.log (/d/.test ( "12-34")); // вірно

Наведений вище код повертає значення true, якщо в рядку є хоча б одна цифра. Що робити, якщо потрібно перевірити рядок на відповідність формату? Можна використовувати декілька символів «d», щоб визначити формат:

console.log (/dd-dd/.test ( "12-34")); // вірно console.log (/dd-dd/.test ( "тисячі двісті тридцять чотири")); // невірно

Якщо неважливо, як в JavaScript regexp online йдуть цифри до і після знака «-», можна використовувати символ «+», щоб показати, що шаблон «d» зустрічається один або кілька разів:

console.log (/ d + -d + /. test ( "12-34")); // вірно console.log (/ d + -d + /. Test ( "1-234")); // вірно console.log (/ d + -d + /. Test ( "- 34")); // невірно

Для простоти можна використовувати дужки, щоб згрупувати вираження. Припустимо, у нас є нявкання кішки, і ми хочемо перевірити відповідність шаблону « meow»(Мяу):

console.log (/ me + (ow) + w / .test ( "meeeeowowoww")); // вірно

Тепер давайте розберемося.

m => відповідність одній букві 'm';

e + => відповідність букві «e» один або кілька разів;

(Ow) + => відповідність буквах «ow» один або кілька разів;

w => відповідність букві 'w';

'M' + 'eeee' + 'owowow' + 'w'.

Коли оператори типу «+» використовуються відразу після дужок, вони впливають на весь вміст дужок.

Оператор «? ». Він вказує, що попередній символ є необов'язковим. Як ви побачите нижче, обидва тестових прикладу повертають значення true, тому що символи «s» позначені як необов'язкові.

console.log (/ cats? says? /i.test ( "the Cat says meow")); // вірно console.log (/ cats? Says? /I.test ( "the Cats say meow")); // вірно

Якщо ви захочете знайти символ слеша, потрібно екранізувати його за допомогою зворотного слеша. Те ж саме вірно для інших символів, які мають особливе значення, наприклад, знаку питання. Ось JavaScript regexp приклад того, як їх шукати:

var slashSearch = ///; var questionSearch = /? /;

• d- це те ж саме, що і: кожна конструкція відповідає цифровому символу.
• w- це те ж саме, що [ A -Za -z 0-9_]: Обидва вирази відповідають будь-якому одиночному алфавітно-цифровому символу або підкреслення.

Приклад: додаємо прогалини в рядки, написані в «верблюжому» стилі

У цьому прикладі ми дуже втомилися від «верблюжого» стилю написання і нам потрібен спосіб додати пропуски між словами. Ось приклад:

removeCc ( "camelCase") // => повинен повернути "camel Case"

Існує просте рішення з використанням регулярного виразу. По-перше, нам потрібно знайти всі заголовні букви. Це можна зробити за допомогою пошуку набору символів і глобального модифікатора.

Це відповідає символу «C» в «camelCase»

Тепер, як додати пробіл перед «C»?

Нам потрібно використовувати захоплюючі дужки! Вони дозволяють знайти відповідність і запам'ятати його, щоб використовувати пізніше! Використовуйте захоплюючі дужки, щоб запам'ятати знайдену велику літеру:

Отримати доступ до захопленого значенням пізніше можна так:

Вище ми використовуємо $ 1 для доступу до захопленого значенням. До речі, якби у нас було два набори захоплюючих дужок, ми використовували б $ 1 і $ 2 для посилання на захоплені значення і аналогічно для більшої кількості захоплюючих дужок.

Якщо вам потрібно використовувати дужки, але не потрібно фіксувати це значення, можна використовувати незахвативающіе дужки: (?: X). В цьому випадку знаходиться відповідність x, але воно не запам'ятовується.

Повернемося до поточної задачі. Як ми реалізуємо захоплюючі дужки? За допомогою методу JavaScript regexp replace! В якості другого аргументу ми передаємо «$ 1». Тут важливо використовувати лапки.

function removeCc (str) (return str.replace (/ () / g, "$ 1");)

Знову подивимося на код. Ми захоплюємо прописну букву, а потім замінюємо її тієї ж самої буквою. Усередині лапок вставимо пробіл, за яким слідує змінна $ 1. У підсумку отримуємо пробіл після кожної великої літери.

function removeCc (str) (return str.replace (/ () / g, "$ 1");) removeCc ( "camelCase") // "camel Case" removeCc ( "helloWorldItIsMe") // "hello World It Is Me"

Приклад: видаляємо великі літери

Тепер у нас є рядок з купою непотрібних великих літер. Ви здогадалися, як їх видалити? По-перше, нам потрібно вибрати усі великі літери. Потім використовуємо пошук набору символів за допомогою глобального модифікатора:

Ми знову будемо використовувати метод replace, але як в цей раз зробити рядкової символ?

function lowerCase (str) (return str.replace (// g, ???);)

Підказка: в методі replace () в якості другого параметра можна вказати функцію.

Ми будемо використовувати стрелочную функцію, щоб не захоплювати значення знайденого збіги. При використанні функції в методі JavaScript regexp replace ця функція буде викликана після пошуку збігів, і результат функції використовується в якості замісної рядки. Ще краще, якщо збіг є глобальним і знайдено кілька збігів - функція буде викликана для кожного знайденого збіги.

function lowerCase (str) (return str.replace (// g, (u) => u.toLowerCase ());) lowerCase ( "camel Case") // "camel case" lowerCase ( "hello World It Is Me" ) // "hello world it is me"

The RegExp constructor creates a regular expression object for matching text with a pattern.

For an introduction to regular expressions, read the Regular Expressions chapter in the JavaScript Guide.

The source for this interactive example is stored in a GitHub repository. If you "d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

Literal, constructor, and factory notations are possible:

/ Pattern / flags new RegExp (pattern [, flags]) RegExp (pattern [, flags])

Parameters

If specified, flags is a string that contains the flags to add; or if an object is supplied for the pattern, the flags string will replace any of that object "s flags (and lastIndex will be reset to 0) (as of ES2015). If flags is not specified and a regular expressions object is supplied, that object "s flags (and lastIndex value) will be copied over.

flags may contain any combination of the following characters:

G global match; find all matches rather than stopping after the first match. i ignore case; if u flag is also enabled, use Unicode case folding. m multiline; treat beginning and end characters (^ and $) as working over multiple lines (i.e., match the beginning or end of each line (delimited by \ n or \ r), not only the very beginning or end of the whole input string). s "dotAll"; allows. to match newlines. u Unicode; treat pattern as a sequence of Unicode code points. (See also Binary strings). y sticky; matches only from the index indicated by the lastIndex property of this regular expression in the target string (and does not attempt to match from any later indexes).

Description

There are two ways to create a RegExp object: a literal notation and a constructor.

• The literal notation "s parameters are enclosed between slashes and do not use quotation marks.
• The constructor function "s parameters are not enclosed between slashes, but do use quotation marks.

The following expressions create the same regular expression:

/ Ab + c / i new RegExp (/ ab + c /, "i") // literal notation new RegExp ( "ab + c", "i") // constructor

The literal notation provides a compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won "t be recompiled on each iteration.

The constructor of the regular expression object, for example, new RegExp ( "ab + c"), provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don "t know the pattern and are getting it from another source, such as user input.

Starting with ECMAScript 6, new RegExp (/ ab + c /, "i") no longer throws a TypeError ( "can" t supply flags when constructing one RegExp from another ") when the first argument is a RegExp and the second flags argument is present. A new RegExp from the arguments is created instead.

When using the constructor function, the normal string escape rules (preceding special characters with \ when included in a string) are necessary. For example, the following are equivalent:

Let re = / \ w + / let re = new RegExp ( "\\ w +")

Properties

Methods

The global RegExp object has no methods of its own. However, it does inherit some methods through the prototype chain.

RegExp prototype objects and instances

Properties

Examples

Using a regular expression to change data format

Regular expression and Unicode characters

As mentioned above, \ w or \ W only matches ASCII based characters; for example, a to z, A to Z, 0 to 9, and _.

To match characters from other languages ​​such as Cyrillic or Hebrew, use \ u hhhh, where hhhh is the character "s Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.

Let text = "Зразок text російською мовою" let regex = / [\ u0400- \ u04FF] + / g let match = regex.exec (text) console.log (match) // logs "Зразок" console.log (regex .lastIndex) // logs "7" let match2 = regex.exec (text) console.log (match2) // logs "на" console.log (regex.lastIndex) // logs "15" // and so on

Extracting sub-domain name from URL

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Регулярні виразидозволяють виробляти гнучкий пошук в рядках тексту.

створення

параметри

• g- глобальний пошук (обробляються всі збіги з шаблоном пошуку);
• i- Не будете звертати уваги рядкові і великі літери;
• m- багаторядковий пошук.

Коментарі

коли регулярний виразстворюється за допомогою конструктора new RegExp (...), необхідно пам'ятати, що зворотні слеші (\) повинні екрануватися, наприклад:

Var expr = new RegExp ( "\\ w", "ig");

При використанні літерального формату, цього робити не потрібно:

Var expr = / \ w / gi;

Обидві записи еквівалентні. Перший варіант може знадобиться, якщо вам доведеться генерувати регулярний вираз динамічно.

У регулярних виразах розрізняють наступні види символів:

звичайні символи

Спеціальні символи

Спецсимволи в регулярному виразі

Приклад зміни формату рядка

Var re = / (\ w +) \ s (\ w +) /; var str = "John Smith"; var newstr = str.replace (re, "$ 2, $ 1"); alert (newstr); // "Smith, John"

властивості

методи

global

Чи використовується прапор " g"В регулярному виразі.

синтаксис

global

значення globalбуде true, якщо прапор " gg

// Визначимо довільне регулярний вираз var regexp = / Шаблон приклад / g; / * У разі якщо regexp містить модифікатор g виведемо "Модифікатор g встановлений", в іншому випадку виведемо "Модифікатор g не встановлено" * / if (regexp.global) alert ( "Модифікатор g встановлений"); else alert ( "Модифікатор g не встановлено");

ignoreCase

Чи використовується прапор " i"В регулярному виразі.

синтаксис

Опис, коментарі, приклади

ignoreCaseце властивість окремого об'єкта регулярного виразу.

Ви не можете змінювати це властивість явно.

значення ignoreCaseбуде true, якщо прапор " i"Використовується; інакше - false. Прапор" i"Вказує, що регістр символів має ігноруватися при пошуку збігів в рядку.

// Визначимо довільне регулярний вираз var regexp = / Шаблон приклад / i; / * У разі якщо regexp містить модифікатор i виведемо "Модифікатор i встановлений", в іншому випадку виведемо "Модифікатор i не встановлено" * / if (regexp.ignoreCase) alert ( "Модифікатор i встановлений"); else alert ( "Модифікатор i не встановлено");

lastIndex

властивість lastIndexвказує позицію, з якої почнеться наступний пошук.

синтаксис

Коментарі

Це властивість буде працювати тільки якщо в регулярному виразі встановлений модифікатор g.

Дана властивість повертає ціле число, яке позначає позицію останнього символу знайденого за допомогою методу або.

приклад

multiline

Чи використовується прапор " m"В регулярному виразі.

синтаксис

Опис, коментарі, приклади

multilineце властивість окремого об'єкта регулярного виразу.

Ви не можете змінювати це властивість явно.

значення multilineбуде true, якщо прапор " g"Використовується; інакше - false. Прапор" g"Вказує, що регулярний вираз має перевірятися щодо всіх можливих збігів в рядку.

// Визначимо довільне регулярний вираз var regexp = / Шаблон приклад / m; / * У разі якщо regexp містить модифікатор g виведемо "Модифікатор g встановлений", в іншому випадку виведемо "Модифікатор g не встановлено" * / if (regexp.multiline) alert ( "Модифікатор m встановлений"); else alert ( "Модифікатор g не встановлено");

source

властивість sourceповертає вміст шаблону регулярного виразу