Разбор URL в JavaScript

Конструктор URL

Конструктор URL() — это функция, позволяющая разбирать (парсить) компоненты URL:

const url = new URL(relativeOrAbsolute [, absoluteBase])

Аргумент relativeOrAbsolute может быть абсолютным или относительным URL. Если первый аргумент — относительная ссылка, то второй аргумент, absoluteBase, является обязательным и представляет собой абсолютный URL — основу для первого аргумента.

Например, инициализируем URL() с абсолютным URL:

const url = new URL('http://example.com/path/index.html');

console.log(url.href);  // 'http://example.com/path/index.html'

Теперь скомбинируем относительный и абсолютный URL:

const url = new URL('/path/index.html', 'http://example.com');

console.log(url.href);  // 'http://example.com/path/index.html'

Свойство href экземпляра URL() возвращает переданную URL-строку.

Чтобы обработать текущий адрес достатчно получить свойство location объекта window

const url = window.location;

console.log(url.href);  // 'http://example.com/article/razbor-url-v-javascript'

Строка запроса

Свойство url.search позволяет получить строку запроса URL, начинающуюся с префикса ?:

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
);

console.log(url.search); // '?message=hello&who=world'

Если строка запроса отсутствует, url.search возвращает пустую строку ('')

Вместо получения исходной строки запроса, мы можем получать ее параметры помощью свойства url.searchParams. Значением данного свойства является экземпляр интерфейса URLSeachParams.

Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса (get(param), has(param) и т.д.).

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
);

// или для текущего адреса через интерфейс
let urlParams = new URLSearchParams(window.location.search);

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null

url.searchParams.get('message') возвращает значение параметра message строки запроса.

Доступ к несуществующему параметру url.searchParams.get('missing') возвращает null.

Название хоста

Значением свойства url.hostname является название хоста URL:

const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'

Путь

Свойство url.pathname содержит путь URL:

const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'

Если URL не имеет пути, url.pathname возвращает символ /

Хеш

И наконец, хеш может быть получен через свойство url.hash:

const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'

Если хеш отсутствует, url.hash возвращает пустую строку ('').

Проверка URL

При вызове конструктора new URL() не только создается экземпляр, но также осуществляется проверка переданного URL. Если URL не является валидным, выбрасывается TypeError.

Например, http ://example.com не валидный URL, поскольку после http имеется пробел.

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

Поскольку 'http ://example.com' неправильный URL, как и ожидалось, new URL('http ://example.com') выбрасывает TypeError.

Работа с URL

Такие свойства, как search, hostname, pathname, hash доступны для записи.

Например, давайте изменим название хоста существующего URL с red.com на blue.io:

const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'

Свойства origin, searchParams доступны только для чтения.