Параметры в URL могут содержать кучу полезной информации: данные о товаре, пользовательские настройки, идентификатор партнёра. В этой статье посмотрим как через JS можно извлечь данную информацию. Итак, начнём! Извлечение параметров из URL Скажем, у нас есть следующий URL: http://example.com/?product=shirt&color=blue&newuser&size=m А вот функция с помощью которой мы сможем извлечь параметры из URL: 01 function getAllUrlParams(url) { 02 03 // извлекаем строку из URL или объекта window 04 var queryString = url ? url.split('?')[1] : window.location.search.slice(1); 05 06 // объект для хранения параметров 07 var obj = {}; 08 09 // если есть строка запроса 10 if (queryString) { 11 12 // данные после знака # будут опущены 13 queryString = queryString.split('#')[0]; 14 15 // разделяем параметры 16 var arr = queryString.split('&'); 17 18 for (var i=0; i<arr.length; i++) { 19 // разделяем параметр на ключ => значение 20 var a = arr[i].split('='); 21 22 // обработка данных вида: list[]=thing1&list[]=thing2 23 var paramNum = undefined; 24 var paramName = a[0].replace(/\[\d*\]/, function(v) { 25 paramNum = v.slice(1,-1); 26 return ''; 27 }); 28 29 // передача значения параметра ('true' если значение не задано) 30 var paramValue = typeof(a[1])==='undefined' ? true : a[1]; 31 32 // преобразование регистра 33 paramName = paramName.toLowerCase(); 34 paramValue = paramValue.toLowerCase(); 35 36 // если ключ параметра уже задан 37 if (obj[paramName]) { 38 // преобразуем текущее значение в массив 39 if (typeof obj[paramName] === 'string') { 40 obj[paramName] = [obj[paramName]]; 41 } 42 // если не задан индекс... 43 if (typeof paramNum === 'undefined') { 44 // помещаем значение в конец массива 45 obj[paramName].push(paramValue); 46 } 47 // если индекс задан... 48 else { 49 // размещаем элемент по заданному индексу 50 obj[paramName][paramNum] = paramValue; 51 } 52 } 53 // если параметр не задан, делаем это вручную 54 else { 55 obj[paramName] = paramValue; 56 } 57 } 58 } 59 60 return obj; 61 } Теперь мы сможем извлекать параметры следующим образом: 1 getAllUrlParams().product; // 'shirt' 2 getAllUrlParams().color; // 'blue' 3 getAllUrlParams().newuser; // true 4 getAllUrlParams().nonexistent; // undefined 5 getAllUrlParams('http://test.com/?a=abc').a; // 'abc' Особенности Наша функция рассчитана на работу с URL где параметры разделены знаком & согласно спецификации W3C. Однако существуют и другие варианты, где параметры разделяются знаками ; или &. Наша функция работает в случае отсутствия знаков равенства или пустых значений параметров. Дублирующие параметры преобразуются в массив. Принципы работы Функция извлекает строку запроса: между знаками ? и #. Если представлена строка запроса, то будет анализироваться именно она. В противном случае извлекаем URL объекта window. 1 var queryString = url ? url.split('?')[1] : window.location.search.slice(1); Далее создаём объект куда будем складывать параметры. 1 var obj = {}; Начинаем разбор строки запроса. Отсекаем всё что находится после знака #. 1 queryString = queryString.split('#')[0]; Далее разделяем параметры. 1 var arr = queryString.split('&'); В результате получим массив следующего вида: 1 ['product=shirt', 'color=blue', 'newuser', 'size=m'] Далее проходимся по элементам данного массива, разделяем ключи и значения. 1 var a = arr[i].split('='); Далее нам нужно научить функции работать с дублирующимися параметрами или массивами: 1 colors=red&colors=green&colors=blue 2 3 colors[]=red&colors[]=green&colors[]=blue 4 5 colors[0]=red&colors[2]=green&colors[5]=blue Для начала задаём индекс по умолчанию: undefined. Далее разбираем значения между []. Записываем индекс если он задан. 1 var paramNum = undefined; 2 var paramName = a[0].replace(/\[\d*\]/, function(v){ 3 paramNum = v.slice(1,-1); 4 return ''; 5 }); Далее задаём значение параметра. Если значение отсутствует, то записываем true. 1 var paramValue = typeof(a[1])==='undefined' ? true : a[1]; Далее мы преобразуем параметры и значения к нижнему регистру чтобы избежать непредвиденных ситуаций: 1 paramName = paramName.toLowerCase(); 2 paramValue = paramValue.toLowerCase(); Если название текущего параметра уже задано, то помещаем его в массив: 01 if (obj[paramName]) { 02 03 if (typeof obj[paramName] === 'string') { 04 obj[paramName] = [obj[paramName]]; 05 } 06 07 if (typeof paramNum === 'undefined') { 08 obj[paramName].push(paramValue); 09 } 10 11 else { 12 obj[paramName][paramNum] = paramValue; 13 } 14 } Если же такой параметр ещё не задан, то просто напросто передаём значение. 1 obj[paramName] = paramValue; Если в URL были переданы закодированные символы, то мы из декодируем: 1 // test=a%20space 2 3 var original = getAllUrlParams().test; // 'a%20space' 4 var decoded = decodeURIComponent(original); // 'a space' Поздравляем! Теперь вы знаете как извлечь параметры из URL. Итог Данная функция пригодится в большинстве случаев. Если же вам нужно обрабатывать URL с другими разделителями, то можете свободно поменять код. Так же существует немало специализированных плагинов: jQuery URL или Medialize URI.js.