Как получить значения строки запроса в JavaScript?

Есть ли способ без плагинов получить строку запроса через jQuery (или без)?

Если да, то как? Если нет, есть ли плагин, который может это сделать?

+2701
источник поделиться
73 ответа
  • 1
  • 2
  • 3
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • Параллельная пара ключей/значений (?param=value)
  • Ключи без значения (?param: нет знака равенства или значения)
  • Ключи с пустым значением (?param=: знак равенства, но без значения справа от знака равенства)
  • Повторяющиеся клавиши (?param=1&param=2)
  • Удаляет пустые ключи (?&&: нет ключа или значения)

Код:

  • var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);
    
    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].push(keyValPairs[pairNum].split('=')[1]);
       }
    }
    

Как позвонить:

  • params['key'];  // returns an array of values (1..n)
    

Вывод:

  • key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
    
+20
источник

Однострочный запрос для запроса:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
+20
источник

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

https://github.com/Nijikokun/query-js

Использование

Получение специального параметра/ключа:

query.get('param');

Использование построителя для извлечения всего объекта:

var storage = query.build();
console.log(storage.param);

и тонны больше... проверьте ссылку github для получения дополнительных примеров.

Функции

  • Кэширование как по декодированию, так и по параметрам
  • Поддерживает строки запроса хеша #hello?page=3
  • Поддерживает передачу пользовательских запросов
  • Поддерживает параметры массива/объекта user[]="jim"&user[]="bob"
  • Поддержка пустого управления &&
  • Поддерживает параметры объявления без значений name&hello="world"
  • Поддерживает повторяющиеся параметры param=1&param=2
  • Чистый, компактный и читаемый источник 4kb
  • Поддержка AMD, Требование, Node
+20
источник

Очень легкий метод jQuery:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

А для предупреждения, например? q

alert(request.q)
+17
источник

Вот моя версия кода синтаксического анализа строки запроса на GitHub.

Он "префикс" с jquery. *, но сама функция синтаксического анализа не использует jQuery. Это довольно быстро, но все же открыто для нескольких простых оптимизаций производительности.

Также он поддерживает кодировку списка и хэш-таблиц в URL-адресе, например:

arr[]=10&arr[]=20&arr[]=100

или

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}
+16
источник

Вот что я использую:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Возврат 'override', а не '0' в последнем случае делает его совместимым с PHP. Работает в IE7.

+12
источник

Я бы предпочел использовать split() вместо Regex для этой операции:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}
+11
источник

Этот работает нормально

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

взяты отсюда

+11
источник

Получить все параметры запроса, включая флажки (массивы).

Учитывая правильное и нормальное использование параметров GET, то, что я вижу в большинстве функций, отсутствует поддержка массивов и удаление хеш-данных.

Итак, я написал эту функцию:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

Использование сокращенных операторов и while-loop, производительность должна быть очень хорошей.

Поддержка:

  • Пустые значения (ключ =/ключ)
  • Значение ключа (ключ = значение)
  • Массивы (ключ [] = значение)
  • Хэш (хэш-тег разделен)

Примечания:

Он не поддерживает массивы объектов (ключ [ключ] = значение)

Если пространство равно +, оно остается +.

Добавьте .replace(/\+/g, " "), если вам нужно.

Применение:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Возврат:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Demo:

http://jsfiddle.net/ZQMrt/1/

Info

Если вы что-то не понимаете или не можете прочитать функцию, просто спросите. Я рад объяснить, что я здесь сделал.

Если вы считаете, что функция не читается и недоступна, я с удовольствием переписываю эту функцию для вас, но считаю, что сокращенные и побитовые операторы всегда быстрее стандартного синтаксиса (возможно, читайте о сокращенных и побитовых операторах в ECMA-262 книгу или использовать свою любимую поисковую систему). Переписывание кода в стандартном читаемом синтаксисе означает потерю производительности.

+10
источник

Для тех, кто хочет короткий метод (с ограничениями):

location.search.split('myParameter=')[1]
+10
источник
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://gist.github.com/1771618

+8
источник

