JavaScript: изучаем регулярные выражения на практике

Регулярное выражение (далее также — регулярка) — это последовательность специальных символов, формирующих паттерн или шаблон (pattern), который сопоставляется со строкой.

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

В данной статье мы сосредоточимся на валидации.

Что конкретно мы будем делать? Мы возьмем несколько регулярок из validator.js (наиболее популярной библиотеки для валидации данных с помощью регулярных выражений) и произведем их подробный разбор. Также мы рассмотрим несколько дополнительных регулярок и один алгоритм.

Как результат, мы реализуем несколько полезных функций, которые вы впоследствии сможете использовать в своих проектах.

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

Еще парочка полезных ссылок:

• Интерактивный редактор (песочница) для создания и тестирования регулярных выражений. Одной из особенностей данной песочницы является автоматически генерируемое объяснение регулярных выражений, что бывает очень полезным

  
  

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

  
  

  // Валидация `URL` с протоколом `http(s)`
  const regexp = VerEx()
  // начало строки
  .startOfLine()
  // затем `http`
  .then('http')
  // затем, возможно, `s`
  .maybe('s')
  // затем `://`
  .then('://')
  // затем, возможно, `www.`
  .maybe('www.')
  // затем любой символ, кроме пробела
  .anythingBut(' ')
  // конец строки
  .endOfLine()
  
  const isURL = (str) => regexp.test(str)
  
  console.log(isURL('https://www.google.com')) // true

  
  

Для того, чтобы немного размять мозги, начнем с двух "валидаторов", в которых регулярные выражения не используются.

Является ли строка пустой?

Функция:

const isEmpty = (str) => str.trim().length === 0

console.log(isEmpty('not empty')) // false
console.log(isEmpty('   ')) // true

Метод trim() удаляет пробелы в начале и конце строки. Свойство length содержит количество символов, из которых состоит строка. Если строка не содержит символов, значит, ее свойство length имеет значение 0. В этом случае выражение str.length === 0 возвращает true. В противном случае, возвращается false.

Данную функцию можно переписать так:

const isEmpty = (str) => !str.trim().length
// `0` - ложное значение, `1` и больше - истинное значение,
// `!` - логическое НЕ, выполняет преобразование значения в логическое и меняет его на противоположное
// получается `!false`, или `true`

// или так
const _isEmpty = (str) => str.trim() === ''

Является ли значение "логическим"?

Функция:

const isBoolean = (str) => ['true', 'false', '1', '0'].indexOf(str) >= 0

console.log(isBoolean('true')) // true
console.log(isBoolean(false)) // false (см. ниже)

Метод indexOf() возвращает индекс элемента или -1 при отсутствии элемента в массиве. Если элемент в массиве есть, его индекс будет равным 0 или больше (в пределах длины массива — 1). В этом случае выражение arr.indexOf(str) >= 0 возвращает true. Иначе, возвращается false.

Обратите внимание: в данном случае логическими считаются не только значения true и false, но также 1 (обозначающее истину) и 0 (обозначающее ложь). Также обратите внимание, что функция принимает только строку (как и функции, которые будут рассматриваться в дальнейшем), поэтому второй вызов функции isBoolean() с логическим значением false возвращает false.

Данную функцию можно переписать так:

const bools = ['true', 'false', '1', '0']

const isBoolean = (str) => bools.indexOf(str) !== -1

// или так
const _isBoolean = (str) => bools.indexOf(str) > -1

Размялись? Отлично. Переходим к регуляркам.

Состоит ли строка только из букв?

Функция:

// для латиницы
const isAlpha = /^[A-Z]+$/i.test(str)

// для кириллицы
const _isAlpha = /^[А-ЯЁ]+$/i.test(str)

// для латиницы и криллицы
const __isAlpha = /^[A-ZА-ЯЁ]+$/i.test(str)

Посимвольный разбор:

• ^ и $ — символы начала и конца строки, соответственно (границы)
• [] — набор символов, перечисление (символ строки должен совпадать хотя бы с одним из вариантов)
• A-Z или А-ЯЁ — диапазон букв (например, А-ЯЁ — это все буквы киррилицы от А до Я + буква Ё, которая стоит особняком)

Обратите внимание: A-Z — это не тоже самое, что символьный класс \w. \w означает любая буква латиницы ИЛИ любая цифра ИЛИ символ нижнего подчеркивания.

• + — один или более предшествующий символ, т.е. символ, находящийся перед + (квантификатор)
• i — регистронезависимый поиск, т.е. поиск осуществляется без учета того, из больших или маленьких букв состоит строка (флаг)

Читаем регулярку: строка ДОЛЖНА состоять хотя бы из одной (одной или более) буквы, независимо от регистра.

Состоит ли строка только из букв и/или целых чисел?

Функция:

// для латиницы
const isAlphaNumeric = (str) => /^[0-9A-Z]+$/i.test(str)

// для кириллицы
const _isAlphaNumeric = (str) => /^[0-9А-ЯЁ]+$/i.test(str)

// для латиницы и кириллицы
const __isAlphaNumeric = (str) => /^[0-9A-ZА-ЯЁ]+$/i.test(str)

Разбор: такие же спецсимволы, что и в предыдущем примере +

• 0-9 — диапазон цифр от 0 до 9; данный диапазон можно заменить символьным классом \d, означающим любое число, для латиницы получится /^[\dA-Z]+$/i

Обратите внимание: здесь мы также не можем использовать \w из-за нижнего подчеркивания. Впрочем, мы можем исключить его из проверки, написав что-то вроде /^[^\W_]$/i, где [^] означает любой символ, кроме указанных в наборе (одним из таких символов является _), \W — НЕ буква латиницы, НЕ число и НЕ нижнее подчеркивание. Таким образом, [^\W_] означает любой символ, который НЕ является нижним подчеркиванием, а также не относится к буквам латиницы ИЛИ цифрам. Или в переводе на человеческий язык — любой символ, который является буквой латиницы или числом.

Читаем регулярку: строка ДОЛЖНА состоять хотя бы из одной буквы И/ИЛИ (арабского — в дальнейшем предполагается) числа, без учета регистра

Является ли значение почтовым индексом?

Функция:

const isPostalCode = (str) => /^\d{6}$/.test(str)

Разбор:

