Продвижение в интернете |
Окт 18, 2022

Как проверить, является ли строка правильным URL-адресом в JavaScript?

URL–адрес или унифицированный указатель ресурсов — это текст, используемый для идентификации ресурсов, таких как веб-страницы, изображения и видео в сети Интернет.

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

В данной статье мы рассмотрим несколько способов в JavaScript проверить, является ли строка правильным URL-адресом.

Способ №1: Регулярные выражения

Регулярные выражения (regex) — это шаблоны, которые соответствуют комбинациям символов в строке. В JavaScript регулярные выражения также известны как объекты, которые предоставляют различные методы для выполнения различных операций.

Регулярное выражение можно создать двумя способами:

  1. С помощью литералов регулярных выражений
  2. С помощью конструкторов регулярных выражений

Рассмотрим каждый.

Как использовать литералы регулярных выражений

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

Шаблон включает в себя проверку частей, обязательных для 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.

Источник