Автор неизвестен - Регулярные выражения для фронтендеров

Поэтому большие и
сложные регулярные выражения — это всегда ресурсоёмкий код.
Важно научиться составлять паттерны так, чтобы был баланс
между точностью совпадения и скоростью обработки. При этом
вы всегда будете добиваться, чтобы регулярное выражение
совпадало с чем нужно и не совпадало со всем остальным. В
этом кроется эффективность написания регулярных выражений,
о которой мы будем говорить в течение всего курса.

Мы разобрали главный принцип движения и возвратов поиска
регулярного выражения в строке. От этого будет зависеть,
насколько эффективно мы будем писать выражения в
дальнейшем.

1.3. Атрибут pattern

Если

вы

верстаете

HTML,

то

наверняка

уже

успели

«попробовать» атрибут pattern в элементах форм или хотя бы
слышали о нем. Давайте освежим в памяти.

«

Для удобства чтения в этой главе мы заменим привычный
термин «паттерн» на слово «шаблон», чтобы понятия не
пересекались.

Итак,

атрибут

pattern="{{регулярное

выражение}}"

используется в HTML-элементах формы и .
Предназначен

pattern
для
проверки
корректности
(валидности) данных, вводимых в поле. Это единственный
атрибут, который требует отдельных знаний и навыков для
корректной настройки.

«

Важное замечание: pattern не является шаблонизатором
или ограничителем ввода. Он лишь управляет признаком
valid/invalid для вводимых данных.



Пример выше позволяет вводить в текстовое поле любое
количество не цифр. Если ввести данные, не подходящие под
условия pattern , отправка данных на сервер будет блокирована,
а поле выдаст подсказку:

Однако, как уже говорилось ранее, в строку всё ещё можно
ввести абсолютно любые символы.
С этим связывают проблему чрезмерной точности регулярного
выражения. Браузер не отображает значение pattern , поэтому
пользователь не знает, что разработчик заложил в шаблон
проверки. При попытке отправить неверные данные браузер
выведет «Пожалуйста, используйте требуемый формат», но при
этом не покажет, что именно неправильно.
Поэтому при использовании pattern стоит придерживаться
максимально простых правил, подсказку для которых можно
описать с помощью атрибута placeholder .
Для примера давайте напишем шаблон проверки паспорта
гражданина РФ:
{
if (element.id !== '' && /^[^a-zA-Z]/.test(element.id)) {
alert(`Elements id="${element.id}" is wrong!`);
}
});

Наблюдательный студент заметит, что мы использовали символ
карет ^ дважды. Один раз внутри символьного класса, чтобы
обозначить отрицание, а второй раз как самостоятельный
символ, но об этом далее.

Необязательно, чтобы правило искало точное совпадение,
можно найти и то, чего быть не должно. В этом и фокус!

2.6. Границы текста
Напоследок стоит рассказать о двух метасимволах, которые
могут упростить построение регулярного выражения и
сократить количество возвратов:

— ^ — символ начала текста,
— $ — символ конца текста.

Важно

уточнить,

что

для

многострочных

текстов

эти

метасимволы будут обозначать именно начало и конец всего
текста, а не его отдельных строк.
Сразу несколько примеров:
/^2021/.test('2020 год был менее богат на киношные события в

Здесь символ начала текста ^ является якорем, без которого
дальнейшая проверка селекторов невозможна. Поэтому, даже
несмотря на то, что в тексте присутствует 2021, результатом
будет false .
'Работа была сдана 25.09.2020'.replace(/[0-9]$/, '1') // Раб

В этом примере мы наоборот привязались к концу текста, хотя
совпадений с символьным селектором [0-9] предостаточно.
Решим реальную задачу
У нас есть массив с номерами мобильных телефонов клиентов, и
нам нужно передать их в API оператора для рассылки СМСсообщений. Но некоторые номера написаны с неправильным
кодом страны, 8 вместо 7 , и сообщения по этим номерам не
отправятся. Нужно исправить эту неточность.

const data = ['85558345434', '71236452378', '75558755555', '
const result = data.map(item => item.replace(/^8/, '7'))

В этом примере важно наличие знака начала строки ^ , ведь без
него будет заменён первый символ 8 в любом из номеров
телефонов, даже в правильных.

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

2.7. Рисуем смайлы
Нам с сервера приходит небольшой массив с --">