问题如何在JavaScript中获取查询字符串值？

是否有一种无插件的检索方式请求参数通过jQuery（或没有）的值？

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

6375

2019-05-20 20:51:30

起源

我用的是插件 getUrlParam 描述于 jQuery-Plugin - getUrlParam（版本2）。 - coma

一个普通的javascript 没有RegEx的解决方案： css-tricks.com/snippets/javascript/get-url-variables - Lorenzo Polidori

虽然这个问题的最佳解决方案值得流行，因为它非常需要jQuery，但是它创建新正则表达式并为每个所需参数重新解析查询字符串的方法效率极低。更高效（和多功能）的解决方案已经存在了很长时间，例如在这篇文章中重印： htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/... - Joseph Myers

可能重复 JavaScript查询字符串

约瑟夫，“不需要jQuery的优秀观察”？当然不需要。 jQuery所做的一切，都是使用JavaScript。人们不使用jQuery，因为它做了JavaScript无法做到的事情。 jQuery的重点是方便。 - Vladimir Kornea

答案:

你不需要为此目的使用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“下面。

7025

没有人说用纯Javascript无法做到这一点。如果你已经在使用jQuery，并且jQuery有一个函数来执行此操作，那么使用jQuery而不是使用新函数重新发明轮子是有意义的。 - Cerin

这个功能如何处理 http://www.mysite.com/index.php?x=x1&x=x2&x=x3 字段的值 x 很暧昧。 - dpp

这也无法处理多值键，这也是完全合法的。 - hurrymaplelad

为什么要使用正则表达式呢？ - Ry-♦

对于查询字符串 ?mykey=0&m.+key=1，打电话 getParameterByName("m.+key") 会回来的 0 代替 1。您需要转义正则表达式元字符 name 在构建正则表达式之前。你只需要打电话 .replace() 一次使用全局标志并使用 "\\$&" 作为替代表达。你应该搜索 location.search 代替 location.href。超过400个upvotes的答案应该考虑到这些细节。 - gilly3

这里发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的，将参数拆分成关联数组样式对象的单个函数就足够了。如果您不使用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.位置.search.子(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答案。

另外，正如评论中指出的那样， ; 是一个合法的分隔符 key=value 对。它需要一个更复杂的正则表达式来处理 ; 要么 &我觉得这是不必要的，因为它很少见 ; 使用，我会说两者都会被使用的可能性更小。如果你需要支持 ; 代替 &，只需在正则表达式中交换它们。

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

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

更简单！

1627

如果你正在做一个重度ajax的应用程序，那么你可能正在使用哈希（＃）来“启用后退按钮”......在这种情况下，查询字符串将一直在变化（请参阅facebook如何做）。 ..虽然这些解决方案忽略了＃anways之后发生的事情...... - Nick Franceschina

@Nick：哈希后的任何东西都在 window.location.hash 财产，是独立的 window.location.search 属性。如果哈希值发生变化，它根本不会影响查询字符串。 - Andy E

别忘了 ; 是一个法定界定为GET key=value 对。这种情况很少见，但实施起来需要5秒钟。 - alex

公平地说，RFC3986没有定义查询字符串的特定格式。 ?a=b&c=d 是传统的，以及Web表单的W3C推荐，但URI规范只是定义 query = *( pchar / "/" / "?" )。 - Matthew Gilliard

对于我们这些使用相当严格的JSHint交换设置的人来说 while(match = search.exec(query)) 同 while((match = search.exec(query)) !== null) - craigts

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('&'));

用URL就好了 ?topic=123&name=query+string，以下将返回：

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

谷歌方法

撕毁谷歌的代码我找到了他们使用的方法： 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）

准备代码：方法声明

拆分测试代码

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％

1193

这也是一种很好的方法，字符串拆分而不是使用正则表达式。但有一些值得指出的事情:-) 1。 unescape 是一个已弃用的函数，替换为 decodeURIComponent()，请注意，这些功能都不会正确解码a + 一个空间角色。 2.您应该将结果声明为对象而不是数组，因为JavaScript本身没有关联数组，并且您声明的数组无论如何都会通过为其指定命名属性来将其视为对象。 - Andy E

好奇为什么当它没有任何特定于jQuery的代码时你会把它变成一个jQuery插件？ - zachleat

@zachleat如果你没有框架，你的功能就会遍布你的代码。如果扩展jQuery，你将拥有函数的作用域，它不会浮动在代码中的某个地方。我认为这是唯一的原因。 - BrunoLM

这是jQuery版本调整通过 JSLint的（至少是JSLint.com在2011-06-15的半移动目标）。大多数情况下只是搬家去安抚克罗克福德。 - patridge

正如@BenjaminGruenbaum开玩笑说的那样，我也没有看到对URL解析性能进行基准测试的重点。如果这是一个同构的JavaScript模块，可以从Node调用，比如解析日志，那么是。但是使用它从中提取URL参数 window.location 考虑到导航到URL的客户端远远更昂贵，因此任何性能问题都没有实际意义。 - Dan Dascalescu

改进版 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/

636

如果你想稍微缩短它，你可以取消三元条件并用最后一行的一些短路代替它 - return match && decodeURIComponent(match[1].replace(/\+/g, ' '));。 - Andy E