Следующий код создаст объект, который имеет два метода:

  • isKeyExist: проверьте, существует ли какой-либо конкретный параметр
  • getValue: Получить значение определенного параметра.

 

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
+6
источник

Попробуйте следующее:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Затем назовите его так:

if(location.search != "") location.search.getValueByKey("id");

Вы можете использовать это для файлов cookie также:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

Это работает только для строк, у которых key=value[&|;|$]... не будет работать с объектами/массивами.

Если вы не хотите использовать String.prototype... переместите его в функцию и передайте строку в качестве аргумента

+6
источник

Эта функция преобразует запрос в JSON-подобный объект, он также обрабатывает значения без значения и многозначные параметры:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

Мы выполняем проверку для undefined на parameter[1], потому что decodeURIComponent возвращает строку "undefined", если переменная undefined, и это неверно.

Использование:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
+6
источник

Я использовал этот код (JavaScript) для получения того, что передается через URL-адрес:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

Затем, чтобы присвоить значение переменной, вам нужно указать только тот параметр, который вы хотите получить, т.е. если URL-адрес example.com/?I=1&p=2&f=3

Вы можете сделать это, чтобы получить значения:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

тогда значения будут:

getI = 1, getP = 2 and getF = 3
+6
источник

Вот мой собственный подход к этому. Эта первая функция декодирует строку URL в объект пар имя/значение:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

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

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};
+5
источник

Следующая функция возвращает объектную версию вашего запросаString. Вы можете просто написать obj.key1 и obj.key2 для доступа к значениям key1 и key2 в параметре.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

И для использования этой функции вы можете написать

var obj= getQueryStringObject();
alert(obj.key1);
+5
источник

Я сделал небольшую библиотеку URL для моих нужд здесь: https://github.com/Mikhus/jsurl

Это более распространенный способ манипулирования URL-адресами в JavaScript. Между тем он действительно легкий (миниатюрный и gzipped < 1 KB) и имеет очень простой и чистый API. И не нужна никакая другая библиотека для работы.

Что касается начального вопроса, это очень просто сделать:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);
+5
источник

Я принял этот ответ и добавил поддержку для необязательной передачи URL-адреса в качестве параметра; возвращается к window.location.search. Очевидно, что это полезно для получения параметров строки запроса из URL-адресов, которые не являются текущей страницей:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
+4
источник

Есть небольшая небольшая утилита url для этого с некоторым охлаждением:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Посмотрите еще примеры и загрузите здесь: https://github.com/websanova/js-url#url

+4
источник

Это самая простая и малая функция JavaScript для получения значения параметра int as String из URL

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Источник и DEMO: http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

+4
источник

Я считаю, что это был точный и лаконичный способ достижения этого (изменено с http://css-tricks.com/snippets/javascript/get-url-variables/):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}
+4
источник

Если вам нужны параметры стиля массива URL.js поддерживает произвольно вложенные параметры стиля массива, а также строковые индексы (карты). Он также обрабатывает декодирование URL.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
+4
источник

Там есть надежная реализация в источнике Node.js
https://github.com/joyent/node/blob/master/lib/querystring.js

Также TJ qs выполняет вложенные параметры parsing
https://github.com/visionmedia/node-querystring

+4
источник
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};
+4
источник

Существует множество решений для получения значений запросов URI, я предпочитаю этот вариант, потому что он короток и отлично работает:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}
+4
источник

Если у вас Underscore.js или lodash, быстрый и грязный способ сделать это:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
+4
источник

Простое решение с простым JavaScript и регулярные выражения:

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

+4
источник

Если вы не хотите использовать библиотеку JavaScript, вы можете использовать строковые функции JavaScript для синтаксического анализа window.location. Сохраните этот код во внешнем файле .js, и вы можете использовать его снова и снова в разных проектах.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
+3
источник

Это очень простой способ получить значение параметра (строка запроса)

Используйте функцию gV(para_name) для получения значения

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
+3
источник
  • 1
  • 2
  • 3

Посмотрите другие вопросы по меткам или Задайте вопрос