• {6} — точно 6 вхождений предшествующего символа, т.е. символ перед { должен повторяться 6 раз, поскольку почтовый индекс (для России) состоит из 6 цифр (квантификатор)

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

Читаем: значение ДОЛЖНО состоять (точно — в дальнейшем предполагается) из 6 цифр.

Является ли значение номером паспорта?

Функция:

// оригинал из `validator.js`
const passportNumber = /^\d{2}\d{2}\d{6}$/
// можно упростить
const _passportNumber = /^\d{10}$/

const removeSpaces = (str) => str.replace(/\s+/g, '')

const isPassportNumber = (str) => _passportNumber.test(removeSpaces(str))

Разбор:

• в самом регулярном выражении нет ничего нового — 10 цифр (или 2 цифры + 2 цифры + 6 цифр — в оригинале)
• removeSpaces() — утилита для удаления из строки пробелов, поскольку номер паспорта может выглядеть как 12 34 567890, 1234 567890 и т.д.
• \s означает пробельный символ: пробел, табуляция, перенос строки и т.д. (символьный класс)
• g — глобальный поиск, т.е. будут обнаружены все пробелы, имеющиеся в строке, а не только первый (флаг)

Читаем: значение ДОЛЖНО состоять из 10 цифр.

Является ли значение числом (целым или с плавающей точкой/запятой)?

Функция:

const numeric = (delimiter = '.') =>
  new RegExp(`^[+-]?([0-9]*\\${delimiter})?[0-9]+$`)

const isNumeric = (str, delimiter) => numeric(delimiter).test(str)

Разбор:

• numeric — функция, возвращающая регулярное выражение с указанным разделителем (delimiter), которым по умолчанию является символ .; это один из тех немногих случаев, когда для создания регулярки используется объект RegExp, позволяющий создавать регулярное выражение динамически, в отличие от //, создающего статический шаблон

Обратите внимание: символ . необходимо экранировать с помощью \ или, в данном случае, с помощью \\ (чтобы не экранировать $). Экранирование превращает . в обычную точку, в противном случае, этот символ будет иметь специальное значение — любой символ. Мы также экранируем любой другой символ, переданный в функцию isNumeric() в качестве разделителя (побочный эффект), но это не страшно.

• ? — НОЛЬ или ОДИН предшествующий символ (квантификатор); по сути, применение этого квантификатора делает предшествующий символ опциональным (необязательным)

  
  

• * — НОЛЬ или БОЛЕЕ предшествующих символов (квантификатор); этот квантификатор также делает предшествующий символ необязательным

  
  

• [+-]? — необязательный + или -

  
  

• ([0-9]*\.)? — необязательная группа, которая МОЖЕТ состоять из числа и точки ИЛИ только из точки (или другого разделителя)

  
  

• [0-9]+ — хотя бы одна цифра

  
  

Читаем: значение ДОЛЖНО состоять хотя бы из одной цифры и МОЖЕТ включать знак + или - в начале строки, за которым МОЖЕТ следовать любое количество цифр и разделитель ИЛИ только разделитель

Является ли строка цветом в шестнадцатиричном формате?

Функция:

const hexColor = /^#?([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i

const isHexColor = (str) => hexColor.test(str)

Разбор:

• длина регулярки может испугать, но это всего лишь повторяющийся шаблон
• #? — необязательный символ #
• [0-9A-F]{n} — n любых чисел ИЛИ букв латиницы от A до F (без учета регистра)
• | — альтерация, ИЛИ (строка должна совпадать с одним из вариантов — наборов)

Читаем: строка ДОЛЖНА состоять ЛИБО из 3, ЛИБО из 4, ЛИБО из 6, ЛИБО из 8 букв латиницы от A до F (без учета регистра) И/ИЛИ цифр и МОЖЕТ включать символ # в начале

Является ли строка цветом в формате RGB или RGBA?

// RGB без альфа-канала - прозрачности
const rgbColorRegexp =
  /^rgb\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){2}([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])\)$/

