Если вам когда-нибудь приходилось проверять поле ввода, которое соответствует определенному шаблону, и вы обнаруживаете, что используете кучу операторов if для решения проблемы, вы бы заметили, что в какой-то момент это может стать довольно трудоемким для написания и несколько неэффективно.
Рассмотрим следующий пример, который проверяет номер телефона из поля ввода, предоставленного пользователем.
Ниже приведен пример действующего номера телефона.
07036005659 +234 70 3600 5659.
Из введенных данных мы можем это сделать.
- Действительный номер телефона начинается с +234 или 0.
- После первого совпадения есть 10 цифр.
- Действительный номер телефона не может содержать буквы или специальные символы.
Давайте попробуем использовать трудоемкие способы проверки вводимых данных в виде строк.
NB: Вышеупомянутую функцию можно было бы еще больше упростить, но она все равно будет неадекватной по сравнению с фактическим использованием регулярных выражений.
И мы вызываем эту функцию, передавая соответствующий ввод, чтобы проверить, есть ли у нас действительный номер телефона или нет.
const isValid = validatePhoneNumber("+23470360086590");
console.log(isValid) // valid phone number
Or
const isValid = validatePhoneNumber("070360086590");
console.log(isValid) // valid phone number
К счастью для нас, в Javascript есть встроенный объект, который может помочь в сопоставлении с образцом любого типа. Это называется регулярным выражением, а также регулярным выражением или регулярным выражением. Иногда это рассматривается как что-то мистическое или из темных искусств, и поэтому не расстраивайтесь, если вам еще не комфортно писать свое, надеюсь, к концу этой статьи ваш аппетит будет достаточно влажным, чтобы вы начали ваш способ понимания и написания регулярных выражений вместо обычного копирования и вставки из StackOverflow. 😏
Есть 2 основных способа определения объекта регулярного выражения в javascript.
- Литерал регулярного выражения: / expression / flags;
- Функция конструктора: новое регулярное выражение («выражение», «флаги»);
Лучше всего использовать регулярное выражение Literal, поскольку оно оптимизировано для повышения производительности, за исключением случаев, когда регулярное выражение вводится пользователем, тогда следует использовать функцию конструктора.
Давайте решим нашу проблему с телефонными номерами, используя подход регулярных выражений.
Во-первых, наш номер телефона должен начинаться с 0 0r +234.
let pattern = /0/; const input1 = "07036005659"; const input2 = "+2347036005659";
Для использования с шаблоном регулярного выражения доступно несколько методов: test, search, match, matchAll, exec, replace и split.
В этом руководстве мы будем использовать как метод сопоставления класса String, так и метод тестирования объекта регулярного выражения.
Давайте запустим метод сопоставления с нашим вводом и нашим шаблоном.
input1.match(pattern); returns [“0”, index: 0, input: “07036005659”, groups: undefined]; input2.match(pattern); returns [“0”, index: 5, input: “+2347036005659”, groups: undefined]
У нас есть совпадение, потому что наше регулярное выражение находит вхождение 0 в любой части строки в случае, если input1 был найден по первому индексу, а в input2 он был найден по 5-му индексу.
Нам нужен способ убедиться, что он ищет 0 только в начале строки.
Давайте обновим нашу переменную шаблона, чтобы она соответствовала только числу, которое начинается с 0;
Каретка ^ вне группы символов используется для обозначения того, что следующее за ним выражение должно начинать ввод, который нужно сопоставить.
Вот как это выглядит в коде.
pattern = /^0/; running against the match method yields. input1.match(pattern);returns [“0”, index: 0, input: “07036005659”, groups: undefined] input2.match(pattern); returns null
Теперь мы можем успешно сопоставить число, которое начинается с 0, но допустимый ввод числа может начинаться либо с 0, либо с +234 .
| Символ (ИЛИ) используется для соответствия выражению до ИЛИ после него.
Давайте обновим наше регулярное выражение, чтобы отразить это изменение.
pattern = /^0|+234/; VM35303:1 Uncaught SyntaxError: Invalid regular expression: /^0|+234/: Nothing to repeat at <anonymous>:1:1
При попытке сохранить наше регулярное выражение мы получаем ошибку, потому что символ + является специальным символом, который используется для обозначения одного или нескольких вхождений предыдущего, но предыдущий символ является также специальный символ, поэтому он не может быть сопоставлен, кроме как экранированный. Чтобы сопоставить любой специальный символ, нужно экранировать его с помощью символа \.
Обновление нашего регулярного выражения выглядит следующим образом.
pattern = /^0|\+234/;
Тестирование наших входных данных по нашему обновленному шаблону возвращает.
input1.match(pattern); [“0”, index: 0, input: “07036005659”, groups: undefined] input2.match(pattern); [“+234”, index: 0, input: “+2347036005659”, groups: undefined]
Теперь нам удалось сопоставить начало телефонного номера, который начинается с 0 или +234.
После первого совпадения осталось еще 10 цифр.
Чтобы сопоставить цифры, мы помещаем все возможные комбинации ожидаемой цифры, которая будет 0123456789, или мы используем символьную группу цифр [0–9].
Давайте обновим наш шаблон, чтобы отразить это новое изменение, которое мы хотели бы внести.
pattern = /^0|\+234[0–9]/; input2.match(pattern); [“+2347”, index: 0, input: “+2347036005659”, groups: undefined] input1.match(pattern); [“0”, index: 0, input: “07036005659”, groups: undefined]
Из результатов, возвращенных выше, мы можем сделать вывод, что для
Input1 возвращает только первую цифру, это связано с тем, что он соответствует только первой цифре остальной части выражения, поэтому нам нужно указать ему, чтобы он соответствовал этой и остальной части выражения, мы делаем это, заключая аргументы ИЛИ в | символ в скобках;
Следовательно, наш узор теперь выглядит так.
Pattern = /(^0|\+234)[0–9]/;
Input2 у нас есть +2347, возвращенное в качестве совпадения, то есть оно добавляет только «7» к уже существующему совпадению, а не 10 цифр после выражения, это потому, что регулярное выражение по умолчанию являются ленивым сопоставителем, то есть он делает наименьшее возможное совпадение, поэтому мы должны сказать ему, что мы хотим, чтобы он совпадал ровно через 10 цифр после начального совпадения.
Мы делаем это, добавляя {n} после предыдущего выражения, которое мы хотим сопоставить n раз.
Следовательно, наш паттерн теперь выглядит так:
Pattern = /(^0|\+234)[0–9]{10}/;
input1.match(pattern);
(2) [“07036005659”, “0”, index: 0, input: “07036005659”, groups: undefined]
input2.match(pattern);
(2) [“+2347036005659”, “+234”, index: 0, input: “+2347036005659”, groups: undefined]
Ура, похоже, мы наконец достигли соответствия телефонному номеру, но для чего-то другого.
Давайте проверим наш шаблон на входах, длина которых превышает 10 цифр после первоначального совпадения.
const input3 = "+234703600565910"; const input4 = "0703600565911"; input3.match(pattern); (2) [“+2347036005659”, “+234”, index: 0, input: “+234703600565910”, groups: undefined] input4.match(pattern); (2) [“07036005659”, “0”, index: 0, input: “0703600565911”, groups: undefined]
Мы можем видеть, что он по-прежнему совпадает, даже если длина превышает 10 цифр после начального совпадения, но он возвращает правильные результаты и отбрасывает посторонний ввод.
Нам нужно изменить наш шаблон так, чтобы любой ввод, длина которого после начального совпадения превышает 10 цифр, считался недопустимым.
Мы используем специальный символ $ в конце шаблона, чтобы обозначить, что совпадение должно закончиться точно после предыдущего счета.
при использовании после строки символ $ означает, что сопоставляемая строка должна заканчиваться предыдущим символом.
Наш новый паттерн:
pattern = /^(0|\+234)\d{10}$/;
Тестирование этого нового паттерна на всех 4 исходных данных дает результаты.
input1.match(pattern); (2) [“07036005659”, “0”, index: 0, input: “07036005659”, groups: undefined] input2.match(pattern); (2) [“+2347036005659”, “+234”, index: 0, input: “+2347036005659”, groups: undefined] input3.match(pattern); null input4.match(pattern); null
Итак, у нас есть действительный шаблон, который соответствует действительному номеру телефона и в противном случае возвращает ноль.
\ d - это сокращенный синтаксис для представления [0–9];
для дальнейшего чтения ознакомьтесь со следующими ссылками.
