5 способов получить URL в JavaScript и jQuery: проверенные методы

Для кого эта статья:

• Веб-разработчики, включая новичков и более опытных специалистов
• Студенты и обучающиеся по программированию и веб-разработке

• Специалисты, интересующиеся улучшением навыков работы с URL в JavaScript и jQuery

  Когда работаешь с веб-приложениями, постоянно сталкиваешься с необходимостью получить текущий URL — для отправки аналитики, перенаправления пользователя или динамической настройки поведения страницы. Знание пяти различных способов получения URL в JavaScript и jQuery — не просто полезный навык, а настоящая суперсила для разработчика. Давайте рассмотрим самые эффективные методы, которые станут надёжным инструментом в вашем арсенале, даже если вы только начинаете свой путь в веб-разработке. 💡

Прежде чем углубиться в различные методы получения URL, стоит задуматься о вашей квалификации в целом. На курсе Обучение веб-разработке от Skypro вы не только освоите работу с URL и другими основами JavaScript, но и построите полноценную карьеру в IT. Студенты получают поддержку ментора, практикуются на реальных проектах и гарантированно трудоустраиваются уже через 8 месяцев обучения. Начните свой путь к профессии прямо сейчас!

Полный и частичный URL с помощью window.location

Объект window.location — это нативный метод JavaScript, предоставляющий доступ к текущему URL страницы и всем его компонентам. Он работает во всех современных браузерах без необходимости подключения дополнительных библиотек.

Для получения полного URL страницы используется свойство href:

const currentUrl = window.location.href;
console.log(currentUrl); // Выведет https://example.com/page?param=value#section

Но часто требуется получить только отдельные части URL. Вот полный список доступных свойств объекта window.location:

Дмитрий Савельев, Senior Frontend Developer

В одном из проектов для крупного интернет-магазина мы столкнулись с проблемой: сервер аналитики требовал передачи URL без параметров, но с сохранением информации о домене и пути. Задача выглядела простой, но сложность была в том, что некоторые части команды использовали jQuery, а некоторые — чистый JavaScript.

Решением стало использование window.location:

const cleanUrl = window.location.origin + window.location.pathname;

Это позволило получить URL вида "https://example.com/products/category" вместо полного "https://example.com/products/category?sort=price&filter=new#top". Что удивительно, некоторые разработчики пытались решить эту задачу сложными регулярными выражениями, хотя встроенный объект location предоставляет все необходимые инструменты.

Для практического применения можно использовать следующие примеры:

• Получение базового URL сайта: const baseUrl = window.location.origin;
• Получение текущего пути: const currentPath = window.location.pathname;
• Определение протокола: const isHttps = window.location.protocol === 'https:';
• Получение домена: const domain = window.location.hostname;

Важно понимать, что window.location — это не просто объект для чтения, но и инструмент для изменения URL. Например, присваивание значения свойству href перенаправит пользователя на новый адрес:

window.location.href = 'https://example.com/new-page';

Этот метод универсален и работает независимо от используемых фреймворков, что делает его предпочтительным выбором для большинства случаев. 🚀

Получение адреса страницы через jQuery ($.attr)

Если в вашем проекте уже используется jQuery, логично воспользоваться его методами для работы с URL. Библиотека предлагает несколько элегантных решений для получения адреса текущей страницы.

Самый распространенный способ в jQuery — использование метода attr() для получения значения атрибута href у элемента с селектором location:

const currentUrl = $(location).attr('href');
console.log(currentUrl); // Выведет https://example.com/page?param=value#section

Альтернативные варианты с использованием jQuery:

// Вариант 1: прямой доступ к свойству prop
const url1 = $(location).prop('href');

// Вариант 2: использование свойства document.URL через jQuery
const url2 = jQuery(document).prop('URL');

// Вариант 3: непосредственное обращение к объекту window через jQuery
const url3 = jQuery(window).attr('location');
const url4 = jQuery(window).attr('location').href;

