renovations
This commit is contained in:
parent
c6803faefd
commit
3889056599
22 changed files with 267 additions and 10 deletions
|
@ -169,7 +169,7 @@ function User(firstName, lastName) {
|
||||||
}
|
}
|
||||||
|
|
||||||
var vasya = new User("Вася", "Петров");
|
var vasya = new User("Вася", "Петров");
|
||||||
vasya.sayHi(); // Вася Петров
|
vasya.sayHi(); // Привет, Вася Петров
|
||||||
```
|
```
|
||||||
|
|
||||||
Мы уже говорили об этом подходе ранее, в главе [](/closures-usage).
|
Мы уже говорили об этом подходе ранее, в главе [](/closures-usage).
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
Ответ: <code class="pattern">\d\d:\d\d</code>.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
alert( "Завтрак в 09:00.".match( /\d\d:\d\d/ ) ); // 09:00
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
# Найдите время
|
||||||
|
|
||||||
|
Время имеет формат `часы:минуты`. И часы и минуты состоят из двух цифр, например: `09:00`.
|
||||||
|
|
||||||
|
Напишите регулярное выражение для поиска времени в строке: <code class="subject">Завтрак в 09:00.</code>
|
||||||
|
|
||||||
|
P.S. В этой задаче выражению позволительно найти и некорректное время, например `25:99`.
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
Ответы: **нет, да**.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>В строке <code class="subject">Java</code> он ничего не найдёт, так как исключающие квадратные скобки в `Java[^...]` означают "один символ, кроме указанных". А после <code>"Java"</code> -- конец строки, символов больше нет.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
alert( "Java".match(/Java[^script]/) ); // нет совпадений
|
||||||
|
```
|
||||||
|
</li>
|
||||||
|
<li>Да, найдёт. Поскольку регэксп регистрозависим, то под `[^script]` вполне подходит символ `"S"`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
alert( "JavaScript".match(/Java[^script]/) ); // "JavaS"
|
||||||
|
```
|
||||||
|
</li>
|
||||||
|
</ul>
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Java[^script]
|
||||||
|
|
||||||
|
Найдет ли регэксп <code class="pattern">/Java[^script]/</code> что-нибудь в строке <code class="subject">Java</code>?
|
||||||
|
|
||||||
|
А в строке <code class="subject">JavaScript</code>?
|
|
@ -0,0 +1,9 @@
|
||||||
|
Ответ: <code class="pattern">\d\d[-:]\d\d</code>.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /\d\d[-:]\d\d/g;
|
||||||
|
alert( "Завтрак в 09:00. Обед - в 21-30".match(re) );
|
||||||
|
```
|
||||||
|
|
||||||
|
Обратим внимание, что дефис <code class="pattern">'-'</code> не экранирован, поскольку в начале скобок он не может иметь специального смысла.
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Найдите время
|
||||||
|
|
||||||
|
Время может быть в формате `часы:минуты` или `часы-минуты`. И часы и минуты состоят из двух цифр, например `09:00`, `21-30`.
|
||||||
|
|
||||||
|
Напишите регулярное выражение для поиска времени:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var re = /ваше выражение/;
|
||||||
|
alert( "Завтрак в 09:00. Обед - в 21-30".match(re) ); // 09:00, 21-30
|
||||||
|
```
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
Символ `.` является специальным, значит его надо экранировать.
|
|
||||||
Регулярное выражение:
|
Решение:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
//+ run
|
//+ run
|
||||||
|
@ -7,3 +7,5 @@ var reg = /\.{3,}/g;
|
||||||
alert( "Привет!... Как дела?.....".match(reg) ); // ..., .....
|
alert( "Привет!... Как дела?.....".match(reg) ); // ..., .....
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Заметим, что символ `.` является специальным, значит его надо экранировать, то есть вставлять как `\.`.
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
|
|
||||||
Напишите регулярное выражения для поиска многоточий: трёх или более точек подряд.
|
Напишите регулярное выражения для поиска многоточий: трёх или более точек подряд.
|
||||||
|
|
||||||
|
|
||||||
Проверьте его:
|
Проверьте его:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
Итак, нужно написать выражение для описания цвета, который начинается с "#", за которым следуют 6 шестнадцатеричных символов.
|
||||||
|
|
||||||
|
Шестнадцатеричный символ можно описать с помощью <code class="pattern">[0-9a-fA-F]</code>. Мы можем сократить выражение, используя не чувствительный к регистру шаблон <code class="pattern">[0-9a-f]</code>.
|
||||||
|
|
||||||
|
Для его шестикратного повторения мы будем использовать квантификатор <code class="pattern">{6}</code>.
|
||||||
|
|
||||||
|
В итоге, получаем выражение вида <code class="pattern">/#[a-f0-9]{6}/gi</code>.
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /#[a-f0-9]{6}/gi;
|
||||||
|
|
||||||
|
var str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2";
|
||||||
|
|
||||||
|
alert( str.match(re) ); // #121212,#AA00ef
|
||||||
|
```
|
||||||
|
|
||||||
|
Проблема этого выражения в том, что оно находит цвет и в более длинных последовательностях:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #12345678
|
||||||
|
```
|
||||||
|
|
||||||
|
Если это является проблемой, то ее можно решить чуть более сложным выражением.
|
|
@ -0,0 +1,14 @@
|
||||||
|
# Регулярное выражение для цвета
|
||||||
|
|
||||||
|
Напишите регулярное выражение для поиска HTML-цвета, заданного как `#ABCDEF`, то есть `#` и содержит затем 6 шестнадцатеричных символов.
|
||||||
|
|
||||||
|
Пример использования:
|
||||||
|
|
||||||
|
```
|
||||||
|
var re = /*...ваше регулярное выражение...*/
|
||||||
|
|
||||||
|
var str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"
|
||||||
|
|
||||||
|
alert( str.match(re) ) // #121212,#AA00ef
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
|
||||||
|
|
||||||
|
Целое число -- это <code class="pattern">\d+</code>.
|
||||||
|
|
||||||
|
Десятичная точка с дробной частью -- <code class="pattern">\.\d+</code>.
|
||||||
|
|
||||||
|
Она не обязательна, так что обернём её в скобки с квантификатором <code class="pattern">'?'</code>.
|
||||||
|
|
||||||
|
Итого, получилось регулярное выражение <code class="pattern">\d+(\.\d+)?</code>:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /\d+(\.\d+)?/g
|
||||||
|
|
||||||
|
var str = "1.5 0 12. 123.4.";
|
||||||
|
|
||||||
|
alert( str.match(re) ); // 1.5, 0, 12, 123.4
|
||||||
|
```
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Найдите положительные числа
|
||||||
|
|
||||||
|
Создайте регэксп, который ищет все положительные числа, в том числе и с десятичной точкой.
|
||||||
|
|
||||||
|
Пример использования:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var re = /* ваш регэксп */
|
||||||
|
|
||||||
|
var str = "1.5 0 12. 123.4.";
|
||||||
|
|
||||||
|
alert( str.match(re) ); // 1.5, 0, 12, 123.4
|
||||||
|
```
|
|
@ -0,0 +1,13 @@
|
||||||
|
Целое число с необязательной дробной частью -- это <code class="pattern">\d+(\.\d+)?</code>.
|
||||||
|
|
||||||
|
К этому нужно добавить необязательный `-` в начале:
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /-?\d+(\.\d+)?/g
|
||||||
|
|
||||||
|
var str = "-1.5 0 2 -123.4.";
|
||||||
|
|
||||||
|
alert( str.match(re) ); // -1.5, 0, 2, -123.4
|
||||||
|
```
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Найдите десятичные числа
|
||||||
|
|
||||||
|
Создайте регэксп, который ищет все числа, в том числе и с десятичной точкой, в том числе и отрицательные.
|
||||||
|
|
||||||
|
Пример использования:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var re = /* ваш регэксп */
|
||||||
|
|
||||||
|
var str = "-1.5 0 2 -123.4.";
|
||||||
|
|
||||||
|
alert( str.match(re) ); // -1.5, 0, 2, -123.4
|
||||||
|
```
|
|
@ -1,11 +1,6 @@
|
||||||
# Совпадение для /d+? d+/
|
# Совпадение для /d+? d+/
|
||||||
|
|
||||||
Мы разобрали совпадение:
|
Что будет при таком поиске, когда сначало стоит ленивый, а потом жадный квантификаторы?
|
||||||
```js
|
|
||||||
"123 456".match(/\d+ \d+?/g) ); // 123 4
|
|
||||||
```
|
|
||||||
|
|
||||||
А что будет, если сначала поставить ленивый, а потом жадный квантификаторы?
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
"123 456".match(/\d+? \d+/g) ); // какой результат?
|
"123 456".match(/\d+? \d+/g) ); // какой результат?
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
Они очень похожи и, да, *почти* одинаковы. Оба ищут от одной кавычки до другой.
|
||||||
|
|
||||||
|
Различие здесь в символе точка <code class="pattern">'.'</code>. Как мы помним, точка <code class="pattern">'.'</code> обозначает *любой символ, кроме перевода строки*.
|
||||||
|
|
||||||
|
А <code class="pattern">[^"]</code> -- это *любой символ, кроме кавычки <code class="pattern">'"'</code>.
|
||||||
|
|
||||||
|
Получатся, что первый регэксп <code class="pattern">"[^"]*"</code> найдёт закавыченные строки с `\n` внутри, а второй регэксп <code class="pattern">".*?"</code> -- нет.
|
||||||
|
|
||||||
|
Вот пример:
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
alert( '"многострочный \n текст"'.match(/"[^"]*"/) ); // найдёт
|
||||||
|
|
||||||
|
alert( '"многострочный \n текст"'.match(/".*?"/) ); // null (нет совпадений)
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Различие между "[^"]*" и ".*?"
|
||||||
|
|
||||||
|
Регулярные выражения <code class="pattern">"[^"]*"</code> и <code class="pattern">".*?"</code> -- при выполнении одинаковы?
|
||||||
|
|
||||||
|
Иначе говоря, существует ли такая строка, на которой они дадут разные результаты? Если да -- дайте такую строку.
|
|
@ -0,0 +1,18 @@
|
||||||
|
Нужно найти начало комментария <code class="match"><!--</code>, затем всё до конца <code class="match">--></code>.
|
||||||
|
|
||||||
|
С первого взгляда кажется, что это сделает регулярное выражение <code class="pattern"><!--.*?--></code> -- квантификатор сделан ленивым, чтобы остановился, достигнув <code class="match">--></code>.
|
||||||
|
|
||||||
|
Однако, точка в JavaScript -- любой символ, *кроме* конца строки. Поэтому такой регэксп не найдёт многострочный комментарий.
|
||||||
|
|
||||||
|
Всё получится, если вместо точки использовать полностю "всеядный" <code class="pattern">[\s\S]</code>.
|
||||||
|
|
||||||
|
Итого:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /<!--[\s\S]*?-->/g;
|
||||||
|
|
||||||
|
var str = '.. <!-- Мой -- комментарий \n тест --> .. <!----> .. ';
|
||||||
|
|
||||||
|
alert( str.match(re) ); // '<!-- Мой -- комментарий \n тест -->', '<!---->'
|
||||||
|
```
|
|
@ -0,0 +1,11 @@
|
||||||
|
# Найти HTML-комментарии
|
||||||
|
|
||||||
|
Найдите все HTML-комментарии в тексте:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var re = ..ваш регэксп..
|
||||||
|
|
||||||
|
var str = '.. <!-- Мой -- комментарий \n тест --> .. <!----> .. ';
|
||||||
|
|
||||||
|
alert( str.match(re) ); // '<!-- Мой -- комментарий \n тест -->', '<!---->'
|
||||||
|
```
|
|
@ -0,0 +1,38 @@
|
||||||
|
Начнём поиск с <code class="pattern"><</code>, затем один или более произвольный символ, но до закрывающего "уголка": <code class="pattern">.+?></code>.
|
||||||
|
|
||||||
|
Проверим, как работает этот регэксп:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /<.+?>/g;
|
||||||
|
|
||||||
|
var str = '<> <a href="/"> <input type="radio" checked> <b>';
|
||||||
|
|
||||||
|
alert( str.match(re) ); // <> <a href="/">, <input type="radio" checked>, <b>
|
||||||
|
```
|
||||||
|
|
||||||
|
Результат неверен! В качестве первого тега регэксп нашёл подстроку <code class="match"><> <a href="/"></code>, но это явно не тег.
|
||||||
|
|
||||||
|
Всё потому, что <code class="pattern">.+?</code> -- это "любой символ (кроме `\n`), повторяющийся один и более раз до того, как оставшаяся часть шаблона совпадёт (ленивость)".
|
||||||
|
|
||||||
|
Поэтому он находит первый `<`, затем есть "всё подряд" до следующего `>`.
|
||||||
|
|
||||||
|
Первое совпадение получается как раз таким:
|
||||||
|
|
||||||
|
```
|
||||||
|
<.............>
|
||||||
|
<> <a href="/"> <input type="radio" checked> <b>
|
||||||
|
```
|
||||||
|
|
||||||
|
Правильным решением будет использовать <code class="pattern"><[^>]+></code>:
|
||||||
|
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /<[^>]+>/g
|
||||||
|
|
||||||
|
var str = '<> <a href="/"> <input type="radio" checked> <b>';
|
||||||
|
|
||||||
|
alert( str.match(re) ); // <a href="/">, <input type="radio" checked>, <b>
|
||||||
|
```
|
||||||
|
|
||||||
|
Это же решение автоматически позволяет находится внутри тегу символу `\n`, который в класс точка `.` не входит.
|
|
@ -0,0 +1,18 @@
|
||||||
|
# Найти HTML-теги
|
||||||
|
|
||||||
|
Создайте регулярное выражение для поиска всех (открывающихся и закрывающихся) HTML-тегов вместе с атрибутами.
|
||||||
|
|
||||||
|
Пример использования:
|
||||||
|
```js
|
||||||
|
//+ run
|
||||||
|
var re = /* ваш регэксп */
|
||||||
|
|
||||||
|
var str = '<> <a href="/"> <input type="radio" checked> <b>';
|
||||||
|
|
||||||
|
alert( str.match(re) ); // '<a href="/">', '<input type="radio" checked>', '<b>'
|
||||||
|
```
|
||||||
|
|
||||||
|
В этой задаче можно считать, что тег начинается с <code><</code>, заканчивается <code>></code> и может содержать внутри любые символы, кроме <code><</code> и <code>></code>.
|
||||||
|
|
||||||
|
Но хотя бы один символ внутри тега должен быть: <code><></code> -- не тег.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue