-
-
- Если флага `g` нет, то `regexp.exec(str)` ищет и возвращает первое совпадение, является полным аналогом вызова `str.match(regexp)`. +
- Если флага `g` нет, то `regexp.exec(str)` ищет и возвращает первое совпадение, является полным аналогом вызова `str.match(reg)`.
- Если флаг `g` есть, то вызов `regexp.exec` возвращает первое совпадение и *запоминает* его позицию в свойстве `regexp.lastIndex`. Последующий поиск он начнёт уже с этой позиции. Если совпадений не найдено, то сбрасывает `regexp.lastIndex` в ноль.
-
+
- Для поиска только одного совпадения: +
-
-
-
- Для поиска только одного совпадения:
-
-
-
- Найти позицию первого совпадения -
- `str.search(regexp)` -
- Найти само совпадение -
- `str.match(regexp)` -
- Проверить, есть ли хоть одно совпадение -
- `regexp.test(str)`, также можно использовать `str.search(regexp) != -1` -
- Найти совпадение с нужной позиции -
- `regexp.exec(str)`, начальную позицию поиска задать в `regexp.lastIndex` -
- - Для поиска всех совпадений:
-
-
-
- Найти массив совпадений -
- `str.match(regexp)`, с флагом `g` -
- Получить все совпадения, с подробной информацией о каждом -
- `regexp.exec(str)` с флагом `g`, в цикле -
- - Дополнительно:
-
-
-
- Для поиска-и-замены -
- `str.replace(regexp, str|func)` -
- Для разбивки строки на части -
- `str.split(regexp)` -
+ - Найти позицию первого совпадения -- `str.search(reg)`. +
- Найти само совпадение -- `str.match(reg)`. +
- Проверить, есть ли хоть одно совпадение -- `regexp.test(str)` или `str.search(reg) != -1`. +
- Найти совпадение с нужной позиции -- `regexp.exec(str)`, начальную позицию поиска задать в `regexp.lastIndex`.
+ - Для поиска только одного совпадения:
-
- Для поиска всех совпадений: +
-
+
-
+
- Найти массив совпадений -- `str.match(reg)`, с флагом `g`. +
- Получить все совпадения, с подробной информацией о каждом -- `regexp.exec(str)` с флагом `g`, в цикле. +
+
+ - Для поиска-и-замены: +
-
+
-
+
- Замена на другую строку или функцией -- `str.replace(reg, str|func)` +
+ - Для разбивки строки на части: +
-
+
-
+
- `str.split(str|reg)` +
+
/\d/ ищет ровно одну цифру (первую):
```js
//+ run
var str = "+7(903)-123-45-67";
-var reg = /\d/g
+var reg = /\d/;
-alert( str.match(reg) ); // 7,9,0,3,1,2,3,4,5,6,7
+alert( str.match(reg) ); // 7
```
-Есть и другие классы. Самые полезные:
+...Ну а для поиска всех цифр достаточно добавить к нему флаг `g`:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+var reg = /\d/g;
+
+alert( str.match(reg) ); // массив цифр: 7,9,0,3,1,2,3,4,5,6,7
+```
+
+## Важнейшие классы
+
+Это был класс для цифр.
+
+Конечно же, есть и другие. Самые полезные классы:
- `\d` (от английского "digit" - "цифра")
- Цифра, символ от `0` до `9`.
- `\s` (от английского "space" - "пробел")
- Пробельный символ, включая табы, переводы строки и т.п.
- `\w` (от английского "word" -- "слово") -
- Символ латинского алфавита или цифра или подчёркивание `'_'` +
- Символ латинского алфавита или цифра или подчёркивание `'_'`. Не-английские буквы не являются `\w`.
CSS\d найдёт строку CSS, с любой цифрой после неё.
+
+Пример ниже найдёт строку `CSS` с любой цифровой версией:
```js
//+ run
-var str = "Стандарт CSS4 - наше будущее";
+var str = "Стандарт CSS4 - это здорово";
var reg = /CSS\d/
-alert( str.match(reg) );
+alert( str.match(reg) ); // CSS4
```
-Несколько классов в одном регэкспе:
+Можно указать и несколько классов в одном регэкспе:
```js
//+ run
-showMatch( "Я люблю HTML5!", /\s\w\w\w\w\d/ ); // 'HTML5'
+alert( "Я люблю HTML5!".match(/\s\w\w\w\w\d/) ); // 'HTML5'
```
Совпадение (каждому классу в регэкспе соответствует один символ результата):
-**Также существуют обратные символьные классы:**
+
+## Обратные классы
+
+Для каждого символьного класса существует "обратный ему", представленный такой же, но заглавной буквой.
+
+"Обратный" -- означает, что ему соответствуют все остальные символы, например:
- `\D` -
- Не-цифра, любой символ кроме `\d` +
- Не-цифра, то есть любой символ кроме `\d`, например буква.
- `\S` -
- Не-пробел, любой символ кроме `\s`. +
- Не-пробел, то есть любой символ кроме `\s`, например буква.
- `\W` -
- Символ, не принадлежащий латиннице, а также не буква и не подчёркивание, алфавиту, т.е. любой кроме `\w` +
- Любой символ, кроме `\w`, то есть не латинница, не подчёркивание, не цифра. В частности, русские буквы принадлежат этому классу.
+7(903)-123-45-67 только цифры.
+В начале этой главы мы видели, как получить из телефона +7(903)-123-45-67 все цифры.
-Есть два способа сделать это.
-
--
-
- Первый -- найти все цифры и объединить их: -Например: - -```js -//+ run -var str = "+7(903)-123-45-67"; - -var digits = str.match( /\d/g ).join(""); -alert(digits); // 79031234567 -``` - - -
- Второй -- найти все НЕцифры и удалить их из строки: +Первый способ -- найти все цифры через `match(/\d/g)`, но есть и альтернативный -- найти все НЕцифры и удалить их из строки: ```js //+ run @@ -91,53 +98,59 @@ var str = "+7(903)-123-45-67"; alert( str.replace(/\D/g, "") ); // 79031234567 ``` -Второй способ короче, не правда ли? - -
1-5 и 1 - 5 почти идентичны.
-Но в регулярных выражениях **пробел - такой же символ, как и другие**.
+Но в регулярных выражениях пробел - такой же символ, как и другие.
-Поиск ниже не сработает, т.к. не учитывает пробелы вокруг дефиса:
+Поиск ниже не сработает, так как не учитывает пробелы вокруг дефиса:
```js
//+ run
alert( "1 - 5".match (/\d-\d/) ); // null, нет совпадений!
```
-Поправим это, добавив в паттерн пробелы:
+Поправим это, добавив в регэксп пробелы:
```js
//+ run
alert( "1 - 5".match (/\d - \d/) ); // работает, пробелы вокруг дефиса
```
-В регулярные выражения также не надо вставлять лишние пробелы. Все они имеют значение:
+В регулярные выражения также не надо вставлять лишние пробелы. Все символы имеют значение:
```js
//+ run
alert( "1-5".match( /\d - \d/ ) ); // null, так как в строке 1-5 нет пробелов
```
-[/warn]
-
+## Класс точка
+
Особым классом символов является точка `"."`.
-**В регулярном выражении, точка "." обозначает *любой символ*, кроме перевода строки**:
+В регулярном выражении, точка "." обозначает *любой символ*, кроме перевода строки:
+
+```js
+//+ run
+alert( "Z".match(/./) ); // найдено Z
+```
+
+Посередине регулярного выражения:
```js
//+ run
var re = /CS.4/;
-alert( "Стандарт CSS4".match(re) ); // найдено "CSS4"
-alert( "Сталь CS-4".match(re) ); // найдено "CS-4"
-alert( "CS 4".match(re) ); // найдено "CS 4", пробел тоже символ
+alert( "CSS4".match(re) ); // найдено "CSS4"
+alert( "CS-4".match(re) ); // найдено "CS-4"
+alert( "CS 4".match(re) ); // найдено "CS 4" (пробел тоже символ)
```
Обратим внимание -- точка означает именно "произвольный символ".
@@ -146,7 +159,71 @@ alert( "CS 4".match(re) ); // найдено "CS 4", пробел тоже си
```js
//+ run
-
alert( "CS4".match (/CS.4/) ); // нет совпадений, так как для точки нет символа
```
+## Экранирование специальных символов
+
+В регулярных выражениях есть и другие символы, имеющие особый смысл.
+
+Они используются, чтобы расширить возможности поиска.
+
+Вот их полный список: [ \ ^ $ . | ? * + ( ).
+
+Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
+
+**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.**
+
+Или, другими словами, перед символом должен быть обратный слэш `'\'`.
+
+Например, нам нужно найти точку '.'. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: \..
+
+```js
+//+ run
+alert( "Глава 5.1".match( /\d\.\d/ ) ); // 5.1
+```
+
+Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
+
+```js
+//+ run
+alert( "function g()".match( /g\(\)/ ) ); // "g()"
+```
+
+Сам символ слэш `'/'`, хотя и не является специальными символом в регулярных выражениях, но открывает-закрывает регэксп в синтаксисе /...pattern.../, поэтому его тоже нужно экранировать.
+
+Так выглядит поиск слэша `'/'`:
+
+```js
+//+ run
+alert( "/".match( /\// ) ); // '/'
+```
+
+Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
+
+Так выглядит поиск обратного слэша `"\"`:
+
+```js
+//+ run
+alert( "1\2".match( /\\/ ) ); // '\'
+```
+
+## Итого
+
+Мы рассмотрели классы для поиска типов символов:
+
+-
+
- `\d` -- цифры. +
- `\D` -- не-цифры. +
- `\s` -- пробельные символы, переводы строки. +
- `\S` -- всё, кроме `\s`. +
- `\w` -- латинница, цифры, подчёркивание `'_'`. +
- `'.'` -- точка обозначает любой символ, кроме перевода строки. +
\.
+
+
+
diff --git a/10-regular-expressions-javascript/4-regexp-special-characters/article.md b/10-regular-expressions-javascript/4-regexp-special-characters/article.md
deleted file mode 100644
index 1f08dd20..00000000
--- a/10-regular-expressions-javascript/4-regexp-special-characters/article.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Экранирование специальных символов
-
-В регулярных выражениях есть и другие символы, имеющие особый смысл.
-
-Они используются, чтобы расширить возможности поиска.
-
-Вот их полный список: [ \ ^ $ . | ? * + ( ).
-
-Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
-
-**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.**
-
-Или, другими словами, перед символом должен быть обратный слэш `'\'`.
-
-Например, нам нужно найти точку '.'. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: \..
-
-```js
-//+ run
-alert( "Глава 5.1".match( /\d\.\d/ ) ); // 5.1
-```
-
-Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
-
-```js
-//+ run
-alert( "function g()".match( /g\(\)/ ) ); // "g()"
-```
-
-**Слэш `'/'`, хотя и не является специальными символом, но открывает-закрывает регэксп в синтаксисе /...pattern.../. Поэтому его тоже нужно экранировать: '\/'[еао] означает любой символ из этих трёх: `'а'`, `'е'`, или `'о'`.
-[cut]
-Можно использовать квадратные скобки вместе с обычными символами.
-Например:
+Такое обозначение называют *набором*. Наборы используются в регулярном выражении наравне с обычными символами:
```js
//+ run
@@ -14,7 +16,7 @@
alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
```
-Несмотря на то, что в квадратных скобках несколько символов, в совпадении должен присутствовать *ровно один* из них.
+Обратим внимание: несмотря на то, что в наборе указано несколько символов, в совпадении должен присутствовать *ровно один* из них.
Поэтому в примере ниже нет результатов:
@@ -24,13 +26,22 @@ alert( "Гоп-стоп".match( /[гт]оп/gi ) ); // "Гоп", "топ"
alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет
```
-Совпадение было бы, если бы после `"Ву"` шло сразу `"ля"`, например Вуля или если бы `"Ва"` сопровождалось `"ля"`, то есть Валя.
+Поиск подразумевает:
+-
+
В,
+- затем *одну* из букв набора
[уа],
+ - а затем
ля
+
Вуля или Валя.
+
+## Диапазоны
+
+Квадратные скобки могут также содержать *диапазоны символов*.
Например, [a-z] -- произвольный символ от `a` до `z`, [0-5] -- цифра от `0` до `5`.
-В примере ниже мы будем искать `"x"`, после которого идёт два раза `[0-9A-F]` -- цифра или буква от A до F:
+В примере ниже мы будем искать `"x"`, после которого идёт два раза любая цифра или буква от A до F:
```js
//+ run
@@ -38,7 +49,7 @@ alert( "Вуаля".match( /В[уа]ля/ ) ); // совпадений нет
alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
```
-Обратим внимание, в слове Exception есть сочетание xce, но оно не подошло, потому что буквы в нём маленькие, а в диапазоне -- большие.
+Обратим внимание, в слове Exception есть сочетание xce, но оно не подошло, потому что буквы в нём маленькие, а в диапазоне [0-9A-F] -- большие.
Если хочется искать и его тоже, можно добавить в скобки диапазон `a-f`: [0-9A-Fa-f]. Или же просто указать у всего регулярного выражения флаг `i`.
@@ -50,9 +61,9 @@ alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) );
[\t\n\v\f\r ] плюс несколько юникодных пробельных символов.\w -- это именно английская букво-цифра, как можно видеть из аналога [a-zA-Z0-9_].
-Чтобы находило слово на русском -- нужно использовать диапазон, например /[а-я]/. А чтобы на обоих языках -- и то и другое вместе:
+Чтобы находило слово на русском -- нужно использовать диапазон, например /[а-я]/.
+
+А чтобы на обоих языках -- и то и другое вместе:
```js
//+ run
@@ -81,7 +94,9 @@ var str = "Солнце (the sun) встаёт!";
alert( str.match( /[\wа-я]+/gi ) ); // Солнце, the, sun, вста, т*!*
```
-...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву ё, более того -- считает её разрывом в слове. Причина -- в кодировке юникод, она подробно раскрыта в главе [](/string). Буква `ё` лежит в стороне от основной кириллицы и её следует добавить в диапазон дополнительно, вот так:
+...Присмотритесь внимательно к предыдущему примеру! Вы видите странность? Оно не находит букву ё, более того -- считает её разрывом в слове. Причина -- в кодировке юникод, она подробно раскрыта в главе [](/string).
+
+Буква `ё` лежит в стороне от основной кириллицы и её следует добавить в диапазон дополнительно, вот так:
```js
//+ run
@@ -92,6 +107,8 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*
Теперь всё в порядке.
+## Диапазоны "кроме"
+
**Кроме обычных, существуют также *исключающие* диапазоны: [^…].**
Квадратные скобки, начинающиеся со знака каретки: [^…] находят любой символ, *кроме указанных*.
@@ -99,9 +116,9 @@ alert( str.match( /[\wа-яё]+/gi ) ); // Солнце, the, sun, встаёт*
Например:
-
-
[^аеуо]-- любой символ, кроме `'a'`, `'e'`, `'y'`, `'o'`
-[^0-9]-- любая не-цифра, то же что `\D`
-[^\s]-- любой не-пробельный символ, как и `\S`
+[^аеуо]-- любой символ, кроме `'a'`, `'e'`, `'y'`, `'o'`.
+[^0-9]-- любой символ, кроме цифры, то же что `\D`.
+[^\s]-- любой не-пробельный символ, то же что `\S`.
-
-
- точка
'.'
- - плюс
'+'
- - круглые скобки
'( )'
- - дефис
'-', если он находится в начале или конце квадратных скобок, то есть не выделяет диапазон.
- - символ каретки
'^', если не находится в начале квадратных скобок, то есть кроме[\^..].
- - а также открывающая квадратная скобка
'['
+ - Точка
'.'.
+ - Плюс
'+'.
+ - Круглые скобки
'( )'.
+ - Дефис
'-', если он находится в начале или конце квадратных скобок, то есть не выделяет диапазон.
+ - Символ каретки
'^', если не находится в начале квадратных скобок.
+ - А также открывающая квадратная скобка
'['.
[-().^+] ищет один из символов `-().^`. В данном контексте эти символы не являются специальными.
+Регэксп [.,] ищет один из символов "точка" или "запятая".
+
+В примере ниже регэксп [-().^+] ищет один из символов `-().^`. Они не экранированы:
```js
//+ run
+// Без экранирования
var re = /[-().^+]/g;
alert( "1 + 2 - 3".match(re) ); // найдёт +, -
@@ -142,6 +162,7 @@ alert( "1 + 2 - 3".match(re) ); // найдёт +, -
```js
//+ run
+// Всё заэкранировали
var re = /[\-\(\)\.\^\+]/g;
alert( "1 + 2 - 3".match(re) ); // тоже работает: +, -
diff --git a/10-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md b/10-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md
deleted file mode 100644
index 0eced219..00000000
--- a/10-regular-expressions-javascript/6-regexp-numeric-quantifiers/article.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Цифровые квантификаторы {n}
-
-Рассмотрим задачу -- взять телефон вида `+7(903)-123-45-67` и найти все числа в нём. То есть, нас интересует результат вида `7, 903, 123, 45, 67`.
-
-Нечто похожее мы уже делали ранее -- мы искали цифры. Для этого было достаточно класса `\d`. Но здесь нужно искать *числа* -- последовательности из 1 или более цифр.
-
-**Количество повторений символа можно указать с помощью числа в фигурных скобках: `{n}`.**
-
--
-
- Точное количество: `{5}` -
- Паттерн
\d{5}обозначает 5 цифр, как и-- Количество от-до: `{3,5}`
-- Для того, чтобы найти, например, числа размером от трёх до пяти знаков, нужно указать границы в фигурных скобках: `\d{3,5}` - -```js -//+ run -alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) ); // "1234" -``` - -Последнее значение можно и не указывать. Тогда выражение `\d{3,}` найдет числа, длиной от трех знаков: - -```js -//+ run -alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) ); // "345678" -``` - -
-
\d{1,}:
-
-```js
-//+ run
-var str = "+7(903)-123-45-67";
-
-alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
-```
-
diff --git a/10-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/solution.md b/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md
similarity index 100%
rename from 10-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/solution.md
rename to 10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/solution.md
diff --git a/10-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/task.md b/10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md
similarity index 100%
rename from 10-regular-expressions-javascript/6-regexp-numeric-quantifiers/1-find-text-manydots/task.md
rename to 10-regular-expressions-javascript/7-regexp-quantifiers/1-find-text-manydots/task.md
diff --git a/10-regular-expressions-javascript/7-regexp-quantifiers/article.md b/10-regular-expressions-javascript/7-regexp-quantifiers/article.md
index f71e8c51..ac0b6608 100644
--- a/10-regular-expressions-javascript/7-regexp-quantifiers/article.md
+++ b/10-regular-expressions-javascript/7-regexp-quantifiers/article.md
@@ -1,8 +1,60 @@
-# Квантификаторы +, * и ?
+# Квантификаторы +, *, ? и {n}
+
+Рассмотрим ту же задачу, что и ранее -- взять телефон вида `+7(903)-123-45-67` и найти все числа в нём. Но теперь нас интересуют не цифры по отдельности, а именно числа, то есть результат вида `7, 903, 123, 45, 67`.
+
+Для поиска цифр по отдельности нам было достаточно класса `\d`. Но здесь нужно искать *числа* -- последовательности из 1 или более цифр.
+
+## Количество {n}
+
+Количество повторений символа можно указать с помощью числа в фигурных скобках: `{n}`.
+
+Такое указание называют *квантификатором* (от англ. quantifier).
+
+У него есть несколько подформ записи:
+
+-
+
- Точное количество: `{5}` +
- Регэксп
\d{5}обозначает ровно 5 цифр, в точности как\d\d\d\d\d. + +Следующий пример находит пятизначное число. + +```js +//+ run +alert( "Мне 12345 лет".match (/\d{5}/) ); // "12345" +``` + +
+ - Количество от-до: `{3,5}` +
- Для того, чтобы найти, например, числа размером от трёх до пяти знаков, нужно указать границы в фигурных скобках:
\d{3,5}+ +```js +//+ run +alert( "Мне не 12, а 1234 года".match( /\d{3,5}/ ) ); // "1234" +``` + +Последнее значение можно и не указывать. Тогда выражение\d{3,}найдет числа, длиной от трех цифр: + +```js +//+ run +alert( "Мне не 12, а 345678 лет".match( /\d{3,5}/ ) ); // "345678" +``` +
+
\d{1,}:
+
+```js
+//+ run
+var str = "+7(903)-123-45-67";
+
+alert( str.match( /\d{1,}/g ) ); // 7,903,123,45,67
+```
+
+
+## Короткие обозначения
Для самые часто востребованных квантификаторов есть специальные короткие обозначения.
-[cut]
- `+`
- Означает "один или более", то же что `{1,}`. @@ -20,11 +72,13 @@ alert( str.match( /\d+/g ) ); // 7,903,123,45,67
- `?`
- Означает "ноль или один", то же что и `{0,1}`. По сути, делает символ необязательным.
-Например,
ou?rнайдётorв словеcolorиourв его британском варианте написанияcolour. +Например, регэкспou?rнайдётo, после которого, возможно, следуетu, а затемr. + +Этот регэксп найдётorв словеcolorиourвcolour: ```js //+ run -var str = "Можно писать color или colour"; +var str = "Можно писать color или colour (британский вариант)"; alert( str.match( /colou?r/g ) ); // color, colour ``` @@ -50,19 +104,22 @@ alert( "100 10 1".match( /\d0+/g ) ); // 100, 10
-
-
- Десятичная дробь (число с точкой внутри):
\d+\.\d+
+ - Регэксп "десятичная дробь" (число с точкой внутри):
\d+\.\d+ - +В действии: ```js //+ run alert( "0 1 12.345 7890".match( /\d+\.\d+/g ) ); // 123.45 ``` -
- Открывающий HTML-тег без атрибутов, такой как `` или `
`:
/<[a-z]+>/i
+ - Регэксп "открывающий HTML-тег без атрибутов", такой как `` или `
`:
/<[a-z]+>/i - Пример:
```js
@@ -72,7 +129,7 @@ alert( " ... ".match ( /<[a-z]+>/gi ) ); //
Это регулярное выражение ищет символ
'<', за которым идут одна или более букв английского алфавита, и затем'>'.
- - Открывающий HTML-тег без атрибутов (лучше):
/<[a-z][a-z0-9]*>/i
+ - Регэксп "открывающий HTML-тег без атрибутов" (лучше):
/<[a-z][a-z0-9]*>/i -
Здесь регулярное выражение расширено: в соответствие со стандартом, HTML-тег может иметь символ на любой позиции, кроме первой, например `
`. @@ -82,7 +139,7 @@ alert( "
Привет!
".match( /<[a-z][a-z0-9]*>/gi ) ); //```
- - Открывающий или закрывающий HTML-тег без атрибутов:
/<\/?[a-z][a-z0-9]*>/i
+ - Регэксп "открывающий или закрывающий HTML-тег без атрибутов":
/<\/?[a-z][a-z0-9]*>/i - В предыдущий паттерн добавили необязательный слэш
/?перед тегом. Его понадобилось заэкранировать, чтобы JavaScript не принял его за конец шаблона. ```js @@ -95,13 +152,11 @@ alert( "Привет!
".match( /<\/?[a-z][a-z0-9]*>/gi ) ); //, <\w+>. -Так как класс `\w` означает "любая цифра или английская буква или _`, то под такой шаблон подойдут и не теги, например
<_>, однако он гораздо проще, чем<[a-z][a-z0-9]*>. +Так как класс `\w` означает "любая цифра или английская буква или `'_'`, то под такой регэксп подойдут и не теги, например<_>. Однако он гораздо проще, чем более точный регэксп<[a-z][a-z0-9]*>. Подойдёт ли нам<\w+>или нужно использовать именно<[a-z][a-z0-9]*>? diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md index 2e3bbd51..483116d9 100644 --- a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/article.md @@ -1,13 +1,18 @@ -# Жадный и ленивый режимы +# Жадные и ленивые квантификаторы [todo] -Теперь время залезть "под капот" регулярных выражений и посмотреть, как происходит поиск. +Квантификаторы -- с виду очень простая, но на самом деле очень хитрая штука. + +Необходимо очень хорошо понимать, как именно происходит поиск, если конечно мы хотим искать что-либо сложнее чем/\d+/. -Это понимание необходимо для того, чтобы искать что-либо сложнее чем/\d+/. [cut] -Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить кавычки вида `"..."` на "кавычки-лапки": `«...»`. +Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить в тексте кавычки вида `"..."` (их называют "английские кавычки") на "кавычки-ёлочки": `«...»`. -Шаблон, который мы будем использовать для поиска подстрок в кавычках, будет выглядеть так: +Для этого нужно сначала найти все слова в таких кавычках. + +Соотверствующее регулярное выражение может выглядеть так:/".+"/g, то есть мы ищем кавычку, после которой один или более произвольный символ, и в конце опять кавычка. + +Однако, если попробовать применить его на практике, даже на таком простом случае... ```js //+ run @@ -15,38 +20,48 @@ var reg = /".+"/g; var str = 'a "witch" and her "broom" is one'; -alert( str.match(reg) ); +alert( str.match(reg) ); // "witch" and her "broom" ``` -Запустите этот пример... +...Мы увидим, что оно работает совсем не так, как задумано! -Упс! Он не работает! Вместо того, чтобы найти два совпадения"witch"и"broom", он находит одно:"witch" and her "broom". +Вместо того, чтобы найти два совпадения"witch"и"broom", оно находит одно:"witch" and her "broom". Это как раз тот случай, когда *жадность* -- причина всех зол. -## Алгоритм поиска +## Жадный поиск -Движок регулярных выражений пытается проверить строку на соответствие шаблону, начиная с самой первой, нулевой позиции. Если не получается, он идёт вперёд и пытается найти с 1й позиции и так далее. +Чтобы найти совпадение, движок регулярных выражений обычно использует следующий алгоритм: -Чтобы сделать происходящее максимально наглядным и понятным, проследим, что именно он делает для паттерна".+". +-
+
- Для каждой позиции в поисковой строке
+
-
+
- Проверить совпадение на данной позиции
+
- Посимвольно, с учётом классов и квантификаторов сопоставив с ней регулярное выражение.
+
+ - Проверить совпадение на данной позиции
+
".+".- Первый символ шаблона -- это кавычка
". -Движок регулярных выражений пытается найти её на 0й позиции, но там совсем другой символ, поэтому на 0й позиции соответствия явно нет. +Движок регулярных выражений пытается сопоставить её на 0й позиции в строке, но символ `a`, поэтому на 0й позиции соответствия явно нет. Далее он переходит 1ю, 2ю позицию в исходной строке и, наконец, обнаруживает кавычку на 3й позиции: -
+
- Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.
В данном случае следующий символ паттерна -- `.` (точка). Она обозначает "любой символ", так что следующая буква строки
'w'вполне подходит: -
+
- Далее "любой символ" повторяется, так как стоит квантификатор
.+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает "до конца строки": -
+
- Итак, текст закончился, движок регулярных выражений больше не может найти "любой символ", он закончил строить соответствие для
.+и очень рад по этому поводу. diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.png deleted file mode 100644 index adee0ccd..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.svg new file mode 100644 index 00000000..9db83ff6 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy1.svg @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.png deleted file mode 100644 index 878b0160..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.svg new file mode 100644 index 00000000..4ffbd589 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy2.svg @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.png deleted file mode 100644 index 7a8adbcf..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.svg new file mode 100644 index 00000000..a73b5063 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy3.svg @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.png deleted file mode 100644 index 3e634466..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.svg new file mode 100644 index 00000000..d76d61de --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy4.svg @@ -0,0 +1,21 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.png deleted file mode 100644 index 5b80ba67..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.svg new file mode 100644 index 00000000..09c28004 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy5.svg @@ -0,0 +1,21 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.png deleted file mode 100644 index d958c53b..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.svg new file mode 100644 index 00000000..f292ebc1 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_greedy6.svg @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.png deleted file mode 100644 index 3c0b20f5..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.svg new file mode 100644 index 00000000..efb9a034 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy3.svg @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.png deleted file mode 100644 index 9ad8af3e..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.svg new file mode 100644 index 00000000..36a03d38 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy4.svg @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.png b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.png deleted file mode 100644 index 77ecd34a..00000000 Binary files a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.png and /dev/null differ diff --git a/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.svg b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.svg new file mode 100644 index 00000000..5ad6b9e2 --- /dev/null +++ b/10-regular-expressions-javascript/8-regexp-greedy-and-lazy/witch_lazy6.svg @@ -0,0 +1,19 @@ + + \ No newline at end of file diff --git a/12-css-for-js/10-box-sizing/border-box.svg b/12-css-for-js/10-box-sizing/border-box.svg index fd9c586b..9b8a0936 100644 --- a/12-css-for-js/10-box-sizing/border-box.svg +++ b/12-css-for-js/10-box-sizing/border-box.svg @@ -1 +1,40 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg b/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg index 120b5d87..7a11b490 100644 --- a/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg +++ b/4-ajax/5-xhr-crossdomain/xhr-another-domain.svg @@ -1 +1,50 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/4-ajax/5-xhr-crossdomain/xhr-preflight.svg b/4-ajax/5-xhr-crossdomain/xhr-preflight.svg index 6bf2aa00..86d951d4 100644 --- a/4-ajax/5-xhr-crossdomain/xhr-preflight.svg +++ b/4-ajax/5-xhr-crossdomain/xhr-preflight.svg @@ -1 +1,67 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier-car.svg b/5-animation/1-bezier/bezier-car.svg index 5251d0b6..58061706 100644 --- a/5-animation/1-bezier/bezier-car.svg +++ b/5-animation/1-bezier/bezier-car.svg @@ -1 +1,32 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier-letter.svg b/5-animation/1-bezier/bezier-letter.svg index 5f4779ce..58e3fbfd 100644 --- a/5-animation/1-bezier/bezier-letter.svg +++ b/5-animation/1-bezier/bezier-letter.svg @@ -1 +1,50 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier-vase.svg b/5-animation/1-bezier/bezier-vase.svg index e0dcd149..6030a745 100644 --- a/5-animation/1-bezier/bezier-vase.svg +++ b/5-animation/1-bezier/bezier-vase.svg @@ -1 +1,49 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier2.svg b/5-animation/1-bezier/bezier2.svg index 5b7250d9..0b0f99a6 100644 --- a/5-animation/1-bezier/bezier2.svg +++ b/5-animation/1-bezier/bezier2.svg @@ -1 +1,20 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3-draw1.svg b/5-animation/1-bezier/bezier3-draw1.svg index 6fe02a19..9051e0ca 100644 --- a/5-animation/1-bezier/bezier3-draw1.svg +++ b/5-animation/1-bezier/bezier3-draw1.svg @@ -1 +1,37 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3-draw2.svg b/5-animation/1-bezier/bezier3-draw2.svg index 47745774..dd762b32 100644 --- a/5-animation/1-bezier/bezier3-draw2.svg +++ b/5-animation/1-bezier/bezier3-draw2.svg @@ -1 +1,38 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3-e.svg b/5-animation/1-bezier/bezier3-e.svg index 1ddae51c..79e31532 100644 --- a/5-animation/1-bezier/bezier3-e.svg +++ b/5-animation/1-bezier/bezier3-e.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier3.svg b/5-animation/1-bezier/bezier3.svg index 8d3aa43a..5ac329b5 100644 --- a/5-animation/1-bezier/bezier3.svg +++ b/5-animation/1-bezier/bezier3.svg @@ -1 +1,24 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier4-e.svg b/5-animation/1-bezier/bezier4-e.svg index 1509c0b7..562d06c6 100644 --- a/5-animation/1-bezier/bezier4-e.svg +++ b/5-animation/1-bezier/bezier4-e.svg @@ -1 +1,29 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/1-bezier/bezier4.svg b/5-animation/1-bezier/bezier4.svg index 6fe66dc0..f60ba3e5 100644 --- a/5-animation/1-bezier/bezier4.svg +++ b/5-animation/1-bezier/bezier4.svg @@ -1 +1,28 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/2-css-transitions/bezier-train-over.svg b/5-animation/2-css-transitions/bezier-train-over.svg index 10c357dc..696c5fc3 100644 --- a/5-animation/2-css-transitions/bezier-train-over.svg +++ b/5-animation/2-css-transitions/bezier-train-over.svg @@ -1 +1,45 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/2-css-transitions/ease-in-out.svg b/5-animation/2-css-transitions/ease-in-out.svg index c708f3a3..55c0dbee 100644 --- a/5-animation/2-css-transitions/ease-in-out.svg +++ b/5-animation/2-css-transitions/ease-in-out.svg @@ -1 +1,30 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/2-css-transitions/train-curve.svg b/5-animation/2-css-transitions/train-curve.svg index 1e8c8ec1..76acd7e6 100644 --- a/5-animation/2-css-transitions/train-curve.svg +++ b/5-animation/2-css-transitions/train-curve.svg @@ -1 +1,30 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/back.svg b/5-animation/3-js-animation/back.svg index cc9ccde5..462e7317 100644 --- a/5-animation/3-js-animation/back.svg +++ b/5-animation/3-js-animation/back.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/bounce-inout.svg b/5-animation/3-js-animation/bounce-inout.svg index 03ecd397..72befffd 100644 --- a/5-animation/3-js-animation/bounce-inout.svg +++ b/5-animation/3-js-animation/bounce-inout.svg @@ -1 +1,26 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/circ-ease.svg b/5-animation/3-js-animation/circ-ease.svg index a11fedef..df183f8b 100644 --- a/5-animation/3-js-animation/circ-ease.svg +++ b/5-animation/3-js-animation/circ-ease.svg @@ -1 +1,27 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/circ.svg b/5-animation/3-js-animation/circ.svg index d0233f89..1e05644a 100644 --- a/5-animation/3-js-animation/circ.svg +++ b/5-animation/3-js-animation/circ.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/elastic.svg b/5-animation/3-js-animation/elastic.svg index ff4451f7..0cf307cb 100644 --- a/5-animation/3-js-animation/elastic.svg +++ b/5-animation/3-js-animation/elastic.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/linear.svg b/5-animation/3-js-animation/linear.svg index dedfacda..6d8c4208 100644 --- a/5-animation/3-js-animation/linear.svg +++ b/5-animation/3-js-animation/linear.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/quad.svg b/5-animation/3-js-animation/quad.svg index 9ba9fb9f..4c06185b 100644 --- a/5-animation/3-js-animation/quad.svg +++ b/5-animation/3-js-animation/quad.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/5-animation/3-js-animation/quint.svg b/5-animation/3-js-animation/quint.svg index 75cc16c3..44f6fcc7 100644 --- a/5-animation/3-js-animation/quint.svg +++ b/5-animation/3-js-animation/quint.svg @@ -1 +1,25 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/figures.sketch b/figures.sketch index 8a068553..9b0b2a8f 100644 Binary files a/figures.sketch and b/figures.sketch differ
- Для каждой позиции в поисковой строке
+