Как получить параметры URL с помощью JavaScript

В этой статье мы покажем, как получить параметры URL с помощью JavaScript как анализировать эти параметры и манипулировать ими.

Ключевые моменты:

• Параметры URL, или параметры строки запроса, используются для передачи небольших объемов данных со страницы на страницу или от клиента к серверу через URL. Они могут содержать такую полезную информацию, как поисковые запросы, информация о продукте, предпочтения пользователя, реферальные ссылки и многое другое.
• Интерфейс URLSearchParams в современных браузерах позволяет легко разбирать параметры URL и манипулировать ими, используя такие методы, как get() для возврата первого значения, связанного с заданным параметром поиска, has() для проверки существования определенного параметра и getAll() для возврата всех значений, связанных с определенным параметром.
• Для устаревших браузеров существует полифилл (polyfill), или разработчики могут создать собственную функцию разбора строки запроса, которая принимает строку запроса URL и возвращает данные в формате объекта.
• Важно отметить, что формат параметров URL не является четко определенным и может варьироваться, поэтому разработчикам следует тестировать и корректировать свой код в соответствии с конкретными случаями использования. Если требуется более сложная работа с URL, можно воспользоваться специальными библиотеками, такими как query-string и Medialize URI.js.

Как получить параметры URL

В современных браузерах это стало намного проще благодаря интерфейсу URLSearchParams. Он определяет множество вспомогательных методов для работы со строкой запроса в URL.

Предположим, что наш URL-адрес имеет следующий вид https://example.com/?product=shirt&color=pink&ref=p792&newuser&size=s, мы можем получить строку запроса, используя window.location.search:

const queryString = window.location.search;
console.log(queryString);
//?product=shirt&color=pink&ref=p792&newuser&size=s

Затем мы можем разобрать параметры строки запроса с помощью URLSearchParams:

const urlParams = new URLSearchParams(queryString);

Затем мы можем вызвать любой из его параметров на полученном результате.

Например, URLSearchParams.get() вернет первое значение, связанное с заданным параметром поиска:

const product = urlParams.get('product')
console.log(product);
// shirt

const color = urlParams.get('color')
console.log(color);
// pink

const refLink = urlParams.get('ref')
console.log(refLink);
// p792

const newUser = urlParams.get('newuser')
console.log(newUser);
// получим пустую строку

Другие полезные методы

Проверка наличия параметра

Вы можете использовать URLSearchParams.has(), чтобы проверить, существует ли определенный параметр:

console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false

Получение всех значений конкретного параметра

Вы можете использовать URLSearchParams.getAll(), чтобы вернуть все значения, связанные с определенным параметром:

console.log(urlParams.getAll('size'));
// [ 's' ]

//Программно добавляем параметр для size.
urlParams.append('size', 'xxl');

console.log(urlParams.getAll('size'));
// [ 's', 'xxl' ]

Перебор параметров

URLSearchParams также предоставляет некоторые знакомые методы итератора Object, позволяющие выполнять итерации (перебор) по ключам, значениям и записям:

const
  keys = urlParams.keys(),
  values = urlParams.values(),
  entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, pink, , p792, s

for(const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: pink
// newuser:
// ref: p792
// size: s

Поддержка браузерами получения параметров URL

Все современные браузеры хорошо поддерживают URLSearchParams.

Создание собственной функции перебора (parsing) строк запросов

Давайте оставим URL, который мы использовали в предыдущем разделе:

https://example.com/?product=shirt&color=pink&ref=p792&newuser&size=s

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

function getAllUrlParams(url) {

  // получить строку запроса из url (необязательно) или окна
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // здесь будем хранить параметры
  var obj = {};

  // если строка запроса существует
  if (queryString) {

    // Запись после символа # не является частью строки запроса, поэтому избавляемся от нее
    queryString = queryString.split('#')[0];

    // Делим строку запроса на составные части
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      // разделяем ключи и значения
      var a = arr[i].split('=');

      // установите имя и значение параметра (используйте 'true', если он пуст)
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      // (необязательно) сохраните последовательность регистров
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // если имя параметра заканчивается квадратными скобками, например, colors[] или colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {

        // создайте ключ, если он не существует
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // if it's an indexed array e.g. colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // получить значение индекса и добавить запись в соответствующую позицию
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // иначе добавьте значение в конец массива
          obj[key].push(paramValue);
        }
      } else {
        // мы работаем со строкой
        if (!obj[paramName]) {
          // если его не существует, создайте свойство
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string'){
          // Если свойство существует и является строкой, преобразуем его в массив
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // в противном случае добавим свойство
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}

В итоге вы получите:

getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'pink'
getAllUrlParams().ref; // 'p792'
getAllUrlParams().newuser; // true
getAllUrlParams().size; // 's'
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

Также можете узнать как динамично создать элемент скрипт на сайте.