renovations
This commit is contained in:
Ilya Kantor
parent
2022aafc13
commit
dceccedb58
60 changed files with 1730 additions and 272 deletions
|
|
@ -1,88 +1,95 @@
|
|||
# Символьные классы [todo]
|
||||
# Классы и спецсимволы
|
||||
|
||||
Рассмотрим задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры, а остальные символы нас не интересуют.
|
||||
Рассмотрим практическую задачу -- есть телефонный номер `"+7(903)-123-45-67"`, и нам нужно найти в этой строке цифры. А остальные символы нас не интересуют.
|
||||
|
||||
Для поиска символов определённого вида в регулярных выражениях предусмотрены "классы символов".
|
||||
|
||||
**Для поиска символов определённого вида, в регулярных выражениях предусмотрены "классы символов".**
|
||||
[cut]
|
||||
Класс символов -- это, в первую очередь, специальное обозначение.
|
||||
|
||||
Например, в данном случае нам нужен класс "произвольная цифра", он обозначается `\d`.
|
||||
Класс символов -- это специальное обозначение, под которое подходит любой символ данного класса.
|
||||
|
||||
Это обозначение вставляется в паттерн наравне с остальными символами. При поиске под него подходит любая цифра.
|
||||
Например, класс "любая цифра" обозначается `\d`. Это обозначение вставляется в паттерн наравне с остальными символами, и при поиске под него подходит любая цифра.
|
||||
|
||||
Пример ниже ищет все цифры в строке:
|
||||
Регулярное выражение <code class="pattern">/\d/</code> ищет ровно одну цифру (первую):
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
## Важнейшие классы
|
||||
|
||||
Это был класс для цифр.
|
||||
|
||||
Конечно же, есть и другие. Самые полезные классы:
|
||||
<dl>
|
||||
<dt>`\d` (от английского "digit" - "цифра")</dt>
|
||||
<dd>Цифра, символ от `0` до `9`.</dd>
|
||||
<dt>`\s` (от английского "space" - "пробел")</dt>
|
||||
<dd>Пробельный символ, включая табы, переводы строки и т.п.</dd>
|
||||
<dt>`\w` (от английского "word" -- "слово") </dt>
|
||||
<dd>Символ латинского алфавита или цифра или подчёркивание `'_'`</dd>
|
||||
<dd>Символ латинского алфавита или цифра или подчёркивание `'_'`. Не-английские буквы не являются `\w`.</dd>
|
||||
</dl>
|
||||
|
||||
**Регулярное выражение обычно содержит одновременно и обычные символы и классы**:
|
||||
Регулярное выражение как правило содержит одновременно и обычные символы и классы.
|
||||
|
||||
Например, найдём строку `CSS` с любой цифровой версией:
|
||||
Например, <code class="pattern">CSS\d</code> найдёт строку <code class="match">CSS</code>, с любой цифрой после неё.
|
||||
|
||||
Пример ниже найдёт строку `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'
|
||||
```
|
||||
|
||||
Совпадение (каждому классу в регэкспе соответствует один символ результата):
|
||||
|
||||
<img src="love_html5.png">
|
||||
|
||||
**Также существуют обратные символьные классы:**
|
||||
|
||||
## Обратные классы
|
||||
|
||||
Для каждого символьного класса существует "обратный ему", представленный такой же, но заглавной буквой.
|
||||
|
||||
"Обратный" -- означает, что ему соответствуют все остальные символы, например:
|
||||
|
||||
<dl>
|
||||
<dt>`\D`</dt>
|
||||
<dd>Не-цифра, любой символ кроме `\d`</dd>
|
||||
<dd>Не-цифра, то есть любой символ кроме `\d`, например буква.</dd>
|
||||
<dt>`\S`</dt>
|
||||
<dd>Не-пробел, любой символ кроме `\s`.</dd>
|
||||
<dd>Не-пробел, то есть любой символ кроме `\s`, например буква.</dd>
|
||||
<dt>`\W`</dt>
|
||||
<dd>Символ, не принадлежащий латиннице, а также не буква и не подчёркивание, алфавиту, т.е. любой кроме `\w`</dd>
|
||||
<dd>Любой символ, кроме `\w`, то есть не латинница, не подчёркивание, не цифра. В частности, русские буквы принадлежат этому классу.</dd>
|
||||
</dl>
|
||||
|
||||
Например, мы хотим получить из телефона <code class="subject">+7(903)-123-45-67</code> только цифры.
|
||||
В начале этой главы мы видели, как получить из телефона <code class="subject">+7(903)-123-45-67</code> все цифры.
|
||||
|
||||
Есть два способа сделать это.
|
||||
|
||||
<ol>
|
||||
<li>Первый -- найти все цифры и объединить их:
|
||||
Например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
var str = "+7(903)-123-45-67";
|
||||
|
||||
var digits = str.match( /\d/g ).join("");
|
||||
alert(digits); // 79031234567
|
||||
```
|
||||
|
||||
</li>
|
||||
<li>Второй -- найти все НЕцифры и удалить их из строки:
|
||||
Первый способ -- найти все цифры через `match(/\d/g)`, но есть и альтернативный -- найти все НЕцифры и удалить их из строки:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
|
|
@ -91,53 +98,59 @@ var str = "+7(903)-123-45-67";
|
|||
alert( str.replace(/\D/g, "") ); // 79031234567
|
||||
```
|
||||
|
||||
Второй способ короче, не правда ли?
|
||||
</li>
|
||||
</ol>
|
||||
## Спецсимволы
|
||||
|
||||
**Регулярное выражение может также содержать стандартные спецсимволы строк, такие как `\n, \t` и другие.**
|
||||
Регулярное выражение может также содержать стандартные спецсимволы строк, такие как перевод строки `\n`, табуляцию `\t` и другие.
|
||||
|
||||
Они являются обычными символами. Отличить их от классов очень просто -- для классов зарезервированы другие буквы.
|
||||
Отличить их от классов очень просто -- для классов зарезервированы другие буквы. Так что никакого конфликта здесь нет.
|
||||
|
||||
## Пробелы
|
||||
|
||||
[warn header="Пробелы важны!"]
|
||||
Обычно мы не обращаем внимание на пробелы. Для нашего взгляда строки <code class="subject">1-5</code> и <code class="subject">1 - 5</code> почти идентичны.
|
||||
|
||||
Но в регулярных выражениях **пробел - такой же символ, как и другие**.
|
||||
Но в регулярных выражениях пробел - такой же символ, как и другие.
|
||||
|
||||
Поиск ниже не сработает, т.к. не учитывает пробелы вокруг дефиса:
|
||||
Поиск ниже не сработает, так как не учитывает пробелы вокруг дефиса:
|
||||
|
||||
```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]
|
||||
|
||||
## Класс точка
|
||||
|
||||
Особым классом символов является точка `"."`.
|
||||
|
||||
**В регулярном выражении, точка <code class="pattern">"."</code> обозначает *любой символ*, кроме перевода строки**:
|
||||
В регулярном выражении, точка <code class="pattern">"."</code> обозначает *любой символ*, кроме перевода строки:
|
||||
|
||||
```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/) ); // нет совпадений, так как для точки нет символа
|
||||
```
|
||||
|
||||
## Экранирование специальных символов
|
||||
|
||||
В регулярных выражениях есть и другие символы, имеющие особый смысл.
|
||||
|
||||
Они используются, чтобы расширить возможности поиска.
|
||||
|
||||
Вот их полный список: <code class="pattern">[ \ ^ $ . | ? * + ( )</code>.
|
||||
|
||||
Не пытайтесь запомнить его -- когда мы разберёмся с каждым из них по отдельности, он запомнится сам собой.
|
||||
|
||||
**Чтобы использовать специальный символ в качестве обычного, он должен быть *экранирован*.**
|
||||
|
||||
Или, другими словами, перед символом должен быть обратный слэш `'\'`.
|
||||
|
||||
Например, нам нужно найти точку <code class="pattern">'.'</code>. В регулярном выражении она означает "любой символ, кроме новой строки", поэтому чтобы найти именно сам символ "точка" -- её нужно экранировать: <code class="pattern">\.</code>.
|
||||
|
||||
```js
|
||||
//+ run
|
||||
alert( "Глава 5.1".match( /\d\.\d/ ) ); // 5.1
|
||||
```
|
||||
|
||||
Круглые скобки также являются специальными символами, так что для поиска именно скобки нужно использовать `\(`. Пример ниже ищет строку `"g()"`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
alert( "function g()".match( /g\(\)/ ) ); // "g()"
|
||||
```
|
||||
|
||||
Сам символ слэш `'/'`, хотя и не является специальными символом в регулярных выражениях, но открывает-закрывает регэксп в синтаксисе <code class="pattern">/...pattern.../</code>, поэтому его тоже нужно экранировать.
|
||||
|
||||
Так выглядит поиск слэша `'/'`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
alert( "/".match( /\// ) ); // '/'
|
||||
```
|
||||
|
||||
Ну и, наконец, если нам нужно найти сам обратный слэш `\`, то его нужно просто задублировать.
|
||||
|
||||
Так выглядит поиск обратного слэша `"\"`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
alert( "1\2".match( /\\/ ) ); // '\'
|
||||
```
|
||||
|
||||
## Итого
|
||||
|
||||
Мы рассмотрели классы для поиска типов символов:
|
||||
|
||||
<ul>
|
||||
<li>`\d` -- цифры.</li>
|
||||
<li>`\D` -- не-цифры.</li>
|
||||
<li>`\s` -- пробельные символы, переводы строки.</li>
|
||||
<li>`\S` -- всё, кроме `\s`.</li>
|
||||
<li>`\w` -- латинница, цифры, подчёркивание `'_'`.</li>
|
||||
<li>`'.'` -- точка обозначает любой символ, кроме перевода строки.</li>
|
||||
</ul>
|
||||
|
||||
Кроме того, в регэкспах допустимы и обычные спец-символы строк, например `\n`.
|
||||
|
||||
Если хочется поискать именно точку или какой-то другой "особый" символ, то его экранируют: <code class="pattern">\.</code>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue