33 самые полезные регулярки для веб-разработчика

3
18054
Добавить в избранное

33 самые полезные регулярки с примерами использования для быстрого решения наиболее распространенных задач веб-разработки.

33 самые полезные регулярки для веб-разработчика

Пользовательские данные

1. Юзернейм

Стандартный формат юзернейма – цифры, строчные буквы, символы - и _. Разумная длина – от 3 до 16 знаков. В зависимости от ваших конкретных потребностей вы можете изменять набор символов (например, разрешить символ *) и длину строки.

JS:

Что используем:
Символы ^ и $ указывают на начало и конец строки, так что введенный юзернейм будет проверен на совпадение полностью от первого до последнего символа.

2. Валидация email

Проверка адреса электронной почты на корректность – одна из самых частых задач веб-разработчика. Без этого не обходятся ни разнообразные формы подписки, ни авторизация.

Для валидации email существует множество различных регулярок. Вот одна из них – не самая большая и не самая сложная, но достаточно точная для быстрой проверки адреса:

JS:

Что используем:
Флаг i в регулярных выражений обеспечивает регистронезависимость сравнения.

3. Номер телефона

Проверяя номер телефона, обязательно учитывайте общепринятые форматы, так как в разных странах их принято записывать по-разному. Например, для американского стиля подойдет вот такая регулярка:

JS:

Что используем:
Квантификатор ? соответствует одному предыдущему символу или его отсутствию.

4. Надёжность пароля

Часто встречаете на различных сервисах требование придумать сложный пароль? Кто и как определяет требуемую степень сложности? На самом деле, для этого есть некоторые стандарты: минимальная длина, разный регистр символов, наличие букв, цифр и специальных знаков.

Чтобы обеспечить ваших пользователей надежными паролями, можете воспользоваться вот таким выражением (или составить собственные регулярки со специфическими требованиями):

JS:

Что используем:
Оператор ?= внутри скобочной группы позволяет искать совпадения «просматривая вперед» переданную строку и не включать найденный фрагмент в результирующий массив.

Подробнее о надежности паролей вы можете узнать из этого руководства.

5. Почтовый индекс (zip-code)

Формат почтового индекса, как и телефона, зависит от конкретного государства.

В России все просто: шесть цифр подряд без разделителей.

Американский zip-code может состоять из 5 символов или в расширенном формате ZIP+4 – из 9.

JS:

Что используем:
Последовательность ?: внутри скобочной группы исключает ее из запоминания.

6. Номер кредитной карты

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

С помощью вот такой длинной регулярки вы можете поддерживать сразу несколько платежных систем:

Подробнее разобраться, откуда что взялось, вы можете здесь.

Что используем:
Вертикальная черта | в регулярных выражениях обозначает альтернацию, то есть выбор одного варианта из нескольких.

Распространенные форматы

7. Начальные и конечные пробелы

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

JS:

Что используем:
Квантификатор + соответствует инструкции {1,} – один и более символов.

8. Дата

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

Вот такое регулярное выражение поддерживает несколько форматов дат – с полными и краткими числами (5-1-91 и 05-01-1991) и разными разделителями (точка, прямой или обратный слеш).

Здесь учитываются даже високосные годы!

JS:

Что используем:
Последовательности вида \1, \2 и так далее – это обратные ссылки на скобочные группы, определяющие вид разделителя. Благодаря им можно отсеять даты с разными разделителями:

9. IPv4

Адрес IP используется для идентификации конкретного компьютера в интернете Он состоит из четырех групп цифр (байтов), разделенных точками (192.0.2.235).

Что используем:
Класс \b означает «границу слова» и имеет нулевую ширину (то есть это не отдельный символ).

10. IPv6

IPv6 – это новый, более сложный синтаксис IP-протокола. Выражение для проверки на этот формат выглядит куда страшнее, хотя на самом деле разница заключается только в поддержке шестнадцатеричных чисел:

11. Base64

Base64 – достаточно распространенный формат кодирования бинарных данных, который часто используется, например, в email-рассылках.

Для валидации строки в этом формате можно использовать следующее регулярное выражение:

12. ISBN

ISBN – международная номенклатура для печатных книг. Номер может состоять из 10 (ISBN-10) или 13 цифр (ISBN-13). На самих книгах ISBN обычно разделен дефисами на несколько групп (код страны, издательства и самой книги), но для проверки и использования их следует удалять.

Это регулярное выражение позволяет проверить оба формата сразу:

JS:

Числа

13. Проверка на число

Очень простая проверка строки на число с помощью регулярок:

