Извлечение GET параметров через JavaScript

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

Итак, начнём!

Извлечение параметров из URL

Скажем, у нас есть следующий URL:

http://example.com/?product=shirt&color=blue&newuser&size=m

А вот функция с помощью которой мы сможем извлечь параметры из URL:

function getAllUrlParams(url) {

  // извлекаем строку из URL или объекта window
  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('=');

      // обработка данных вида: list[]=thing1&list[]=thing2
      var paramNum = undefined;
      var paramName = a[0].replace(/\[\d*\]/, function(v) {
        paramNum = v.slice(1,-1);
        return '';
      });

      // передача значения параметра ('true' если значение не задано)
      var paramValue = typeof(a[1])==='undefined' ? true : a[1];

      // преобразование регистра
      paramName = paramName.toLowerCase();
      paramValue = paramValue.toLowerCase();

      // если ключ параметра уже задан
      if (obj[paramName]) {
        // преобразуем текущее значение в массив
        if (typeof obj[paramName] === 'string') {
          obj[paramName] = [obj[paramName]];
        }
        // если не задан индекс...
        if (typeof paramNum === 'undefined') {
          // помещаем значение в конец массива
          obj[paramName].push(paramValue);
        }
        // если индекс задан...
        else {
          // размещаем элемент по заданному индексу
          obj[paramName][paramNum] = paramValue;
        }
      }
      // если параметр не задан, делаем это вручную
      else {
        obj[paramName] = paramValue;
      }
    }
  }

  return obj;
}

Теперь мы сможем извлекать параметры следующим образом:

getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

Особенности

  • Наша функция рассчитана на работу с URL где параметры разделены знаком & согласно спецификации W3C. Однако существуют и другие варианты, где параметры разделяются знаками ; или &.
  • Наша функция работает в случае отсутствия знаков равенства или пустых значений параметров.
  • Дублирующие параметры преобразуются в массив.

Принципы работы

Функция извлекает строку запроса: между знаками ? и #.

Если представлена строка запроса, то будет анализироваться именно она. В противном случае извлекаем URL объекта window.

var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

Далее создаём объект куда будем складывать параметры.

var obj = {};

Начинаем разбор строки запроса. Отсекаем всё что находится после знака #.

queryString = queryString.split('#')[0];

Далее разделяем параметры.

var arr = queryString.split('&');

В результате получим массив следующего вида:

['product=shirt', 'color=blue', 'newuser', 'size=m']

Далее проходимся по элементам данного массива, разделяем ключи и значения.

var a = arr[i].split('=');

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

colors=red&colors=green&colors=blue

colors[]=red&colors[]=green&colors[]=blue

colors[0]=red&colors[2]=green&colors[5]=blue

Для начала задаём индекс по умолчанию: undefined. Далее разбираем значения между []. Записываем индекс если он задан.

var paramNum = undefined;
var paramName = a[0].replace(/\[\d*\]/, function(v){
  paramNum = v.slice(1,-1);
  return '';
});

Далее задаём значение параметра. Если значение отсутствует, то записываем true.

var paramValue = typeof(a[1])==='undefined' ? true : a[1];

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

paramName = paramName.toLowerCase();
paramValue = paramValue.toLowerCase();

Если название текущего параметра уже задано, то помещаем его в массив:

if (obj[paramName]) {

  if (typeof obj[paramName] === 'string') {
    obj[paramName] = [obj[paramName]];
  }

  if (typeof paramNum === 'undefined') {
    obj[paramName].push(paramValue);
  }

  else {
    obj[paramName][paramNum] = paramValue;
  }
}

Если же такой параметр ещё не задан, то просто напросто передаём значение.

obj[paramName] = paramValue;

Если в URL были переданы закодированные символы, то мы из декодируем:

// test=a%20space

var original = getAllUrlParams().test; // 'a%20space'
var decoded = decodeURIComponent(original); // 'a space'

Поздравляем! Теперь вы знаете как извлечь параметры из URL.

Итог

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

Так же существует немало специализированных плагинов: jQuery URL или Medialize URI.js.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://www.sitepoint.com/get-url-parameters-with-javascript/
Перевел: Станислав Протасевич
Урок создан: 21 Августа 2016
Просмотров: 47062
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^