Как проверить, является ли строка правильным URL-адресом в JavaScript?
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.