JS:

14. Разделитель разрядов

Задача разбить большое число на разряды по три цифры встречается в разработке довольно часто. Оказывается это очень легко сделать с помощью регулярок.

JS:

Что используем:
Комбинация $& в строке замены позволяет подставить найденную комбинацию.

15. Цена

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

Эта регулярка предполагает, что для разделения разрядов числа используются запятые, а дробная часть отделена точкой:

JS:

Что используем:
Комбинация {2} означает, что символ из диапазона [0-9] должен быть повторен ровно 2 раза (дробная часть цены).

Файлы и URL

16. Сопоставить строку URL

Если вам необходимо проверить, является ли полученная строка URL-адресом, вы можете воспользоваться вот такой регуляркой:

Она подойдет для адресов с различными протоколами (HTTP, HTTPS, FTP) и даже без протокола.

JS:

17. Извлечение домена

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

JS:

Что используем:
Метод match возвращает объект с данными совпадения. Под индексом 1 в нем хранится совпадение, соответствующее первой скобочной группе.

18. Расширения

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

JS:

Разумеется, при необходимости сюда можно добавлять другие расширения.

19. Протокол

Иногда требуется извлечь протокол полученной ссылки. Регулярные выражения и тут облегчают жизнь:

JS:

Социальные сети

20. Twitter

Имя пользователя Twitter:

21. Facebook

URL аккаунта на Facebook:

22. YouTube

Получение ID видео на YouTube:

JS:

Что используем:
Метод exec объекта регулярного выражения работает почти так же, как метод match строки.

HTML и CSS

23. HEX-цвета

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

Крутой рецепт, правда? 🙂

24. Адрес изображения

Для получения адреса изображения обычно используется DOM-метод img.getAttribute('src'). Регулярки для этого применяются редко, но полезно все же знать их возможности:

JS:

25. CSS-свойства

Еще одна нетривиальная ситуация – получение свойств CSS с помощью регулярных выражений:

JS:

Что используем:
Флаг m в регулярных выражениях включает многострочный режим.

26. HTML комментарии

А это очень полезная регулярка для удаления комментариев из HTML-кода:

Что используем?
Символ ?, стоящий в регулярном выражении после другого квантификатора, переводит его в ленивый режим.

27. Title

Получить заголовок веб-страницы можно с помощью такого регулярного выражения:

28. rel=«nofollow»

Важная SEO-задача, которую очень не хочется делать вручную, – добавление внешним ссылкам атрибута rel="nofollow". Обратимся к регулярным выражениям:

PHP:

Эта регулярка выбирает в тексте все ссылки с протоколом http/https без атрибута rel и добавляет его.

29. Медиа запросы

Если требуется проанализировать медиа-запросы CSS, воспользуйтесь этой регуляркой:

Что используем:
Класс \s обозначает пробельный символ (а также таб и перевод строки), а класс \S – наоборот, любой символ кроме пробельного.

30. Подсветка слов

Полезное выражение для поиска и выделения слов в тексте:

JS:

PHP:

Разумеется, слово ipsum можно заменить на любое другое слово или словосочетание

Другие задачи веб-разработчика

31. Проверка версии Internet Explorer

К счастью, старый добрый IE постепенно уходит в прошлое, но он все же еще играет некоторую роль в современном вебе. Этот фрагмент кода позволяет определить версию всеми любимого браузера:

32. Удалить повторы

Регулярки дают возможность автоматически удалить случайные повторы слов без проглядывания всего текста:

JS:

33. Количество слов

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

Свои любимые регулярки пишите в комментариях 🙂

Полезные статьи по регулярным выражениям

Хотите получать больше интересных материалов с доставкой?

Подпишитесь на нашу рассылку:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 3

  1. Александр Семиколенов

    2. Валидация email — неправильная, не заэеранированы точки, среди них есть лишние, re.test(‘[email protected]а’); //true
    7. символьные классы не нужны, \s не надо группировать с пробелом, он и так его содержит

  2. Александр Семиколенов

    2) регулярка с емейлом совсем не правильная, для нее например пройдет строка «[email protected]». В регулярке не экранируются точки и есть лишние точки, скорее должна выглядеть так: /^[A-Z0-9._%+-][email protected][A-Z0-9-]+\.[A-Z]{2,4}$/i
    7) \s — уже включает в себя пробел и другие пробельные символы, зачем ему быть в символьном классе вместе с ним?
    13) очевидная регулярка, непонятно почему {1,} , а не +

  3. Спасибо! Все самое нужное в одной статье

Добавить комментарий