URL–адрес или унифицированный указатель ресурсов - это текст, используемый для идентификации ресурсов, таких как веб-страницы, изображения и видео в сети Интернет.
URL–адрес или унифицированный указатель ресурсов - это текст, используемый для идентификации ресурсов, таких как веб-страницы, изображения и видео в сети Интернет.
URL–адреса состоят из нескольких частей - протокола, имени домена и т. д., которые сообщают браузеру, как и где получить ресурс запрашиваемый ресурс.
В данной статье рассмотрим несколько способов в JavaScript проверить, является ли строка правильным URL-адресом.
Способ №1: Регулярные выражения
Регулярные выражения (regex) - это шаблоны, которые соответствуют комбинациям символов в строке. В JavaScript регулярные выражения также известны как объекты, которые предоставляют различные методы для выполнения различных операций.
Регулярное выражение можно создать двумя способами:
- С помощью литералов регулярных выражений
- С помощью конструкторов регулярных выражений
Рассмотрим каждый.
Как использовать литералы регулярных выражений
В литерале регулярного выражения шаблон заключен между косыми чертами, как на примере ниже.
Шаблон включает в себя проверку частей, обязательных для URL. Например, протокол https, два прямых слэша // и так далее.
const urlPattern = /(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
Как использовать конструктор регулярных выражений
Чтобы создать регулярное выражение с использованием метода-конструктора, используется конструктор класса RegExp() в который передается шаблон регулярного выражения в качестве параметра.
const urlPattern = new RegExp('(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?');
Чтобы продемонстрировать, как проверить, является ли строка a URL, давайте создадим функцию, которая будет осуществлять эту проверку с помощью конструктора регулярного выражения.
const isGoodUrl = urlString => {
// объект регулярного выражения
const urlPattern = new RegExp('^(https?:\\/\\/)?' + // проверка протокола
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // проверка имени домена
'((\\d{1,3}\\.){3}\\d{1,3}))' + // проверка ip адреса (версия 4, не 6)
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // проверка порта и пути
'(\\?[;&a-z\\d%_.~+=-]*)?' + // проверка параметров запроса
'(\\#[-a-z\\d_]*)?$','i'); // проверка хэша
// сама проверка
return !!urlPattern.test(urlString);
}
Теперь протестируем нашу функцию:
let url = "myrusakov";
console.log(isGoodUrl(url)); //false
url = "htt//myrus"; //false
console.log(isGoodUrl(url));
url = "www.myrusakov.com"; //true
console.log(isGoodUrl(url));
url = "https://www.myrusakov.com"; //true
console.log(isGoodUrl(url));
url = "https://www.myrusakov.ru/js-validate-url-part-1.html";
console.log(isGoodUrl(url)); //true
Таким образом вот так, с помощью регулярных выражений можно протестировать URL-адрес на корректность. В следующих статьях рассмотрим другие способы валидации URL-адресов в JavaScript.
