如何在JavaScript中获得查询字符串值？

有没有一种通过jQuery（或不使用）检索查询字符串值的无插件方法？

如果有，怎么做？如果没有，是否有一个插件可以这样做？

Brad Larson
已编辑的问题 7日 四月 2015 в 12:55
编程
plugins query-string javascript url
23日 五月 2009 в 8:10
35 种观点
解决办法

更新：2018年9月

你可以使用URLSearchParams，它很简单，并且有体面的（但不完整的）浏览器支持。

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

原版

你不需要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查询键的权威位置。
注意：该函数是区分大小写的。如果你喜欢不区分大小写的参数名，在RegExp中添加'i'修饰符 。

这是一个基于新的 URLSearchParams specs 的更新，以更简洁地实现相同的结果。请参阅下面题为 "URLSearchParams"的答案。

Martin Tournoij
编辑本段答案6日 八月 2019 в 7:12
评论(52)

在snipplr.com上的Roshambo有一个简单的脚本来实现这个目标，描述在用jQuery获取URL参数|改进。使用他的脚本，你也可以很容易地只拉出你想要的参数。

以下是主要内容。

$.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获取URL参数& 值。

Yahel
编辑本段答案4日 二月 2016 в 6:51
评论(3)

如果你使用jQuery，你可以使用一个库，如jQuery BBQ: Back Button & Query Library。

...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();

            }
        };

如果你想直接使用普通的JavaScript，你可以使用...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

因为新的HTML历史API，特别是history.pushState()和history.replaceState()，URL可以改变，这将使参数及其值的缓存失效。

这个版本将在每次历史变化时更新其内部的参数缓存。

Ben Call
编辑本段答案9日 十月 2014 в 4:13
评论(0)