Хотя эти методы работают, они фактически являются обертками вокруг стандартных JavaScript-свойств. Поэтому если вам нужны только отдельные части URL, можно комбинировать jQuery с нативными свойствами:

const protocol = $(location).attr('protocol'); // https:
const hostname = $(location).attr('hostname'); // example.com
const pathname = $(location).attr('pathname'); // /page
const search = $(location).attr('search'); // ?param=value
const hash = $(location).attr('hash'); // #section

Сравним производительность jQuery и нативных методов JavaScript при работе с URL:

При использовании jQuery для получения URL следует учитывать следующие моменты:

• jQuery добавляет избыточный слой абстракции, что может незначительно снижать производительность
• Необходимость подключения всей библиотеки jQuery (если она не используется для других целей)
• Синтаксис может быть более знакомым для разработчиков, привыкших к jQuery
• Удобство при интеграции в существующий jQuery-код

Если проект уже использует jQuery и вы активно применяете эту библиотеку для других задач, метод $(location).attr('href') является удобным способом получения URL. Однако для новых проектов предпочтительнее использовать нативные методы JavaScript. 🔍

Извлечение параметров запроса из текущего URL

Одной из наиболее часто встречающихся задач при работе с URL является извлечение и обработка параметров запроса (query parameters). Эти параметры находятся после знака вопроса в URL и имеют формат key=value, разделенные амперсандами (&).

В современном JavaScript для этой задачи идеально подходит класс URLSearchParams:

// Для URL https://example.com/search?query=javascript&sort=relevance&page=2
const queryString = window.location.search; // ?query=javascript&sort=relevance&page=2
const searchParams = new URLSearchParams(queryString);

// Получение отдельных параметров
const query = searchParams.get('query'); // javascript
const sort = searchParams.get('sort'); // relevance
const page = searchParams.get('page'); // 2

// Проверка наличия параметра
const hasFilter = searchParams.has('filter'); // false

// Получение всех значений для параметра (если параметр может встречаться несколько раз)
const tags = searchParams.getAll('tag'); // Вернёт массив всех значений параметра 'tag'

Для jQuery-разработчиков существует похожий, но более специфичный для этой библиотеки подход:

// Функция для получения параметров запроса с использованием jQuery
$.urlParam = function(name) {
const results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results ? decodeURIComponent(results[1]) : null;
}

// Использование
const query = $.urlParam('query'); // javascript
const sort = $.urlParam('sort'); // relevance
const page = $.urlParam('page'); // 2

Алексей Петров, Frontend Team Lead

В проекте для образовательной платформы мы реализовывали систему фильтрации курсов. Пользователи могли выбирать категорию, уровень сложности и другие параметры, а система должна была сохранять эти настройки в URL, чтобы их можно было отправить другим пользователям.

Изначально мы использовали сложный парсинг URL с помощью регулярных выражений:

