Как получить url текущей страницы на JavaScript

Рассмотрим как получить URL текущей страницы в JS целиком, а также по отдельности — протокол, доменное имя сайта, GET параметры и значение после решётки (хеша). Полная информация об адресе содержится в объекте «document.location». Доступ к отдельным элементам получаем через его свойства.

Разберём адрес: https://realadmin.ru/saytostroy/?page=4#top

Получение значений GET параметров

Javascript предоставляет специальный объект для работы с GET параметрами. С его помощью можно проверить существование параметра по названию и получить значение.

Для примера возьмем адрес:

https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc

Извлечём значения «page» и «sortby»:

var paramsString = document.location.search; // ?page=4&limit=10&sortby=desc  
var searchParams = new URLSearchParams(paramsString);
    
searchParams.get("page"); // 4
searchParams.get("sortby"); // desc

URLSearchParams — объект не доступен в устаревших версиях браузеров, например во всех версиях IE.

Для проверки существования параметров, воспользуйтесь методом «has».

searchParams.has("limit"); // true
searchParams.has("sortby"); // true
searchParams.has("orderby"); // false

Для перебора всех пар ключ/значение используем метод «entries».

for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

Результат:

• page 4
• limit 10
• sortby desc

Разбор URL из строки

Кроме всех вышеприведённых примеров, можно воспользоваться объектом URL.

var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');

Интересно, что этот объект содержит свойство «searchParams» типа «URLSearchParams», который можно использовать для извлечения GET параметров.

var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');

if (addr.searchParams.has('limit')) {
    let limit = addr.searchParams.get('limit'); // 10
}