Регулярные выражения | JavaScript вместе с wm-school.ru

Создание регулярного выражения

Регулярное выражение JavaScript (или Regex ) - это последовательность символов, которую мы можем использовать для эффективной работы со строками. Используя этот синтаксис, мы можем:

• искать текст в строке
• заменить подстроки в строке
• извлекать информацию из строки

Регулярное выражение - это тип объекта. В JavaScript мы можем создать регулярное выражение двумя способами: либо с помощью конструктора RegExp, либо с помощью литерального синтаксиса.

Литеральный синтаксис использует косую черту ( /pattern/) для обертывания шаблона регулярного выражения, тогда как синтаксис конструктора использует кавычки ( "pattern"). В следующем примере демонстрируются оба способа создания регулярного выражения, которое соответствует любой строке, начинающейся с «Mr.».

В приведенном выше примере строка Mr. соответствует шаблону RegExp("^Mr\\."). Здесь для проверки соответствия строки шаблону используется метод test().

Есть несколько других методов, доступных для использования с JavaScript RegEx. Прежде чем мы их изучим, давайте узнаем о самих регулярных выражениях.

К специальным символам регулярного выражения относятся:
. * ? + [ ] ( ) { } ^ $ | \. Вам нужно будет использовать обратную косую черту для этих символов всякий раз, когда вы захотите использовать их буквально. Например, если вы хотите сопоставить «?», Вам нужно будет написать \?. Все остальные символы автоматически принимают их буквальные значения.

МетаСимволы

Для указания регулярных выражений используются метасимволы. В приведенном выше примере ( /^Mr\./) ^ является метасимволом.

Метасимволы - это символы, которые интерпретируются особым образом механизмом RegEx. Вот список метасимволов:

[]. ^ $ * +? {} () \ |

[] - Квадратные скобки

Квадратные скобки указывают набор символов, которые вы хотите сопоставить.

Здесь [abc]будет соответствовать, если строка, которую вы пытаетесь сопоставить, содержит любой из символов a, b или c.

Вы также можете указать диапазон символов, используя дефис - в квадратных скобках.

[a-e]то же самое, что и [abcde].

[1-4]то же самое, что и [1234].

[0-39]то же самое, что и [01239].

Вы можете дополСтрока (инвертировать) набор символов, используя символ вставки ^ в начале квадратной скобки.

[^abc]означает любой символ, кроме aили bили c.

[^0-9] означает любой нецифровой символ.

. - Точка

Точка соответствует любому одиночному символу (кроме новой строки '\n').

^ - Каретка

Символ каретки ^используется для проверки того, начинается ли строка с определенного символа.

$ - доллар

Символ доллара $ используется для проверки того, заканчивается ли строка определенным символом.

* - Звездочка

Символ звездочки * соответствует предыдущему символу повторенному 0 или более раз. Эквивалентно {0,}.

+ - Плюс

Символ плюс + соответствует предыдущему символу повторенному 1 или более раз. Эквивалентно {1,}.

? - Вопросительный знак

Знак вопроса ? соответствует нулю или одному вхождению предыдущего символа. То же самое, что и {0,1}. По сути, делает символ необязательным.

{} - Фигурные скобки

Рассмотрим следующий код: {n,m}. Это означает, по крайней мере n, и не больше m повторений предыдущего символа. При m=n=1 пропускается..

Посмотрим еще один пример. Это RegEx [0-9]{2, 4} соответствует как минимум 2 цифрам, но не более 4-х цифр.

| - Альтернация (или)

Альтернация (вертикальная черта) | – термин в регулярных выражениях, которому в русском языке соответствует слово «ИЛИ». (оператор or).

Например: gr(a|e)y означает точно то же, что и gr[ae]y.

Здесь a|bсопоставьте любую строку, содержащую либо, aлибоb

Чтобы примеСтрока альтернацию только к части шаблона, можно заключить её в скобки:

• Учу HTML|CSS найдёт Учу HTML или CSS.
• Учу (HTML|CSS) найдёт Учу HTML или Учу CSS.

() - Скобочные группы

Круглые скобки () используются для группировки подшаблонов. Так, например, (a|b|c)xz соответствует любой строке, которая соответствует либо a или b или c с последующимxz

\ - обратная косая черта

Обратная косая черта \ используется для экранирования различных символов, включая все метасимволы. Например,

\$a соответствует, если строка содержит $, за которым следует a. Здесь $ механизм RegEx не интерпретирует особым образом.

Если вы не уверены, имеет ли символ особое значение или нет, вы можете экранировать его косой чертой \ . Это гарантирует, что экранированный символ не будет компилироваться по-особенному.