function getParameterByName(name) {
const url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Но когда один из разработчиков показал нам URLSearchParams, это стало откровением. Весь код парсинга сократился до нескольких строк, а скорость работы заметно увеличилась. Более того, мы смогли легко реализовать функцию обновления URL при изменении фильтров:

function updateUrlParameter(key, value) {
const searchParams = new URLSearchParams(window.location.search);
searchParams.set(key, value);
const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
}

Если вам нужно получить все параметры сразу в виде объекта, можно использовать следующую функцию:

function getQueryParameters() {
const params = {};
const searchParams = new URLSearchParams(window.location.search);
for (const [key, value] of searchParams) {
params[key] = value;
}
return params;
}

// Использование
const allParams = getQueryParameters();
console.log(allParams); // { query: 'javascript', sort: 'relevance', page: '2' }

Для случаев, когда требуется обратная совместимость со старыми браузерами, можно использовать функцию на чистом JavaScript:

function getQueryParam(param) {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
return urlParams.get(param);
}

// Альтернатива для старых браузеров
function getQueryParamLegacy(param) {
const search = window.location.search.substring(1); // Удаляем "?"
const params = search.split('&');

for (let i = 0; i < params.length; i++) {
const pair = params[i].split('=');
if (decodeURIComponent(pair[0]) === param) {
return decodeURIComponent(pair[1] || '');
}
}
return null;
}

Работа с параметрами запроса — это базовый навык для разработчика, особенно при создании интерактивных одностраничных приложений (SPA), где состояние интерфейса часто отражается в URL. Правильное использование инструментов для извлечения параметров запроса делает код более чистым и поддерживаемым. ⚙️

Работа с хешем и фрагментами URL в JavaScript

Хеш (или фрагментный идентификатор) — это часть URL, которая следует за символом решетки (#) и указывает на определенный раздел внутри страницы. В одностраничных приложениях (SPA) хеш часто используется для внутренней маршрутизации без перезагрузки страницы.

Получить хеш в JavaScript можно несколькими способами:

// Нативный JavaScript
const hash = window.location.hash; // Вернёт "#section" для URL https://example.com/page#section

// jQuery вариант
const hashJquery = $(location).attr('hash');

При работе с хешем часто требуется удалить начальный символ # для дальнейшей обработки:

// Получение чистого значения хеша без символа #
const cleanHash = window.location.hash.substring(1); // "section"

// Или с использованием slice
const cleanHashSlice = window.location.hash.slice(1); // "section"

Для отслеживания изменений хеша (например, при навигации в SPA) используется событие hashchange:

// Отслеживание изменений хеша
window.addEventListener('hashchange', function() {
console.log('Hash changed to: ' + window.location.hash);
// Здесь может быть код для обновления содержимого страницы
});

// Эквивалент на jQuery
$(window).on('hashchange', function() {
console.log('Hash changed to: ' + window.location.hash);
});

Хеши особенно полезны для создания закладок на определенные разделы страницы или состояния интерфейса. Вот несколько практических примеров использования:

• Навигация по вкладкам без перезагрузки страницы
• Сохранение позиции прокрутки в длинных статьях
• Реализация простой маршрутизации в SPA
• Отслеживание шагов в многоэтапных формах
• Переход к определенному комментарию или разделу на странице

Программное изменение хеша также очень просто:

// Установка нового хеша (не вызывает перезагрузку страницы)
window.location.hash = 'new-section';

// Изменение хеша с использованием History API (более современный подход)
history.pushState(null, null, '#another-section');

При работе с SPA использование History API часто предпочтительнее, так как оно позволяет управлять историей браузера более гибко:

// Добавление нового состояния в историю браузера
history.pushState({page: 3}, "Title 3", "#section3");

// Замена текущего состояния в истории браузера
history.replaceState({page: 3}, "Title 3", "#section3");

Различия между pushState и просто изменением window.location.hash:

При использовании History API необходимо помнить, что событие popstate срабатывает только при навигации (нажатие кнопок "Вперед" и "Назад"), но не при вызовах pushState или replaceState:

// Обработка навигации по истории
window.addEventListener('popstate', function(event) {
console.log('navigated to: ' + document.location.hash);
// Обновление UI на основе нового хеша
});

Работа с хешем и фрагментами URL — важный навык для создания интерактивных веб-приложений с глубокой навигацией и возможностью создания закладок на конкретные состояния интерфейса. 🔖

Создание функций-хелперов для частых операций с URL

Для упрощения работы с URL в проектах полезно создать набор функций-хелперов, которые будут выполнять часто встречающиеся операции. Такой подход не только делает код чище, но и обеспечивает консистентность в обработке URL по всему проекту.

Вот набор практичных хелперов, которые можно включить в свою библиотеку утилит:

// Универсальный объект с URL-утилитами
const URLUtils = {
// Получение полного URL текущей страницы
getCurrentUrl: function() {
return window.location.href;
},

// Получение базового URL (протокол + домен)
getBaseUrl: function() {
return window.location.origin;
},

// Получение пути (pathname)
getPath: function() {
return window.location.pathname;
},

// Получение значения параметра запроса
getQueryParam: function(param) {
const searchParams = new URLSearchParams(window.location.search);
return searchParams.get(param);
},

// Получение всех параметров запроса в виде объекта
getAllQueryParams: function() {
const params = {};
const searchParams = new URLSearchParams(window.location.search);
for (const [key, value] of searchParams) {
params[key] = value;
}
return params;
},

// Получение хеша без символа #
getHashValue: function() {
return window.location.hash.substring(1);
},

// Добавление или обновление параметра запроса без перезагрузки страницы
updateQueryParam: function(key, value) {
const searchParams = new URLSearchParams(window.location.search);
searchParams.set(key, value);
const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
return newRelativePathQuery;
},

// Удаление параметра запроса без перезагрузки страницы
removeQueryParam: function(key) {
const searchParams = new URLSearchParams(window.location.search);
searchParams.delete(key);
const newRelativePathQuery = window.location.pathname + 
(searchParams.toString() ? '?' + searchParams.toString() : '');
history.pushState(null, '', newRelativePathQuery);
return newRelativePathQuery;
},

// Проверка, содержит ли URL указанный параметр
hasQueryParam: function(param) {
const searchParams = new URLSearchParams(window.location.search);
return searchParams.has(param);
},

// Получение последнего сегмента пути
getLastPathSegment: function() {
const path = window.location.pathname;
return path.substring(path.lastIndexOf('/') + 1);
}
};

Использование этих хелперов делает код намного чище:

// Вместо этого
const productId = new URLSearchParams(window.location.search).get('productId');
if (productId) {
// делаем что-то с productId
}

// Можно написать так
const productId = URLUtils.getQueryParam('productId');
if (productId) {
// делаем что-то с productId
}

Для jQuery-проектов можно создать плагин, расширяющий возможности библиотеки:

// jQuery плагин для работы с URL
$.extend({
urlParam: function(name) {
const results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
return results ? decodeURIComponent(results[1]) : null;
},

getAllUrlParams: function() {
const params = {};
const search = window.location.search.substring(1); // Удаляем "?"
if (!search) return params;

const paramPairs = search.split('&');
for (let i = 0; i < paramPairs.length; i++) {
const pair = paramPairs[i].split('=');
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
}
return params;
}
});

// Использование
const productId = $.urlParam('productId');
const allParams = $.getAllUrlParams();

Еще один полезный хелпер — построитель URL, который упрощает создание сложных URL с параметрами:

// Конструктор URL с параметрами
function buildUrl(baseUrl, params = {}) {
const url = new URL(baseUrl);
Object.keys(params).forEach(key => {
url.searchParams.append(key, params[key]);
});
return url.toString();
}

// Использование
const apiUrl = buildUrl('https://api.example.com/products', {
category: 'electronics',
sort: 'price',
order: 'asc',
page: 2
});
// Результат: https://api.example.com/products?category=electronics&sort=price&order=asc&page=2

При создании собственной библиотеки URL-утилит важно учитывать следующие моменты:

• Обеспечьте консистентное поведение функций во всех поддерживаемых браузерах
• Добавьте обработку ошибок и проверку параметров
• Документируйте каждую функцию, указывая её назначение, параметры и возвращаемые значения
• Используйте современные API (например, URL и URLSearchParams), но при необходимости добавьте полифиллы для поддержки старых браузеров
• Создавайте функции с одной ответственностью, следуя принципу Single Responsibility

Организация кода с использованием функций-хелперов не только упрощает разработку, но и делает код более поддерживаемым, тестируемым и понятным для других членов команды. 🛠️

Владение различными методами получения и манипуляции с URL в JavaScript и jQuery — это основа эффективной веб-разработки. От простого window.location.href до создания собственной библиотеки URL-утилит, каждый подход имеет свои преимущества в зависимости от контекста проекта. Помните: выбор правильного инструмента для конкретной задачи зачастую важнее, чем слепое следование трендам. Начните с освоения базовых методов, а затем постепенно расширяйте свой арсенал, добавляя более продвинутые техники по мере необходимости.