33 самые полезные регулярки для веб-разработчика
33 самые полезные регулярки с примерами использования для быстрого решения наиболее распространенных задач веб-разработки.
Пользовательские данные
1. Юзернейм
Стандартный формат юзернейма – цифры, строчные буквы, символы - и _. Разумная длина – от 3 до 16 знаков. В зависимости от ваших конкретных потребностей вы можете изменять набор символов (например, разрешить символ *) и длину строки.
/^[a-z0-9_-]{3,16}$/
JS:
re.test('normal_login-123'); // true
re.test('IncorrectLogin'); // false
re.test('inc*rrect_l*gin'); // false
Что используем:
Символы ^ и $ указывают на начало и конец строки, так что введенный юзернейм будет проверен на совпадение полностью от первого до последнего символа.
2. Валидация email
Проверка адреса электронной почты на корректность – одна из самых частых задач веб-разработчика. Без этого не обходятся ни разнообразные формы подписки, ни авторизация.
Для валидации email существует множество различных регулярок. Вот одна из них – не самая большая и не самая сложная, но достаточно точная для быстрой проверки адреса:
/^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i
JS:
re.test('correct-email@mail.com'); // true
re.test('CORRECT.email@mail123.com'); //true
re.test('incorrect-email@mail'); //false
Что используем:
Флаг i в регулярных выражений обеспечивает регистронезависимость сравнения.
3. Номер телефона
Проверяя номер телефона, обязательно учитывайте общепринятые форматы, так как в разных странах их принято записывать по-разному. Например, для американского стиля подойдет вот такая регулярка:
/^\+?(\d{1,3})?[- .]?\(?(?:\d{2,3})\)?[- .]?\d\d\d[- .]?\d\d\d\d$/
JS:
re.test('(212) 348-2626'); // true
re.test('+1 832-393-1000'); // true
re.test('+1 202-456-11-11'); // false
Что используем:
Квантификатор ? соответствует одному предыдущему символу или его отсутствию.
4. Надёжность пароля
Часто встречаете на различных сервисах требование придумать сложный пароль? Кто и как определяет требуемую степень сложности? На самом деле, для этого есть некоторые стандарты: минимальная длина, разный регистр символов, наличие букв, цифр и специальных знаков.
Чтобы обеспечить ваших пользователей надежными паролями, можете воспользоваться вот таким выражением (или составить собственные регулярки со специфическими требованиями):
/^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$/
JS:
re.test('qwerty'); // false
re.test('qwertyuiop'); // false
re.test('abcABC123$'); // true
Что используем:
Оператор ?= внутри скобочной группы позволяет искать совпадения "просматривая вперед" переданную строку и не включать найденный фрагмент в результирующий массив.
Подробнее о надежности паролей вы можете узнать из этого руководства.
5. Почтовый индекс (zip-code)
Формат почтового индекса, как и телефона, зависит от конкретного государства.
В России все просто: шесть цифр подряд без разделителей.
/^\d{6}$/
Американский zip-code может состоять из 5 символов или в расширенном формате ZIP+4 – из 9.
/^\d{5}(?:[-\s]\d{4})?$/
JS:
re.test('75457'); // true
re.test('98765-4321'); // true
Что используем:
Последовательность ?: внутри скобочной группы исключает ее из запоминания.
6. Номер кредитной карты
Разумеется, при проверке номера платежной карты не стоит полагаться на регулярные выражения. Однако с их помощью вы можете сразу же отсеять очевидно неподходящие последовательности и не нагружать сервер лишним запросом.
С помощью вот такой длинной регулярки вы можете поддерживать сразу несколько платежных систем:
/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/
Подробнее разобраться, откуда что взялось, вы можете здесь.
Что используем:
Вертикальная черта | в регулярных выражениях обозначает альтернацию, то есть выбор одного варианта из нескольких.
Распространенные форматы
7. Начальные и конечные пробелы
Пробелы в начале и конце строки обычно не несут никакой смысловой нагрузки, но могут повлиять на анализ и обработку данных, поэтому от них следует сразу же избавляться.
/^[ \s]+|[ \s]+$/g
JS:
let str = " hello "; console.log(str.length); // 7 str = str.replace(re, ''); console.log(str.length); // 5
Что используем:
Квантификатор + соответствует инструкции {1,} – один и более символов.
8. Дата
С датами приходится работать очень часто, а форматов записи у них великое множество. Прежде чем начинать обработку, имеет смысл проверить, соответствует ли вид переданной строки требуемому.
Вот такое регулярное выражение поддерживает несколько форматов дат – с полными и краткими числами (5-1-91 и 05-01-1991) и разными разделителями (точка, прямой или обратный слеш).
/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/
Здесь учитываются даже високосные годы!
JS:
re.test('29-02-2000'); // true
re.test('29-02-2001'); // false
Что используем:
Последовательности вида \1, \2 и так далее – это обратные ссылки на скобочные группы, определяющие вид разделителя. Благодаря им можно отсеять даты с разными разделителями:
re.test('10-10/2010'); // false
9. IPv4
Адрес IP используется для идентификации конкретного компьютера в интернете Он состоит из четырех групп цифр (байтов), разделенных точками (192.0.2.235).
/\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/
Что используем:
Класс \b означает "границу слова" и имеет нулевую ширину (то есть это не отдельный символ).
10. IPv6
IPv6 – это новый, более сложный синтаксис IP-протокола. Выражение для проверки на этот формат выглядит куда страшнее, хотя на самом деле разница заключается только в поддержке шестнадцатеричных чисел:
(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))
11. Base64
Base64 – достаточно распространенный формат кодирования бинарных данных, который часто используется, например, в email-рассылках.
Для валидации строки в этом формате можно использовать следующее регулярное выражение:
^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$
12. ISBN
ISBN – международная номенклатура для печатных книг. Номер может состоять из 10 (ISBN-10) или 13 цифр (ISBN-13). На самих книгах ISBN обычно разделен дефисами на несколько групп (код страны, издательства и самой книги), но для проверки и использования их следует удалять.
Это регулярное выражение позволяет проверить оба формата сразу:
/\b(?:ISBN(?:: ?| ))?((?:97[89])?\d{9}[\dx])\b/i
JS:
re.test('ISBN 9781106998966'); // true
re.test('1106998966'); // true
re.test('110699896x'); // true
Числа
13. Проверка на число
Очень простая проверка строки на число с помощью регулярок:
/^\d{1,}$/
JS:
re.test('13'); // true
re.test('23yy'); // false
14. Разделитель разрядов
Задача разбить большое число на разряды по три цифры встречается в разработке довольно часто. Оказывается это очень легко сделать с помощью регулярок.
/\d{1,3}(?=(\d{3})+(?!\d))/g
JS:
'1234567890'.replace(re, '$&,'); // 1,234,567,890
Что используем:
Комбинация $& в строке замены позволяет подставить найденную комбинацию.
15. Цена
Цены могут быть представлены во множестве различных форматов. Универсального регулярного выражения для них, скорее всего, не существует, но цену в долларах из строки извлечь очень просто.
Эта регулярка предполагает, что для разделения разрядов числа используются запятые, а дробная часть отделена точкой:
/(\$[0-9,]+(\.[0-9]{2})?)/
JS:
let price = 'price $5,555.55'.match(re)[0]; '$5,555.55
Что используем:
Комбинация {2} означает, что символ из диапазона [0-9] должен быть повторен ровно 2 раза (дробная часть цены).
Файлы и URL
16. Сопоставить строку URL
Если вам необходимо проверить, является ли полученная строка URL-адресом, вы можете воспользоваться вот такой регуляркой:
/[-a-zA-Z0-9@:%_\+.~#?&\/=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&\/=]*)?/gi
Она подойдет для адресов с различными протоколами (HTTP, HTTPS, FTP) и даже без протокола.
JS:
re.test('https://yandex.ru'); // true
re.test('yandex.ru'); // true
re.test('hello world'); // false
17. Извлечение домена
В URL-адресе много частей: протокол, домен, поддомены, путь к странице и строка запроса. С помощью регулярок можно отбросить все лишнее и получить только домен:
/https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i
JS:
let domain = 'https://proglib.io'.match(re); console.log(domain[1]); // proglib
Что используем:
Метод match возвращает объект с данными совпадения. Под индексом 1 в нем хранится совпадение, соответствующее первой скобочной группе.
18. Расширения
Одна строчка регулярного выражения позволяет быстро и просто получить расширение файла, с которым вам предстоит работать:
/^(?:.*\.(?=(htm|html|class|js)$))?[^.]*$/i
JS:
let file1 = 'script.js'.match(re)[1]; // js let file2 = 'hello'.match(re) [1]; // undefined
Разумеется, при необходимости сюда можно добавлять другие расширения.
19. Протокол
Иногда требуется извлечь протокол полученной ссылки. Регулярные выражения и тут облегчают жизнь:
/^([a-zA-Z]+):\/\//
JS:
let protocol = 'https://proglib.io/'.match(re)[0]; // https
Социальные сети
20. Twitter
Имя пользователя Twitter:
/@([A-Za-z0-9_]{1,15})/
21. Facebook
URL аккаунта на Facebook:
/(?:http:\/\/)?(?:www\.)?facebook\.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[\w\-]*\/)*([\w\-]*)/
22. YouTube
Получение ID видео на YouTube:
/https:\/\/(?:youtu\.be\/|(?:[a-z]{2,3}\.)?youtube\.com\/watch(?:\?|#\!)v=)([\w-]{11}).*/gi
JS:
re.exec('https://www.youtube.com/watch?v=JbgvaQ_rM4I')[1]; // JbgvaQ_rM4I
Что используем:
Метод exec объекта регулярного выражения работает почти так же, как метод match строки.
HTML и CSS
23. HEX-цвета
Веб-разработчику часто приходится иметь дело с цветами, заданными в шестнадцатеричном формате. Регулярки позволяют легко извлекать такие цвета из строки:
/\#([a-fA-F]|[0-9]){3, 6}/
Крутой рецепт, правда? :)
24. Адрес изображения
Для получения адреса изображения обычно используется DOM-метод img.getAttribute('src'). Регулярки для этого применяются редко, но полезно все же знать их возможности:
/\< *[img][^\>]*[src] *= *[\"\']{0,1}([^\"\'\ >]*)/
JS:
re.exec('<img src="image.png" alt="image1">')[1]; // image.png
25. CSS-свойства
Еще одна нетривиальная ситуация – получение свойств CSS с помощью регулярных выражений:
/\s*[a-zA-Z\-]+\s*[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}/gm
JS:
let css = ` .element {
color: white;
background: black;
font-size: 16px;
}`
css.match(re);
Что используем:
Флаг m в регулярных выражениях включает многострочный режим.
26. HTML комментарии
А это очень полезная регулярка для удаления комментариев из HTML-кода:
/<!--(.*?)-->/
Что используем?
Символ ?, стоящий в регулярном выражении после другого квантификатора, переводит его в ленивый режим.
27. Title
Получить заголовок веб-страницы можно с помощью такого регулярного выражения:
/<title>([^<>]*?)</title>/
28. rel=«nofollow»
Важная SEO-задача, которую очень не хочется делать вручную, – добавление внешним ссылкам атрибута rel="nofollow". Обратимся к регулярным выражениям:
PHP:
$html = '<a href="https://site.com">site.com</a>, <a href="my-site.com">my-site.com</a>, <a href="https://site.com" rel="nofollow">site.com</a>'; $re = '/(<a\s*(?![^>]*\brel=)([^>]*\bhref=\"https?:\/\/[^"]+\"))/'; $result = preg_replace($re, '$1 rel="nofollow"', $html);
Эта регулярка выбирает в тексте все ссылки с протоколом http/https без атрибута rel и добавляет его.
29. Медиа запросы
Если требуется проанализировать медиа-запросы CSS, воспользуйтесь этой регуляркой:
/@media([^{]+)\{([\s\S]+?})\s*}/g
Что используем:
Класс \s обозначает пробельный символ (а также таб и перевод строки), а класс \S – наоборот, любой символ кроме пробельного.
30. Подсветка слов
Полезное выражение для поиска и выделения слов в тексте:
/\b(ipsum)\b/ig
JS:
let text = 'Lorem ipsum dolor, lorem ipsum dolor.'; text.replace(re, '<span style="background: yellow">$&</span>')
PHP:
$re = '/\b(ipsum)\b/i'; $text = 'Lorem ipsum dolor, lorem ipsum dolor.'; preg_replace($re, '<span style="background:#5fc9f6">1</span>', $text);
Разумеется, слово ipsum можно заменить на любое другое слово или словосочетание
Другие задачи веб-разработчика
31. Проверка версии Internet Explorer
К счастью, старый добрый IE постепенно уходит в прошлое, но он все же еще играет некоторую роль в современном вебе. Этот фрагмент кода позволяет определить версию всеми любимого браузера:
/^.*MSIE [5-8](?:\.[0-9]+)?(?!.*Trident\/[5-9]\.0).*$/
32. Удалить повторы
Регулярки дают возможность автоматически удалить случайные повторы слов без проглядывания всего текста:
/(\w+)\s+\1/gi
JS:
"hello world world hello".replace(re, "$1") // hello world hello
33. Количество слов
Порой веб-разработчику необходимо определить количество слов в строке, например, для организации ключевых слов в инструментах аналитики. Сделать это можно с помощью следующих регулярок:
^[^\s]*$ // ровно одно слово
^[^\s]*\s[^\s]*$ // ровно два слова
^[^\s]*\s[^\s]* // два слова и больше
^([^\s]*\s){2}[^\s]*$ // ровно три слова
^([^\s]*\s){4, }[^\s]*$ // пять слов и больше