Регулярные выражения - это способ описания шаблонов в строковых данных. Они образуют небольшой отдельный язык, являющийся частью JavaScript и многих других языков и систем. Они являются мощным инструментом для проверки и обработки строк. Правильное понимание регулярных выражений сделает вас более эффективным программистом.

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

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

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

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

ВыполСтрока код »

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

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

Примечание: При использовании синтаксиса конструктора необходимо дважды экранировать специальные символы, что означает соответствие "." вам нужно писать "\\."вместо "\.". Если есть только одна обратная косая черта, она будет интерпретирована парсером строк JavaScript как экранирующий символ и будет удалена.

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

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

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

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


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

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

Выражение Строка Совпадения
[abc] a 1 совпадение
ac 2 совпадения
Hey Jude Не совпадает
abc de ca 5 совпадений

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

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

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

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

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

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

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

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


. - Точка

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

Выражение Строка Совпадения
.. a Не совпадает
ac 1 совпадение
acd 1 совпадение
acde 2 совпадения (содержит 4 символа)

^ - Каретка

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

Выражение Строка Совпадения
^a a 1 совпадение
abc 1 совпадение
bac Не совпадает
^ab abc 1 совпадение
acb Нет совпадений (начинается с a, но не сопровождается b)

$ - доллар

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

Выражение Строка Совпадения
a$ a 1 совпадение
formula 1 совпадение
cab Не совпадает

* - Звездочка

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

Выражение Строка Совпадения
ma*n mn 1 совпадение
man 1 совпадение
mann 1 совпадение
main Нет совпадений ( aне следует n)
woman 1 совпадение

+ - Плюс

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

Выражение Строка Совпадения
ma+n mn Нет совпадений (нет aсимвола)
man 1 совпадение
mann 1 совпадение
main Нет совпадений ( aне следует n)
woman 1 совпадение

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

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

Выражение Строка Совпадения
ma?n mn 1 совпадение (0 вхождений а)
man 1 совпадение
mann Нет совпадений (более одного nсимвола)
main Нет совпадений ( aне следует n)
woman 1 совпадение

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

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

Выражение Строка Совпадения
a{2,3} abc dat Не совпадает
abc daat 1 совпадение (в )daat
aabc daaat 2 совпадения (при aabcи )daaat
aabc daaaat 2 совпадения (при aabcи )daaaat

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

Выражение Строка Совпадения
[0-9]{2,4} ab123csde 1 совпадение (совпадение в )ab123csde
12 и 345673 3 совпадения ( 12, 3456, 73)
1 и 2 Не совпадает

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

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

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

Выражение Строка Совпадения
a|b cde Не совпадает
ade 1 совпадение (совпадение в ade)
acdbea 3 совпадения (в )acdbea

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

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

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

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

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

Выражение Строка Совпадения
(a|b|c)xz ab xz Не совпадает
abxz 1 совпадение (совпадение в )abxz
axz cabxz 2 совпадения (в )axzbc cabxz

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

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

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

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


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

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

Выражение Строка Совпадения
\Athe the sun Совпадает
In the sun Не совпадает

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

Выражение Строка Совпадения
\bfoo football Совпадает
a football Совпадает
foo\b a football Не совпадает
the foo Совпадает
the afoo test Совпадает
the afootest Не совпадает

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

Выражение Строка Совпадения
\Bfoo football Не совпадает
a football Не совпадает
foo\B a football Совпадает
the foo Не совпадает
the afoo test Не совпадает
the afootest Совпадает

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

Выражение Строка Совпадения
\d 12abc3 3 совпадения (в )12abc3
JavaScript Не совпадает

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

Выражение Строка Совпадения
\D 1ab34"50 3 совпадения (в )1ab34"50
1345 Не совпадает

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

Выражение Строка Совпадения
\s JavaScript RegEx 1 Совпадает
JavaScriptRegEx Не совпадает

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

Выражение Строка Совпадения
\S a b 2 совпадения (в a b)
  Не совпадает

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

Выражение Строка Совпадения
\w 12&": ;c 3 совпадения (в )12&": ;c
%"> ! Не совпадает

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

Выражение Строка Совпадения
\W 1a2%c 1 Совпадает (в )1a2%c
JavaScript Не совпадает

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

Выражение Строка Совпадения
JavaScript\Z I like JavaScript 1 Совпадает
I like JavaScript Programming Не совпадает
JavaScript is fun Не совпадает

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


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

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

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

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

Метод Описание
exec() Выполняет поиск совпадения в строке и возвращает массив информации. При несоответствии возвращает null.
test() Проверяет совпадение в строке и возвращает true или false.
match() Возвращает массив, содержащий все совпадения. При несоответствии возвращает null.
matchAll() Возвращает итератор, содержащий все совпадения.
search() Проверяет совпадение в строке и возвращает индекс совпадения. Он возвращает -1, если поиск не удался.
replace() Ищет совпадение в строке и заменяет совпавшую подстроку замещающей подстрокой.
split() Разбивает строку на массив подстрок.

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

ВыполСтрока код »

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

Флаги Описание
g Глобальный поиск (найти все совпадения)
m Многострочный поиск.
i Регистронезависимый поиск.
y Выполняет поиск начиная с символа, который находится на позиции свойства lastindex текущего регулярного выражения.

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

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 раза.

Kwork.ru - услуги фрилансеров от 500 руб.

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).
online_course
4.9
  • 37 видео
  • 69 заданий
  • 5 часов
online_course
5
  • 97 видео
  • 97 заданий
  • 34 часа
online_course
4.9
  • 38 видео
  • 38 заданий
  • 15 часов
online_course
4.9
  • 98 видео
  • 165 заданий
  • 22 часа
online_course
4.9
  • 55ч теории
  • 303ч практики
  • Нетология
online_course
4.9
  • 78ч теории
  • 141ч практики
  • GeekBrains