提问



是否有一种无插件的方式通过jQuery(或没有)检索查询字符串值? [143]


如果是这样,怎么样?如果没有,是否有插件可以这样做?

最佳参考


你不需要为此目的使用jQuery。你可以只使用一些纯JavaScript:


function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}


用法:


// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)


点击
注意:如果参数多次出现(?foo=lorem&foo=ipsum),您将得到第一个值(lorem)。没有关于此的标准和用法不同,请参阅此问题:重复HTTP GET查询键的权威位置。

注意:该功能区分大小写。如果您更喜欢不区分大小写的参数名称,请将i修饰符添加到RegExp





这是基于新的URLSearchParams规范的更新,以更简洁地实现相同的结果。请参阅下面标题为URLSearchParams的回答。[146]

其它参考1


这里发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的,将参数拆分成关联数组样式对象的单个函数就足够了。如果您不使用HTML 5 History API,则每页加载时只需要一次。此处的其他建议也无法正确解码URL。


var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();


示例查询字符串:



  ?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty



结果:


 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true


这也很容易改进,以处理数组样式的查询字符串。这方面的一个例子是,但由于数组样式的参数没有在RFC 3986中定义,我不会用源代码污染这个答案。对于那些对污染版本感兴趣的人,请看下面的campbeln答案。[148] [149]


此外,正如评论中所指出的,;key=value对的合法分隔符。这将需要一个更复杂的正则表达式来处理;&,我认为这是不必要的,因为;的使用很少见,而且我会说两者都更不可能如果你需要支持;而不是&,只需在正则表达式中交换它们。




如果您正在使用服务器端预处理语言,您可能希望使用其本机JSON函数为您完成繁重的工作。例如,在PHP中,您可以编写:


<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>


更简单!

其它参考2


ES2015(ES6)



const getParams = query => {
  if (!query) {
    return { };
  }

  return (/^[?#]/.test(query) ? query.slice(1) : query)
    .split('&')
    .reduce((params, param) => {
      let [ key, value ] = param.split('=');
      params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
      return params;
    }, { });
};





没有jQuery



var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));


使用?topic=123&name=query+string之类的URL,将返回以下内容:


qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)





Google方法



撕毁谷歌的代码我找到了他们使用的方法:getUrlParameters


function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}


它是混淆的,但它是可以理解的。


他们开始从?和哈希#中查找网址上的参数。然后对于每个参数,它们在等号b[f][p]("=")中分割(看起来像indexOf,它们使用char的位置来获得键/值)。拆分后,检查参数是否有值,如果有,则存储d的值,否则只是继续。


最后返回对象d,处理转义和+符号。这个对象就像我的一样,它具有相同的行为。





我的方法是 jQuery插件


(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);


用法


//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));





性能测试(针对正则表达式方法的分割方法)(jsPerf)



准备代码:方法声明[151] [152]


拆分测试代码



var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];


正则表达式测试代码



var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");


在Windows Server 2008 R2/7 x64上的Firefox 4.0 x86中进行测试



  • 分割方法:144,780±2.17%最快

  • 正则表达式方法:13,891±0.85%|慢了90%


其它参考3


改进版Artem Barger的答案:


function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}


有关改进的更多信息,请参阅:http://james.padolsey.com/javascript/bujs-1-getparameterbyname/[154]

其它参考4


URLSearchParams



Firefox 44 +,Opera 36 +,Edge 17 +,Safari 10.3+和Chrome 49+支持URLSearchParams API:[155]



  • Chrome公告及详情

  • 歌剧公告及详情

  • Firefox公告及详情



对于稳定版本的IE,有一个谷歌建议的 URLSearchParams polyfill [156] [157] [158] [159]


它没有被W3C标准化,但它是WhatWG的生活标准。[160] [161]


您可以在现场使用它,但需要删除?问号(例如,使用.slice(1)):


let params = new URLSearchParams(location.search.slice(1));


要么


let params = (new URL(location)).searchParams;


或者当然在任何URL上:


let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));


您也可以使用URL对象上的简写.searchParams属性获取参数,如下所示:


let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 


您可以通过get(KEY)set(KEY, VALUE)append(KEY, VALUE) API读取/设置参数。您还可以迭代所有值for (let p of params) {}


参考实施和样本页面可供审核和测试。[162] [163]

其它参考5


只是另一个建议。插件 Purl 允许检索URL的所有部分,包括锚点,主机等[164]


它可以与jQuery一起使用或不与jQuery一起使用。


用法很简单,很酷:


var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'


但是,截至2014年11月11日,不再维护Purl,作者建议使用URI.js。 jQuery插件的不同之处在于它专注于元素 - 用于字符串,只需直接使用URI,有或没有jQuery。类似的代码看起来如此,更全面的文档:[165] [166]


var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'

其它参考6


snipplr.com上的Roshambo有​​一个简单的脚本来实现使用jQuery获取URL参数|中描述的内容改进。使用他的脚本,您也可以轻松获得所需的参数。[167]


这是要点:


$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}


然后从查询字符串中获取参数。


所以如果URL/查询字符串是xyz.com/index.html?lang=de


只需拨打var langval = $.urlParam('lang');,就可以了。


UZBEKJON也有一篇很棒的博客文章,获取网址参数&使用jQuery的值。[168]

其它参考7


TL;博士



一个快速,完整的解决方案,可处理多值密钥编码字符


var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})


多行:

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})


这些代码是什么......

null-coalescing,短路评估

ES6解构分配,箭头功能,模板字符串 [170] [171] [172] [173]


例:

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"


点击





阅读更多...关于Vanilla JavaScript解决方案。



要访问网址的不同部分,请使用location.(search|hash)


最简单(虚拟)解决方案



var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})



  • 正确处理空键

  • 覆盖多键,找到最后值。



"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined


多值键



简单的按键检查​​(item in dict) ? dict.item.push(val) : dict.item = [val]


var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})



  • 现在返回数组

  • qd.key[index]qd[key][index]
  • 访问值


> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]


编码字符?



decodeURIComponent()用于第二个或两个拆分。


var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})


例:

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]


点击




来自评论



* !!! 请注意,decodeURIComponent(undefined)返回字符串"undefined"。解决方案在于&&的简单用法,它确保不会在未定义的值上调用decodeURIComponent()。 (参见顶部的完整解决方案。)


v = v && decodeURIComponent(v);


点击
如果查询字符串为空(location.search == ""),结果有点误导qd == {"": undefined}。建议在启动解析函数之前检查查询字符串:


if (location.search) location.search.substr(1).split("&").forEach(...)

其它参考8


如果您正在使用jQuery,则可以使用库,例如​​jQuery BBQ:Back Button& Query Library。[175]



  ... jQuery BBQ提供了一个完整的.deparam()方法,以及散列状态管理和片段/查询字符串解析和合并实用程序方法。



编辑:添加Deparam示例:




 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };



这是我将Andy E的优秀解决方案变成一个完整的jQuery插件:


;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);


语法是:


var someVar = $.getQueryString('myParam');


两全其美!

其它参考9


只需使用两个拆分:


function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}


我正在阅读所有以前和更完整的答案。但我认为这是最简单快捷的方法。你可以查看这个jsPerf基准[176]


要解决Rup注释中的问题,可以通过将第一行更改为下面的两行来添加条件分割。但绝对准确度意味着它现在比regexp慢(参见jsPerf)。[177]


function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}


因此,如果你知道你不会遇到Rup的反案,那就赢了。否则,regexp。



  或如果您可以控制查询字符串,并且可以保证您尝试获取的值永远不会包含任何编码的URL
  字符(在值中有这些将是一个坏主意) - 你可以使用
  以下稍微更简化和可读的第一个选项版本:


    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;


其它参考10


如果您正在进行更多的URL操作而不是简单地解析查询字符串,您可能会发现URI.js很有帮助。它是一个用于操作URL的库 - 并附带所有的花里胡哨。(对不起,这里有自我宣传)[178]]]


将您的查询字符串转换为地图:


var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}


(URI.js也修复?&foo&&bar=baz&?foo&bar=baz等错误的查询字符串

其它参考11


我喜欢Ryan Phelan的解决方案。但是我没有看到为此扩展jQuery的任何意义吗?没有使用jQuery功能。


另一方面,我喜欢谷歌浏览器中的内置功能:window.location.getParameter。


那么为什么不使用这个呢?好吧,其他浏览器都没有。所以如果它不存在,我们就创建它:


if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}


这个函数或多或少来自Ryan Phelan,但它的包装方式不同:清晰的名称和其他javascript库的依赖关系。有关此功能的更多信息,请访问我的博客。[180]

其它参考12


这是获取类似于PHP $ _GET数组的对象的快速方法:[181]


function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}


用法:


var $_GET = get_query();


对于查询字符串x=5&y&z=hello&x=6,它返回对象:


{
  x: "6",
  y: undefined,
  z: "hello"
}

其它参考13


在简单的JavaScript代码中保持简单:


function qs(key) {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars[key];
}


从JavaScript代码中的任何位置调用它:


var result = qs('someKey');

其它参考14


这些都是很好的答案,但我需要更强大的东西,并认为你们都希望拥有我创造的东西。


这是一个简单的库方法,可以解析和操作URL参数。静态方法具有以下可在主题URL上调用的子方法:



  • 和getHost

  • 的getPath

  • getHash

  • setHash

  • getParams

  • getQuery

  • setParam

  • getParam

  • hasParam

  • removeParam



例:


URLParser(url).getParam('myparam1')





var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');

其它参考15


来自MDN:[182]


function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

其它参考16


我经常使用正则表达式,但不是那样。


在我的应用程序中读取一次查询字符串似乎更容易,更有效,并从所有键/值对构建对象,如:


var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();


对于像http://domain.com?param1=val1&param2=val2这样的网址,您可以在代码中稍后获取search.param1search.param2的值。

其它参考17


代码高尔夫:


var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}


显示它!


for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};


在我的Mac上:test.htm?i=can&has=cheezburger显示


0:can
1:cheezburger
i:can
has:cheezburger

其它参考18


function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

其它参考19


Roshambo jQuery方法没有处理解码URL



  http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/[183]



刚添加return语句时添加了该功能


return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;


现在你可以找到更新的要点:


$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}

其它参考20


我喜欢这个(取自jquery-howto.blogspot.co.uk):[184]


// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}


对我很有用。

其它参考21


这是我对这个优秀答案的编辑 - 增加了使用没有值的键解析查询字符串的能力。


var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
        var p=a[i].split('=', 2);
        if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));


重要!最后一行中该功能的参数不同。它只是一个如何将任意URL传递给它的例子。你可以使用Bruno的答案的最后一行来解析当前的URL。


到底是什么改变了?使用url http://sb.com/reg/step1?param=结果将是相同的。但是使用url http://sb.com/reg/step1?param Bruno的解决方案返回一个没有键的对象,而我的返回一个带有键paramundefined值的对象。

其它参考22


我需要查询字符串中的一个对象,我讨厌很多代码。它可能不是宇宙中最强大的,但它只是几行代码。


var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});


this.htm?hello=world&foo=bar这样的网址会创建:


{hello:'world', foo:'bar'}

其它参考23


这是我后来创建的一个函数,我非常满意。它不区分大小写 - 这很方便。另外,如果请求的QS不存在,它只返回一个空字符串。


我使用的是压缩版本。我为新手类型发布了未压缩的帖子,以便更好地解释发生了什么。


我确信这可以被优化或以不同的方式完成更快的工作,但它总是能够满足我的需求。


请享用。


function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

其它参考24


这是一个扩展版本的Andy E链接的句柄数组式查询字符串-version。修复了一个错误(?key=1&key[]=2&key[]=3; 1丢失并替换为[2,3]),进行了一些小的性能改进(重新解码值,重新计算[[位置等)和增加了许多改进(功能化,支持?key=1&key=2,支持;分隔符)。我把这些变量简单地留了下来,但添加了很多评论以使它们具有可读性(哦,我在本地函数中重用了v,对不起,如果这让人困惑的话)。


它将处理以下查询字符串...



  ?测试=你好&放大器;人= NEEK和放大器;人[[]] =杰夫&放大器;人[[]] =吉姆放大器;人[[详细]] =约翰&放大器; TEST3和放大器;非缓存= 1398914891264



......把它变成一个看起来像......的物体


{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}


正如您在上面所看到的,这个版本处理一些格式错误的数组,即 - person=neek&person[]=jeff&person[]=jimperson=neek&person=jeff&person=jim,因为密钥是可识别和有效的(至少在dotNet的NameValueCollection.Add中):[[[186]



  如果指定的密钥已存在于目标NameValueCollection中
  实例,将指定的值添加到现有的逗号分隔中
  value1,value2,value3形式的值列表。



由于没有规范,陪审团似乎有点出于重复的关键。在这种情况下,多个密钥存储为(假)数组。但请注意我基于逗号将值处理为数组。


代码:


getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};

其它参考25


我们刚刚发布了arg.js,一个旨在一劳永逸地解决这个问题的项目。传统上它很难,但现在你可以做到:[188]


var name = Arg.get("name");


或获得全部:


var params = Arg.all();


如果你关心?query=true#hash=true之间的区别,那么你可以使用Arg.query()Arg.hash()方法。

其它参考26


关于该问题的最佳答案的问题在于它是在#之后放置的不支持的参数,但有时也需要获得该值。


我修改了答案,让它解析一个带有井号的完整查询字符串:


var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};

其它参考27


function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​


这就是假设URL是这样你可以使用这个函数的方法



  http://dummy.com/?stringtext=jquery&stringword=jquerybyexample



var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');

其它参考28


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"]