如何获取 JavaScript 中的查询字符串值?

是否有通过 jQuery(或不通过 jQuery)检索查询字符串值的无插件方法?

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

答案

更新: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 规范的更新,目的是更简洁地达到相同的结果。请参阅下面标题为 “ URLSearchParams ” 的答案。

此处发布的某些解决方案效率低下。完全不需要每次脚本需要访问参数时都重复进行正则表达式搜索,只需一个函数即可将参数拆分为一个关联数组样式的对象。如果您不使用 HTML 5 历史记录 API,则每个页面加载仅需要一次。此处的其他建议也无法正确解码 URL。

var urlParams;
(window. <a href="https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate" rel="noreferrer">onpopstate</a> = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent" rel="noreferrer">decodeURIComponent</a> (s.replace(pl, " ")); },
        query  = window. <a href="https://developer.mozilla.org/en-US/docs/DOM/window.location" rel="noreferrer">location</a> .search. <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/substring" rel="noreferrer">substring</a> (1);

    urlParams = {};
    while (match = search. <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec" rel="noreferrer">exec</a> (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 的答案

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


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

<script>var urlParams = <?php echo <a href="http://php.net/manual/en/function.json-encode.php" rel="noreferrer">json_encode</a> ($_GET, JSON_HEX_TAG);?>;</script>

简单得多!

ES2015(ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.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
}

它被混淆了,但是可以理解。它不起作用,因为某些变量未定义。

他们开始在 URL 上寻找参数?以及#的哈希值。然后,对于每个参数,它们以等号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

准备代码:方法声明

拆分测试代码

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%

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/

URLSearchParams

火狐 44+,歌剧 36+,边缘 17+,Safari 浏览器 10.3 + 和 Chrome 49 + 支持URLSearchParams API:

对于 IE 的稳定版本,有一个 Google 建议的URLSearchParams polyfill

它不是W3C标准化的,而是WhatWG的生活标准。

您可以在以下location使用它:

let params = new URLSearchParams(location.search);

要么

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

或当然在任何 URL 上:

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

您还可以使用 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) {}所有值。

参考实现示例页面可用于审核和测试。

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

它可以与或不与 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)即可。类似的代码看起来像这样,更完整的文档在这里

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'

tl; dr

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

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
})

这是什么全部代码...
“零集结”短路评估
ES6 解构分配箭头函数模板字符串

"?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 解决方案的信息。

要访问 URL 的不同部分,请使用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);


如果 querystring 为空( location.search == "" ),则结果会误导qd == {"": undefined} 。建议像下面这样启动解析功能之前检查查询字符串:

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

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 参数和值

如果您使用的是 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 History API,特别是history.pushState()history.replaceState() ,因此 URL 可以更改,这将使参数及其值的缓存无效。

每次更改历史记录时,此版本都会更新其内部参数缓存。

只需使用两个拆分

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

我正在阅读所有以前的和更完整的答案。但是我认为这是最简单,最快的方法。您可以检查此 jsPerf 基准测试

要解决 Rup 注释中的问题,请通过将第一行更改为下面的两行来添加条件拆分。但是绝对精度意味着它现在比 regexp 慢(请参阅jsPerf )。

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 的反案,那就赢了。否则,使用正则表达式。

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

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