Специальные последовательности

Специальные последовательности упрощают написание часто используемых шаблонов. Вот список специальных последовательностей:

\A - Соответствует, если указанные символы находятся в начале строки.

\b - Соответствует, если указанные символы находятся в начале или в конце слова.

\B- противоположность \b. Соответствует, если указанные символы НЕ находятся в начале или конце слова.

\d- Соответствует любой десятичной цифре. Эквивалентно[0-9]

\D- Соответствует любой не десятичной цифре. Эквивалентно[^0-9]

\s- Соответствует строкам, содержащим любой пробельный символ. Эквивалентно [ \t\n\r\f\v].

\S- Соответствует строкам, содержащим любой непробельный символ. Эквивалентно [^ \t\n\r\f\v].

\w- Соответствует любому буквенно-цифровому символу (цифрам и алфавитам). Эквивалентно [a-zA-Z0-9_]. Кстати, подчеркивание _тоже считается буквенно-цифровым символом.

\W- Соответствует любому не буквенно-цифровому символу. Эквивалентно[^a-zA-Z0-9_]

\Z - Соответствует, если указанные символы находятся в конце строки.

Теперь вы понимаете основы регаулярных выражений, давайте обсудим, как использовать регулярные выражения в вашем коде JavaScript.

Методы регулярных выражений JavaScript

Как упоминалось выше, вы можете использовать конструктор RegExp() и литерал регулярного выражения для создания регаулярных выражений в JavaScript.

const regex1 = /^ab/;
const regex2 = new Regexp('/^ab/');

В JavaScript вы можете использовать регулярные выражения RegExp() с методами:  test() и exec().

Есть также некоторые строковые методы, которые позволяют передавать RegEx в качестве параметра. К ним относятся match(), replace(), search() и split().

Пример 1: регулярные выражения

Флаги регулярных выражений

Регулярные выражения имеют четыре опциональных флага, которые делают возможным глобальный и регистронезависимый поиск. Флаги могут использоваться самостоятельно или вместе в любом порядке, а также могут являться частью регулярного выражения.

Чтобы использовать флаги в шаблоне регулярного выражения используйте следующий синтаксис:

var re = /pattern/flags;

или

var re = new RegExp("pattern", "flags");

Пример 2: Модификатор регулярного выражения

Пример 3: Проверка номера телефона

Пример 4: Проверка адреса электронной почты

Практика регулярных выражений

Давайте попрактикуемся в некоторых концепциях, которые мы узнали выше.

Составьте выражение, которое соответствует любому 10-значному числу:

Давайте разберемся с этим и посмотрим, что там происходит.

1. Если мы хотим добиться, чтобы совпадение охватывало всю строку, мы можем добавить квантификаторы ^и $. Каретка ^ соответствует началу входной строки, а знак доллара $соответствует ее концу. Таким образом, шаблон не будет соответствовать, если строка содержит более 10 цифр.
2. \d соответствует любому цифровому символу.
3. {10}совпадает с предыдущим выражением, в данном случае \dровно 10 раз. Таким образом, если тестовая строка содержит менее или более 10 цифр, результат будет ложным.

Сопоставьте дату со следующим форматом DD-MM-YYYY или DD-MM-YY

Давайте разберемся с этим и посмотрим, что там происходит.

1. Опять же, мы обернули все регулярное выражение внутрь ^ и $, так что совпадение охватывает всю строку.
2. ( начало первого подвыражения.
3. \d{1,2} соответствует минимум 1 цифре и максимум 2 цифрам.
4. - соответствует буквальному дефису.
5. ) конец первого подвыражения.
6. {2} соответствовать первому подвыражению ровно два раза.
7. \d{2} соответствует ровно двум цифрам.
8. (\d{2})?соответствует ровно двум цифрам. Но это необязательно (знак ?), поэтому год состоит из 2 или 4 цифр.

Выражение, которое соответствует чему угодно, кроме новой строки

Выражение должно соответствовать любой строке с форматом, например abc.def.ghi.jkl, где каждая переменная a, b, c, d, e, f, g, h, i, j, k, l может быть любым символом, кроме новой строки.

Давайте разберемся с этим и посмотрим, что там происходит.

1. Мы обернули все регулярное выражение внутрь ^ и $, так что совпадение охватывает всю строку.
2. ( начало первого подвыражения
3. .{3} соответствует любому символу, кроме новой строки, ровно 3 раза.
4. \. соответствует буквальной . точке
5. ) конец первого подвыражения
6. {3} соответствует первому подвыражению ровно 3 раза.
7. .{3} соответствует любому символу, кроме новой строки, ровно 3 раза.