Извлечение параметра из URL с помощью jQuery и JavaScript

Быстрый ответ

Для получения параметров из строки запроса используйте встроенный в браузер API URLSearchParams:

let params = new URLSearchParams(window.location.search);
let myParam = params.get('myParam'); // Замените 'myParam' именем требующегося параметра

Данная процедура позволяет получать параметры без привлечения дополнительных библиотек.

Работа с несколькими параметрами

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

const params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
    console.log(key, value); // Выводит ключи и соответствующие им значения каждого параметра
});

Итерация по параметрам позволяет более удобно обрабатывать и непосредственно использовать их в вашем коде на jQuery.

Декодирование специальных символов

Для обработки параметров, содержащих пробелы или специальные символы, используйте функцию decodeURIComponent:

let myParam = decodeURIComponent(params.get('myParam'));

Декодированная функция возвращает информативные значения параметров, которые могут быть непосредственно использованы в вашем коде.

Синхронизация параметров строки запроса с интерфейсом пользователя

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

let scrollToDiv = params.get('targetDiv');
if (scrollToDiv) {
    $('html, body').animate({ scrollTop: $('#' + scrollToDiv).offset().top }, 'slow');
}

Скрипт плавно прокручивает страницу к блоку, указанному в параметре targetDiv.

Визуализация

Представьте себе вокзал, на котором поезда (💼 URL) доставляют пассажиров (🔑 параметры запроса) с билетами (📄), на которых указана конечная станция (💡 значение):

Прибытие поезда: https://example.com/search?product=widget&color=blue

Пассажиры (Параметры):
  – Билет (Ключ): product 🎟️ Конечная (Значение): widget 💡
  – Билет (Ключ): color 🎟️ Конечная (Значение): blue 💡

Табло с информацией о прибытиях можно сравнить с разобранными парами ключ-значение:

| Ключ      | Конечная (Значение)    |
| --------- | ---------------------- |
| product   | widget                 |
| color     | blue                   |

Здесь jQuery выполняет функцию диспетчера, направляющего каждого пассажира к его назначению:

const params = new URLSearchParams(window.location.search);
const product = params.get('product'); // Передвигается к widget 💡
const color = params.get('color'); // Передвигается к blue 💡

Альтернатива для Internet Explorer

Если Internet Explorer не поддерживает URLSearchParams, используйте альтернативную функцию:

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

Данный метод обеспечивает работу функции извлечения параметров в различных браузерах.

Минимизация зависимостей

Обработка строки запроса не всегда требует сторонних библиотек. Воспользуйтесь предложенными методами, чтобы сделать ваш код ещё более простым и удобным.

Обработка специфических ситуаций

Строки запросов могут содержать сложные структуры и повторяющиеся значения. Для эффективной работы с ними пригодится взаимодействие jQuery и JavaScript.

Преобразование значений к нужному типу

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

let page = parseInt(params.get('page'), 10); // Преобразует 'page' в число

Функция parseInt позволяет обрабатывать параметр и получать значение в нужном формате.

Полезные закладки

1. Документация по API jQuery – непреходящее руководство по работе со строкой запроса.
2. URLSearchParams – Web APIs | MDN – углубленное изучение мощного инструмента для обработки строк запросов URL.
3. Как мне получить параметры строки запроса в JavaScript? – Stack Overflow – Сообщество Stack Overflow делится способами работы со строками запросов без jQuery.
4. Возможно, вы обойдётесь без jQuery – изучите простые альтернативы jQuery.
5. GitHub – chrissrogers/jquery-deparam – удобный плагин jQuery для анализа строк запросов.
6. Ben Alman » jQuery BBQ: Back Button & Query Library – широкомасштабная библиотека для улучшенного управления строками запросов.
7. Получение переменных URL | CSS-Tricks – надёжные подходы к извлечению переменных из URL.