Как получить значение GET-параметра из URL в JavaScript и jQuery

При разработке веб-приложений часто возникает необходимость работать с параметрами URL. Эти параметры могут использоваться для:

• Анализа рекламных меток (например, ?utm_source=google)

• Реализации фильтров в интернет-магазинах (?category=electronics&price=100-500)

• Создания глубоких ссылок с предустановленными значениями (?user_id=123)

• Передачи состояния между страницами

В этой статье мы рассмотрим несколько способов извлечения GET-параметров в JavaScript, включая современные методы и решения для старых браузеров.

1. Использование современного URL API (рекомендуемый способ)

Современные браузеры поддерживают URL API, который предоставляет удобные методы для работы с параметрами:

function getUrlParam(name) {
    try {
        const url = new URL(window.location.href);
        const value = url.searchParams.get(name);
        return value ? decodeURIComponent(value) : null;
    } catch (e) {
        console.error("Error parsing URL:", e);
        return null;
    }
}

// Пример использования
const userId = getUrlParam('user_id');
if (userId) {
    console.log(`Найден пользователь с ID: ${userId}`);
}

Преимущества:

• Чистый и понятный код

• Поддержка URI-декодирования

• Обработка сложных случаев (повторяющиеся параметры, отсутствующие значения)

• Высокая производительность

Особенности:

• Не поддерживается в Internet Explorer

• Возвращает null, если параметр не найден

• Автоматически декодирует значения (например, %20 преобразуется в пробел)

2. Решение с регулярными выражениями (для старых браузеров)

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

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

// Пример использования в jQuery
$.urlParam = function(name) {
    return getUrlParamLegacy(name);
};

const category = $.urlParam('category');
if (category) {
    $(`[data-category="${category}"]`).addClass('active');
}

Особенности реализации:

• Обработка пробелов, закодированных как +

• Декодирование URI-компонентов

• Возвращает null для отсутствующих параметров

• Совместимость с IE9+

3. Получение всех параметров URL

Иногда требуется получить все параметры сразу в виде объекта:

function getAllUrlParams() {
    try {
        const url = new URL(window.location.href);
        const params = {};
        
        url.searchParams.forEach((value, key) => {
            params[key] = decodeURIComponent(value);
        });
        
        return params;
    } catch (e) {
        console.error("Error parsing URL:", e);
        return {};
    }
}

// Пример использования
const params = getAllUrlParams();
if (params.filter) {
    applyFilter(params.filter);
}

4. Обработка особых случаев

При работе с URL-параметрами стоит учитывать несколько важных моментов:

1. Параметры без значений
   Для URL вида ?param1&param2=value:

   • getUrlParam('param1') вернет пустую строку

   • getUrlParam('param2') вернет "value"

2. Множественные параметры
   Для ?color=red&color=blue используйте:

   const colors = url.searchParams.getAll('color');
   // вернет ['red', 'blue']

   
   

3. Хэш-параметры
   Некоторые SPA-приложения хранят параметры в хэше (#?param=value). Для их обработки:

   javascript
   
   
   Copy
   
   
   Download
   
   
   
   
   
   

   function getHashParam(name) {
       const hash = window.location.hash.substring(1);
       const url = new URL(hash, window.location.origin);
       const value = url.searchParams.get(name);
       return value ? decodeURIComponent(value) : null;
   }

   
   

5. Практическое применение

Рассмотрим реальный пример использования в интернет-магазине:

// При загрузке страницы применяем фильтры из URL
document.addEventListener('DOMContentLoaded', function() {
    const params = getAllUrlParams();
    
    // Применяем фильтр категории
    if (params.category) {
        const categoryElement = document.querySelector(`.filter[data-value="${params.category}"]`);
        if (categoryElement) categoryElement.click();
    }
    
    // Применяем фильтр цены
    if (params.min_price || params.max_price) {
        const min = parseFloat(params.min_price) || 0;
        const max = parseFloat(params.max_price) || Infinity;
        applyPriceFilter(min, max);
    }
});

// При изменении фильтров обновляем URL
function updateUrlFilters() {
    const url = new URL(window.location.href);
    const params = url.searchParams;
    
    // Очищаем текущие параметры фильтров
    ['category', 'min_price', 'max_price'].forEach(param => {
        params.delete(param);
    });
    
    // Добавляем новые значения
    if (selectedCategory) {
        params.set('category', selectedCategory);
    }
    
    if (priceRange.min > 0) {
        params.set('min_price', priceRange.min);
    }
    
    if (priceRange.max < Infinity) {
        params.set('max_price', priceRange.max);
    }
    
    // Обновляем URL без перезагрузки страницы
    window.history.pushState({}, '', url);
}

6. Вопросы безопасности

При работе с URL-параметрами важно помнить о безопасности:

1. Всегда проверяйте и санируйте входные данные
   Не вставляйте параметры напрямую в HTML или SQL-запросы.

2. Используйте decodeURIComponent
   Это предотвращает XSS-атаки через закодированные символы.

3. Ограничивайте длину параметров
   Длинные параметры могут использоваться для атак типа DoS.

Заключение

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

Ключевые рекомендации:

1. Всегда декодируйте параметры с помощью decodeURIComponent

2. Возвращайте null для отсутствующих параметров (а не 0 или undefined)

3. Обрабатывайте особые случаи (множественные параметры, хэш-параметры)

4. Следите за безопасностью при работе с параметрами

Приведенные в статье функции готовы к использованию в production-среде и покрывают большинство практических сценариев работы с URL-параметрами.