// RGBA с прозрасностью
const rgbaColorRegexp =
  /^rgba\((([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5]),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)$/

// RGB в процентах
const rgbColorPercentRegexp =
  /^rgb\((([0-9]%|[1-9][0-9]%|100%),){2}([0-9]%|[1-9][0-9]%|100%)\)/

// RGBA в процентах
const rgbaColorPercentRegexp =
  /^rgba\((([0-9]%|[1-9][0-9]%|100%),){3}(0?\.\d|1(\.0)?|0(\.0)?)\)/

// строка должна совпадать хотя бы с одним вариантом
const isRgbColor = (str) =>
  rgbColorRegexp.test(str) ||
  rgbaColorRegexp.test(str) ||
  rgbColorPercentRegexp.test(str) ||
  rgbaColorPercentRegexp.test(str)

Двигаемся дальше.

Является ли значение номером сотового телефона?

Функция (для России):

const mobilePhoneRegexp = /^(\+?7|8)?9\d{9}$/

const removeNonDigits = (str) => replace(/\D+/g, '')

const isMobilePhone = (str) => mobilePhoneRegexp.test(removeNonDigits(str))

Разбор:

• \+? — опциональный символ +; обратите внимание на экранирование
• (\+?7|8)? — опциональная группа, которая МОЖЕТ состоять из символа + и числа 7 или 8 ИЛИ только из числа 7 или 8
• removeNonDigits() — утилита для удаления всех символов, которые не являются числом (\D)

Читаем: строка ДОЛЖНА состоять из 10 цифр, первым из которых ДОЛЖНО БЫТЬ число 9, и МОЖЕТ включать символ + и число 7 или 8 ИЛИ только число 7 или 8 в начале

Лирическое отступление

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

// Определяем, является ли строка названием изображения в формате PNG, JPG, JPEG или SVG с помощью опережающей проверки
// Строка ДОЛЖНА состоять из одного и более (любого) символа, включать точку и заканчиваться на `png`, `jpg`, `jpeg` или `svg` (без учета регистра)
const isImage = (str) => /.+\.(?=png|jpe?g|gif|svg)/i.test(str)

// Определяем, что строка НЕ является названием изображения в формате WebP или AVIF с помощью негативной опережающей проверки
// ПОСЛЕ строки, состоящей из одного или более символа, НЕ ДОЛЖНО быть слова `webp` или `avif` (без учета регистра)
const isNotWebpOrAvif = (str) => /.+\.(?!webp|avif)/i.test(str)

// Что касается ретроспективной проверки, то я не смог придумать достойного примера - такого, который бы имел какие-то преимущества по сравнению с использованием метода `startsWith()`

// Определяем, что значение является долларами США с помощью ретроспективной проверки
// ПЕРЕД хотя бы одной цифрой ДОЛЖЕН быть символ `$`
const isUSD = (str) => /(?<=\$)\d+/.test(str)

// Определяем, что значение НЕ является евро с помощью негативной ретроспективной проверки
// ПЕРЕД хотя бы одной цифрой НЕ ДОЛЖНО быть символа `€`
const isNotEUR = (str) => /(?<!€)\d+/.test(str)

// Определяем, является ли строка эмодзи (или эмоджи)
// Флаг `u` и класс `\p{...}` - тема для отдельного разговора, however...
const isEmoji = (str) => /\p{So}/u.test(str)

// Универсальная функция для поиска символов на любом языке
const languageAgnostic = /[\p{Alpha}\p{M}\p{Nd}\p{Pc}\p{Join_C}]/u

const isLanguageAgnosticSymbol = (str) => languageAgnostic.test(str)

Еще парочка полезных утилит

// Определяем, является ли строка HTML-тегом
// [^>] - означает любой символ, кроме `>`
// ([^>]+) - один или более таких символов
const isHTMLTag = (str) => /(^<([^>]+)>$)/i.test(str)

const tag =
  '<p id="myID" class="my-class" data-type="my_type" style="color: green;">'

console.log(isHTMLTag(tag)) // true

// Находим слова в одинарных или двойных (парных) кавычках
// обратите внимание: в данном случае мы не учитываем, что кавычки могут быть экранированы
const quotes = /(["'])([^"'])*\1/g
const getQuottedWords = (str) => str.match(quotes)

const str = `some string with "double quotes" and 'single quotes'`

console.log(getQuottedWords(str).join('\n'))
/*
  "double quotes"
  'single quotes'
*/

// или так (короче, но также без учета экранирования)
const _quotes = /(["']).*\1/g

// или так (с учетом экранирования)
const __quotes = /(["'])([^"'\\])*\1/g
const _getQuottedWords = (str) => str.match(__quotes)

const str = "some string with \"escaped double quotes\""

console.log(..._getQuottedWords(str)) // "escaped double quotes"

// Определяем, является ли строка временем в формате ЧЧ:ММ:СС
// Строка ДОЛЖНА начинаться с 1 с ведущим 0 или без него и любым числом (01-19) ИЛИ
// 2 и любым числом в диапазане от 0 до 3 (20-23) - часы,
// затем ДОЛЖНЫ следовать две группы, состоящие из двоеточия и любого двухзначного числа,
// первая цифра которого ДОЛЖНА находиться в диапазоне от 0 до 5 (01-59) - часы и минуты
const isTime = (str) => /([01]\d|2[0-3])(:[0-5]\d){2}$/.test(str)

console.log(isTime('12:00')) // false
console.log(isTime('12:00:00')) // true

Функция для удаления из строки ВСЕХ пробелов

const str = '  some   string  with   crazy    spaces '

const formatted = str
  .replace(/\s{2,}/g, ' ')
  .trim()
  .replace('crazy', 'normal')

console.log(formatted) // 'some string with normal spaces'

Функция для форматирования даты

// В таком формате возвращается дата из `<input type="date">`
const str = '2021-06-29'
// допустим, что мы хотим преобразовать ее в привычный для нас формат - `ДД.ММ.ГГГГ`

// С помощью обычных скобочных групп
// определяем скобочные группы 1, 2 и 3
const regexp = /(\d{4})-(\d{2})-(\d{2})/

// производим замену
const formatted = str.replace(regexp, '$3.$2.$1')
console.log(formatted) // 29.06.2021

// С помощью именованных групп захвата
// определяем группы `year`, `month` и `day`,
// чтобы не запоминать (считать) номера групп (количество скобок)
const _regexp = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/

// производим замену
const _formatted = str.replace(_regexp, '$<day>.$<month>.$<year>')
console.log(_formatted) // 29.06.2021

// С помощью функции-заменителя
// это не имеет особого смысла, просто для примера
const regexp = /(\d{4})-(\d{2})-(\d{2})/

const result = str.replace(
  regexp,
  // первый аргумент, который нам не нужен - это объект совпадения `match`
  (_, year, month, day) => `${day}.${month}.${year}`
)
console.log(result) // 29.06.2021

Теперь поговорим о строках, к содержанию которых предъявляются особые требования. Под такими строками я подразумеваю URL (или, если угодно, URI) и email. В принципе, сюда же можно отнести пароли, требования к которым предъявляются не нормативными документами (RFC), а клиентами/заказчиками/разработчиками.

URL

URL (Uniform Resource Locator — унифицированный указатель ресурса) — система унифицированных адресов электронных ресурсов, или единообразный определитель местонахождения ресурса.

Он состоит из следующих частей:

Требования, предъявляемые к "урлам", содержатся, в основном, в RFC 3986. Согласно этому документу URL может содержать следующие символы:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~:/?#[]@!$&'()*+,;=

Однако, при этом не уточняется, в какой части URL какие символы могут использоваться.

Также в названном документе приводится регулярка для разбора урлов (приложение B), которая выглядит так (числа — это номера групп):

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
 12            3  4          5       6  7        8 9

Попробуем ее применить:

const url = /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/
const str = 'https://example.com/main?search#hash'
const result = str.match(url)
console.log(result)
/*
  [
    0: "https://example.com/main?search#hash"
    1: "https:"
    2: "https"
    3: "//example.com"
    4: "example.com"
    5: "/main"
    6: "?search"
    7: "search"
    8: "#hash"
    9: "hash"
    // ...
  ]
*/

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

const str = 'https://user:[e-mail]:80/main?query#anchor'
const result = new URL(str)
console.log(result)
/*
  {
    hash: "#anchor"
    host: "example.com:80"
    hostname: "example.com"
    href: "https://user:[e-mail]:80/main?query#anchor"
    origin: "https://example.com:80"
    password: "pwd"
    pathname: "/main"
    port: "80"
    protocol: "https:"
    search: "?query"
  }
*/

Вот один из возможных вариантов регулярки для проверки URL с учетом протокола http(s), а также без учета некоторых символов:

/
  https?:\/\/               - `http` с необязательным `s`
  (www\.)?                  - опциональные `www` и `.`
  [-\w@:%\.\+~#=]{1,256}    - любые символы из набора в количестве 1-256
  \.                        - точка
  [a-z0-9()]{2,}            - домен размером от 2 символов
  \b                        - граница строки
  ([-\w()@:%\.\+~#=//?&]*)  - поддомен, строка запроса, якорь и т.д.
/i

Тестируем:

const url =
  /https?:\/\/(www\.)?[-\w@:%\.\+~#=]{1,256}\.[a-z0-9()]{1,6}\b([-\w()@:%\.\+~#=//?&]*)/i

const urls = [
  'http://www.example.ru',
  'https://www.example.ru',
  'http://example.ru',
  'http://www.example.ru/main',
  'htt://example.ru',
  'www.example.ru',
  'www.mp3.com',
  'www.e.org',
  'http://e.org',
  'http://www.e.org',
  'https://www.e.org',
  'www.ab.com',
  'http://ab.com',
  'http://www.ab.com',
  'https://www.ab.com',
  'www.example',
  'www.example-.ru',
  'www.-example.ru',
  'example.ru',
  'http://www.example',
  'http://example',
  'www.mp3#.com'
]

urls.forEach((u) => {
  if (url.test(u)) {
    console.log(`%cCorrect: ${u}`, 'color: green;')
  } else {
    console.info(`%cWrong: ${u}`, 'color: red;')
  }
})
/*
  Correct: http://www.example.ru
  Correct: https://www.example.ru
  Correct: http://example.ru
  Correct: http://www.example.ru/main
  Wrong: htt://example.ru
  Wrong: www.example.ru
  Wrong: www.mp3.com
  Wrong: www.e.org
  Correct: http://e.org
  Correct: http://www.e.org
  Correct: https://www.e.org
  Wrong: www.ab.com
  Correct: http://ab.com
  Correct: http://www.ab.com
  Correct: https://www.ab.com
  Wrong: www.example
  Wrong: www.example-.ru
  Wrong: www.-example.ru
  Wrong: example.ru
  Wrong: http://www.example
  Wrong: http://example
  Wrong: www.mp3#.com
*/

Email

Электронная почта — технология и служба по пересылке и получению электронных сообщений между пользователями компьютерной сети.

Адрес электронной почты (email) состоит из из следующих частей:

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

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

// (хотя бы один (любой) символ)@(хотя бы один символ).(хотя бы один символ)
const isEmail = (str) => /^(.+)@(.+)\.(.+)$/.test(str)

Или можно обойтись вообще без регулярки:

// преобразуем строку в массив
const isEmail = ([...str]) =>
  // проверяем, что в массиве есть символ `@`, он находится, как минимум, на второй позиции
  str.indexOf('@') > 0 &&
  // и является единственным
  str.indexOf('@') === str.lastIndexOf('@') &&
  // проверяем, что в массиве есть точка,
  str.indexOf('.') > 0 &&
  // она стоит после символа `@`
  str.indexOf('@') < str.indexOf('.') &&
  // и не является последним символом
  str.indexOf('.') < str.length - 1

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

Вот гораздо более продвинутый (надежный) пример:

/^
  (
    (
      [^<>()[\]\\.,;:\s@"]+   - один или более символ, кроме указанных
      (\. - точка
        [^<>()[\]\\.,;:\s@"]+ - один или более символ, кроме указанных
      )
      *                       - ноль или более
    )
    |                         - ИЛИ
    (".+")                    - один или более символ в двойных кавычках
  )
    @                         - символ `@`
  (
    (
      \[                      - открывающая квадратная скобка
        [0-9]{1,3}            - от 1 до 3 цифр
        \.                    - точка
        [0-9]{1,3}
        \.
        [0-9]{1,3}
        \.
        [0-9]{1,3}
      \]                      - закрывающая квадратная скобка
    )
    | - ИЛИ
    (
      (
        [-a-z0-9]+            - одна или более буква латиницы, цифра или символ `-`
        \.                    - точка
      )+                      - один или более
      [a-z]{2,}               - хотя бы `2` буквы латиницы
    )
  )
$/i                           - без учета регистра

Функция:

const email =
  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/i

const isEmail = (str) => email.test(str)

// тестируем
// вместо `@`, написали `_`
console.log(isEmail('my_mail.com')) // false
// пропустили `.`
console.log(isEmail('my@mailcom')) // false
// пропустили начало
console.log(isEmail('@mail.com')) // false
// ок
console.log(isEmail('[e-mail]')) // true

Пароль

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

• определенная длина или диапазон пароля, т.е. ограничение минимального ИЛИ минимального и максимального количества символов
• минимум одна большая буква
• минимум одна маленькая буква
• минимум одна цифра
• минимум один спецсимвол

Эти требования можно комбинировать. Переведем их на язык регулярных выражений:

{8,}                        // от 8 символов
{8,20}                      // от 8 до 20 символов
(?=.*\d)                    // минимум одна цифра
(?=.*[a-z])                 // минимум одна буква в нижнем регистре
(?=.*[A-Z])                 // минимум одна буква в верхнем регистре
(?=.*[-#!$@%^&*_+~=:;?\/])  // минимум один символ из набора

Функция:

const password =
  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-#!$@%^&*_+~=:;?\/])[-\w#!$@%^&*+~=:;?\/]{8,}$/

const isPassword = (str) => password.test(str)

// буквы в верхнем и нижнем регистре
console.log(isPassword('Password')) // false
// + число
console.log(isPassword('Passw0rd')) // false
// + спецсимвол, но недостаточная длина
console.log(isPassword('Pas_w0r')) // false
// ok
console.log(isPassword('Pas$_W0rd')) // true

Не забывайте модифицировать [-\w#!$@%^&*+~=:;?\/] при добавлении/удалении групп.

Номер карты

Напоследок, рассмотрим один интересный алгоритм — алгоритм Луна, который используется для вычисления контрольной цифры номера пластиковой карты в соответствии со стандартом ISO/IEC 7812 с целью ее (номера) валидации.

В упрощенном виде этот алгорит включает следующие шаги:

1. Цифры проверяемой последовательности нумеруются справа налево.
2. Цифры, оказавшиеся на нечетных местах, остаются без изменений.
3. Цифры, стоящие на четных местах, умножаются на 2.

Обратите внимание: речь идет не о "четности" числа, а о четности его позиции в строке.

1. Если в результате такого умножения возникает число больше 9, оно заменяется суммой цифр получившегося произведения — однозначным числом, то есть цифрой.
2. Все полученные в результате преобразования цифры складываются. Если сумма кратна 10, то исходные данные верны.

Реализация алгоритма из Википедии:

function luhnAlgorithm(value) {
  value = value.replace(/\D/g, '')

  // контрольная сумма
  let nCheck = 0
  // индикатор "четности" позиции числа
  let bEven = false

  // перебираем числа в обратном порядке
  for (let n = value.length - 1; n >= 0; n--) {
    // извлекаем число из строки
    // позиция первого извлеченного числа является нечетной
    let nDigit = parseInt(value.charAt(n), 10)

    // если позиция числа четная и при умножении на 2 число становится больше 9,
    // вычитаем из числа 9
    // результат будет таким же, как при сложении цифр, из которых состоит число
    // например, `6 * 2 = 12`, `1 + 2 = 3` и `12 - 9 = 3`
    if (bEven && (nDigit *= 2) > 9) {
      nDigit -= 9
    }

    // прибавляем число к сумме
    nCheck += nDigit
    // инвертируем индикатор
    bEven = !bEven
  }

  // если контрольная сумма делится на 10 без остатка,
  // значит, номер карты является валидным
  return nCheck % 10 == 0
}

validator.js предлагает такой вариант рассматриваемого алгоритма:

const creditCard =
  /^(?:4[0-9]{12}(?:[0-9]{3,6})?|5[1-5][0-9]{14}|(222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12,15}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11}|6[27][0-9]{14})$/

function isCreditCard(str) {
  const sanitized = str.replace(/[- ]+/g, '')
  if (!creditCard.test(sanitized)) {
    return false
  }
  let sum = 0
  let digit
  let tmpNum
  let shouldDouble
  for (let i = sanitized.length - 1; i >= 0; i--) {
    digit = sanitized.substring(i, i + 1)
    tmpNum = parseInt(digit, 10)
    if (shouldDouble) {
      tmpNum *= 2
      if (tmpNum >= 10) {
        sum += (tmpNum % 10) + 1
      } else {
        sum += tmpNum
      }
    } else {
      sum += tmpNum
    }
    shouldDouble = !shouldDouble
  }
  return !!(sum % 10 === 0 ? sanitized : false)
}

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

// функция принимает строку
const isCreditCard = (str) =>
  // строка не должна быть пустой
  // можно воспользоваться нашей функцией `!isEmpty()` или
  str.trim().length !== 0 &&
  str
    // удаляем из строки все НЕ числа
    .replace(/\D/g, '')
    // преобразуем строку в массив
    .split('')
    // меняем порядок следования элементов массива на противоположный
    .reverse()
    // s - контрольная сумма
    // c - текущий символ строки, начиная с последнего
    // i - индекс элемента
    .reduce(
      (s, c, i) =>
        (s +=
          // если индекс элемента - нечетное число (1, 3 и т.д.),
          // значит, число находится на четной позиции, умножаем его на 2
          // если при этом число становится больше 9, вычитаем из него 9
          // преобразуем результат в число с помощью `+`
          +(i % 2 !== 0 && (c *= 2) > 9 ? (c -= 9) : c)),
      0) // начальная контрольная сумма
    // если контрольная сумма делится на 10 без остатка,
    // значит, номер карты является валидным
    % 10 === 0

console.log(isCreditCard('1234 5678 9009 8765')) // false
console.log(isCreditCard('5555 5555 5555 4444')) // true

Как видите, регулярные выражения — тема, конечно, сложная, но довольно интересная и чрезвычайно полезная. Редкий проект обходится без необходимости очистки или валидации данных, вводимых пользователем и (в меньшей степени, но все же) "прилетающих" с сервера. Владение языком регулярных выражений существенно облегчает решение многих задач, возникающих в веб-разработке.

Обратите внимание: регулярные выражения предоставляют широкий простор для творчества, поэтому приведенные в статье паттерны можно реализовать совершенно по-разному, главный вопрос в том, решает ли регулярное выражение поставленную перед ней задачу и насколько хорошо она это делает, т.е. насколько регулярка является надежной и как сильно ее использование влияет на производительность (часто это влияние оказывается критичным даже в случае с простыми шаблонами).

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

const isEmpty = (str) => !str.trim().length

const isBoolean = (str) => ['true', 'false', '1', '0'].indexOf(str) > -1

const isAlpha = /^[A-ZА-ЯЁ]+$/i.test(str)

const isAlphaNumeric = (str) => /^[0-9A-ZА-ЯЁ]+$/i.test(str)

const numeric = (delimiter = '.') =>
  new RegExp(`^[+-]?([0-9]*\\${delimiter})?[0-9]+$`)
const isNumeric = (str, delimiter) => numeric(delimiter).test(str)

const isPostalCode = (str) => /^\d{6}$/.test(str)

const isPassportNumber = (str) => /^\d{10}$/.test(str)

const isMobilePhone = (str) => /^(\+?7|8)?9\d{9}$/.test(str)

const isURL = (str) => /https?:\/\/(www\.)?[-\w@:%\.\+~#=]{1,256}\.[a-z0-9()]{1,6}\b([-\w()@:%\.\+~#=//?&]*)/i.test(str)

const isEmail = (str) => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-z\-0-9]+\.)+[a-z]{2,}))$/i.test(str)

const isStrongPassword = (str) => /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[-#!$@%^&*_+~=:;?\/])[-\w#!$@%^&*+~=:;?\/]{8,}$/.test(str)

const isCreditCard = (str) =>
  str.trim().length !== 0 &&
  str
    .replace(/\D/g, '')
    .split('')
    .reverse()
    .reduce((s, c, i) =>
      (s += +(i % 2 !== 0 && (c *= 2) > 9 ? (c -= 9) : c)), 0) % 10 === 0

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

---

Купить VPS-хостинг с быстрыми NVMе-дисками и посуточной оплатой у хостинга Маклауд.