它回来了 null 如果参数不是'='。你可以前置 if (!RegExp('[?&]'+name+'(&.*)?$').exec(window.location.search)) return false; 让它回来 boolean false 如果参数根本不存在。 - commonpike

我会用的 new 创建正则表达式时的前缀： var match = new RegExp('... - Patrick Berkeley

IE11错误：IE决定使用ascii字符8206（十六进制：200E - “从左到右字符”）添加返回值。我浪费了6个多小时才发现这个！治疗性发泄 ....修复，粘贴到最后一行的末尾： .replace('\u200E', '') - JayRO-GreyBeard

至少在Mac上的chrome中（也许是其他浏览器），最后一个值是附加'/'。所以我修改了正则表达式来忽略它。 var results = new RegExp('[\\?&]' + name + '=([^&#/]*)').exec(url); - CaseyB

URLSearchParams

Firefox 44 +，Opera 36 +，Edge 17 +，Safari 10.3+和Chrome 49+支持 URLSearchParams API：

有谷歌建议 URLSearchParams polyfill 对于IE的稳定版本。

它没有标准化 W3C，但它是一个生活标准 WHATWG。

您可以在现场使用它，但您需要删除 ? 问号（例如，带有 .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));

您也可以使用速记来获得参数 .searchParams URL对象上的属性，如下所示：

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

一个参考实施和a 样本页面可用于审核和测试。

482

IE仍然错过了...不是我正在使用它:( - mlt

这两个下来的人可能错过了（就像我刚才那样）你必须使用的事实 .get 而不仅仅是 . - Nakilon

你实际上并不需要 slice(1) 上 .search，你可以直接使用它。 URLSearchParams可以处理领先 ?。 - Jason C

请投票为了这窃听器得到修复。这将让Edge团队知道有兴趣！ - styfle

最佳答案。最后有人提供了原生方法。谢谢 - Green

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

它可以与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。类似的代码看起来就像这样，更全面的文档这里：

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'

394

截至撰写时，purl已不再维护，以前的维护者建议 uri.js - Dan Pantry

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

这些代码是什么......
“空 - 结合”，短路评估
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"

来自评论

*！请注意，那 decodeURIComponent(undefined) 返回字符串 "undefined"。解决方案在于简单使用 &&，这确保了 decodeURIComponent() 没有调用未定义的值。 （参见顶部的“完整解决方案”。）

v = v && decodeURIComponent(v);

如果查询字符串为空（location.search == ""），结果有些误导 qd == {"": undefined}。建议在启动解析函数之前检查查询字符串：

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

217

尼斯。我唯一要改变的是 - 如果一个键的值不超过一个，则不需要它是一个数组。如果每个键有多个值，则仅使用数组。 - Pavel Nikolov

@PavelNikolov我认为这会引入有时候获得数组的困难，有时甚至是值。您必须先检查它，现在只检查长度，因为您将使用循环来检索这些值。此外，这也是最简单但功能最强大的解决方案。 - Qwerty

@twig将无法在IE8中运行 - sqram

为了可读性而扁平化，变成函数，并重新使用split call：function parseQueryString（）{var qd = {}; location.search.substr（1）.split（“＆”）。forEach（function（item）{var parts = item.split（“=”）; var k = parts [0]; var v = decodeURIComponent（parts [parts] 1]）;（k in qd）？qd [k] .push（v）：qd [k] = [v，]}）;返回qd; } - Casey

decodeDocumentURI（undefined）返回“undefined”而不是undefined。一个功能但不是很优雅的补丁： var qd = {}; location.search.substr(1).split("&").forEach( function(item) { var s = item.split("="), k = s[0], v; if(s.length>1) v = decodeURIComponent(s[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v] }) - loop

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

215

用jQuery 似乎意味着将函数命名为jQuery对象。另外，为什么无效值 0？当然，我可以使用严格的相等检查，但不应该 null ？ - alex

同意。它的工作方式就像普通的javascript变量引用一样（除非返回undefined会更准确）。 - Isochronous

'name'没有被正确转义，它只是直接注入RegExp。这失败了。就像其他人所说的那样，令人难以置信的是，这些答案正在重新发挥作用并获得如此多的选票，而这应该在经过良好测试的图书馆中实施。 - Triynko

如果您正在使用jQuery，则可以使用库，例如 jQuery BBQ：后退按钮和查询库。

... 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可以更改，这将使参数及其值的缓存无效。

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

164

问题如何在JavaScript中获取查询字符串值？

答案:

ES2015（ES6）

没有jQuery

谷歌方法

性能测试（针对正则表达式方法的拆分方法）（jsPerf）

拆分测试代码

正则表达式测试代码

URLSearchParams

TL;博士

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

最简单的（虚拟）解决方案

多值键

编码字符？

来自评论

热门问题

问题 如何在JavaScript中获取查询字符串值？

答案:

ES2015（ES6）

没有jQuery

谷歌方法

性能测试（针对正则表达式方法的拆分方法） （jsPerf）

拆分测试代码

正则表达式测试代码

URLSearchParams

TL;博士

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

最简单的（虚拟）解决方案

多值键

编码字符？

来自评论

热门问题

问题如何在JavaScript中获取查询字符串值？

性能测试（针对正则表达式方法的拆分方法）（jsPerf）