Извлечение 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"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.