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

Posted

技术标签:

【中文标题】如何在 JavaScript 中获取查询字符串值？【英文标题】：How can I get query string values in JavaScript? 【发布时间】：2022-01-16 14:01:51 【问题描述】：

有没有通过 jQuery（或没有）检索 query string 值的无插件方式？

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

【问题讨论】：

我使用jQuery-Plugin – getUrlParam (version 2)中描述的插件getUrlParam。 一个没有 RegEx 的 plain javascript 解决方案：css-tricks.com/snippets/javascript/get-url-variables 尽管该问题的最佳解决方案因其对不需要 jQuery 的出色观察而值得受欢迎，但它创建新的正则表达式并为所需的每个参数重新解析查询字符串的方法效率极低.更有效（和通用）的解决方案已经存在很长时间了，例如在本文中转载在这里：htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/… JavaScript query string的可能重复 约瑟夫，“不需要 jQuery 的出色观察”？当然不需要。 jQuery 所做的一切，它都使用 JavaScript。人们不使用 jQuery，因为它做了 JavaScript 不能做的事情。 jQuery 的重点是方便。 【参考方案1】：

更新：2021 年 6 月

对于需要所有查询参数的特定情况：

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

更新：2018 年 9 月

你可以使用URLSearchParams，它很简单，有decent (but not complete) browser support。

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

原创

你不需要 jQuery 来达到这个目的。您可以只使用一些纯 JavaScript：

function getParameterByName(name, 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)。对此没有标准，用法也各不相同，例如这个问题：Authoritative position of duplicate HTTP GET query keys。

注意：该函数区分大小写。如果您更喜欢不区分大小写的参数名称，add 'i' modifier to RegExp

注意：如果遇到 no-useless-escape eslint 错误，可以将 name = name.replace(/[\[\]]/g, '\\$&'); 替换为 name = name.replace(/[[\]]/g, '\\$&')。

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

【讨论】：

我注意到Object.fromEntries(urlSearchParams) 产生了相同的结果。所以我们实际上不需要.entries()【参考方案2】：

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

var urlParams;
(window.@987654321@ = function () 
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s)  return @987654322@(s.replace(pl, " ")); ,
        query  = window.@987654323@.search.@987654324@(1);
  
    urlParams = ;
    while (match = search.@987654325@(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

这也可以很容易地改进以处理数组样式的查询字符串。这方面的一个例子是here，但由于RFC 3986 中没有定义数组样式的参数，我不会用源代码污染这个答案。 For those interested in a "polluted" version, look at campbeln's answer below.

此外，正如 cmets 中所指出的，; 是 key=value 对的合法分隔符。处理; 或& 将需要更复杂的正则表达式，我认为这是不必要的，因为很少使用;，我会说更不可能同时使用两者。如果您需要支持; 而不是&，只需在正则表达式中交换它们即可。

如果您使用的是服务器端预处理语言，您可能希望使用其原生 JSON 函数为您完成繁重的工作。例如，在 PHP 中，您可以编写： 
<script>var urlParams = <?php echo @987654329@($_GET, JSON_HEX_TAG);?>;</script>

简单多了！

#已更新

一个新的功能是检索重复的参数，如下myparam=1&myparam=2。没有规范，但是，当前大多数方法都遵循数组的生成。

myparam = ["1", "2"]

所以，这是管理它的方法：

let urlParams = ;
(window.onpopstate = function () 
    let 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);

    while (match = search.exec(query)) 
        if (decode(match[1]) in urlParams) 
            if (!Array.isArray(urlParams[decode(match[1])])) 
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            
            urlParams[decode(match[1])].push(decode(match[2]));
         else 
            urlParams[decode(match[1])] = decode(match[2]);
        
    
)();

【讨论】：

这就像一个魅力，每次都在页面加载时获取实时 URL：-) 非常好！不过，我建议引入局部变量let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);。恕我直言，这使得正在发生的事情变得更加明显。【参考方案3】：

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&amp;name=query+string 之类的 URL，将返回以下内容：

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

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

他们开始从? 和哈希# 中寻找url 上的参数。然后对于每个参数，他们用等号b[f][p]("=") 拆分（看起来像indexOf，他们使用字符的位置来获取键/值）。拆分后检查参数是否有值，如果有则存储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));

Performance test (split method against regex method) (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%

【讨论】：

【参考方案4】：

Artem Barger's answer的改进版：

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/

【讨论】：

【参考方案5】：

URLSearchParams

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

Chrome Announcement and details Opera Announcement and details Firefox Announcement and details

有一个 google 建议的 URLSearchParams polyfill 用于 IE 的稳定版本。

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

你可以在location上使用它：

const params = new URLSearchParams(location.search);

或

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

当然也可以在任何网址上：

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

您还可以使用 URL 对象上的简写 .searchParams 属性来获取参数，如下所示：

const 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) 。

reference implementation 和 sample page 可用于审计和测试。

【讨论】：

【参考方案6】：

只是另一个建议。插件 Purl 允许检索 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。类似的代码看起来像这样，更完整的文档here：

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'

【讨论】：

【参考方案7】：

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
)

这些代码是什么..."null-coalescing", short-circuit evaluation ES6 Destructuring assignments, Arrow functions, Template strings

例子： 
"?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])
正确处理空键。 用找到的 last 值覆盖 multi-keys。 
"?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"]

来自 cmets

*!!! 请注意，decodeURIComponent(undefined) 返回字符串 "undefined"。解决方案在于对&amp;&amp; 的简单使用，这样可以确保不会对未定义的值调用decodeURIComponent()。 （请参阅顶部的“完整解决方案”。）

v = v && decodeURIComponent(v);

如果查询字符串为空 (location.search == "")，则结果有点误导qd == "": undefined。建议在启动解析函数之前检查查询字符串，如下所示：

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

【讨论】：

【参考方案8】：

snipplr.com 上的 Roshambo 在 Get URL Parameters with jQuery | Improved 中有一个简单的脚本来实现这一点。使用他的脚本，您还可以轻松提取所需的参数。

这里是要点：

$.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 对此也有一篇很棒的博文，Get URL parameters & values with jQuery。

【讨论】：

【参考方案9】：

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

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

【讨论】：

【参考方案10】：

只需使用两个拆分：

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

我正在阅读所有以前的和更完整的答案。但我认为这是最简单快捷的方法。你可以签入这个jsPerf benchmark

要解决 Rup 注释中的问题，通过将第一行更改为下面的两行来添加条件拆分。但绝对准确度意味着它现在比正则表达式慢（参见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;

【讨论】：

【参考方案11】：

这是我将 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');

两全其美！

【讨论】：

【参考方案12】：

如果您进行的 URL 操作不仅仅是解析查询字符串，您可能会发现 URI.js 很有帮助。它是一个用于处理 URL 的库 - 并带有所有的花里胡哨。 （对不起，这里是自我广告）

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

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

（URI.js 还“修复”了错误的查询字符串，例如 ?&amp;foo&amp;&amp;bar=baz&amp; 到 ?foo&amp;bar=baz）

【讨论】：

【参考方案13】：

我喜欢Ryan Phelan's solution。但我看不出为此扩展 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 库。 More about this function on my blog.

【讨论】：

【参考方案14】：

用纯 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');

【讨论】：

【参考方案15】：

这是获取类似于 PHP $_GET 数组的对象的快速方法：

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&amp;y&amp;z=hello&amp;x=6，这将返回对象：


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

【讨论】：

【参考方案16】：

来自the MDN：

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


alert(loadPageVar("name"));

【讨论】：

【参考方案17】：

这些都是很好的答案，但我需要一些更强大的东西，并且认为你们都可能喜欢我创造的东西。

这是一个简单的库方法，可以对 URL 参数进行剖析和操作。静态方法有以下子方法可以在主题 URL 上调用：

获取主机 获取路径 获取哈希 设置哈希 获取参数 获取查询 设置参数 获取参数 有参数 移除参数

例子：

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

【讨论】：

【参考方案18】：

代码高尔夫：

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&amp;has=cheezburger 显示

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

【讨论】：

【参考方案19】：

我经常使用正则表达式，但不是为了那个。

在我的应用程序中读取一次查询字符串并从所有键/值对构建一个对象对我来说似乎更容易和更有效，例如：

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&amp;param2=val2 这样的 URL，您可以稍后在代码中获取它们的值，例如 search.param1 和 search.param2。

【讨论】：

【参考方案20】： 
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

【讨论】：

【参考方案21】：

Roshambo jQuery 方法没有处理 URL 解码

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

在返回语句中添加时也添加了该功能

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;

【讨论】：

【参考方案22】：

我喜欢this one（取自 jquery-howto.blogspot.co.uk）：

// 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;

非常适合我。

【讨论】：

【参考方案23】：

这是我对 this excellent answer 的编辑 - 增加了解析查询字符串的功能，其中包含没有值的键。

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 的解决方案返回一个没有键的对象，而我的解决方案返回一个带有键 param 和 undefined 值的对象。

【讨论】：

【参考方案24】：

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

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

this.htm?hello=world&amp;foo=bar 之类的 URL 将创建：

hello:'world', foo:'bar'

【讨论】：

整洁。不过，根据 Mozilla 的说法，forEach 在 IE7 或 8 上不起作用，我怀疑如果根本没有查询字符串，它就会崩溃。一个可以涵盖更多情况的最小改进是 decodeURIComponent 存储它的值 - 可以说也是键，但你不太可能在其中使用奇数字符串。 漂亮而简单。既不处理数组参数也不处理?a&amp;b&amp;c，但这确实非常易读（顺便说一句，与我的第一个想法相似）。 split 也是多余的，但与将 10 个字符的字符串拆分两次相比，我有更大的性能鱼可炒。 当查询字符串为 "?hello=world&one=a=b&two=2" 时，当您获取 'one' 的值时，您只会获得值中第一个 '=' 之前的部分。它的值应该是'a = b'，但你只能得到'a'，因为你在'='上拆分'one = a = b'。这简直是​​越野车。 :((【参考方案25】：

这是 Andy E 链接的“处理数组样式查询字符串”的扩展版本。修复了一个错误（?key=1&amp;key[]=2&amp;key[]=3;1 丢失并替换为[2,3]），进行了一些小的性能改进（重新解码值，重新计算“[”位置等）并添加了一些改进（功能化，支持?key=1&amp;key=2，支持;分隔符）。我把变量留得非常短，但添加了丰富的 cmets 以使它们可读（哦，我在本地函数中重用了 v，如果这令人困惑，很抱歉；）。

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

?test=Hello&person=neek&person[]=jeff&person[]=jim&person[extra]=john&test3&nocache=1398914891264

...把它变成一个看起来像...的对象


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

正如您在上面看到的，此版本处理一些“格式错误”的数组，即 - person=neek&amp;person[]=jeff&amp;person[]=jim 或 person=neek&amp;person=jeff&amp;person=jim，因为密钥是可识别且有效的（至少在 dotNet 的 NameValueCollection.Add 中）：

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

似乎the jury is somewhat out 在重复键上，因为没有规范。在这种情况下，多个键存储为（假）数组。但请注意，我不将基于逗号的值处理成数组。

代码：

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;
;

【讨论】：

要获取查询字符串值，您可以使用此“GetParameterValues”函数。在这种情况下，您只需传递查询搅拌参数名称，它就会返回值 $(document).ready(function () var bid = GetParameterValues('token'); );函数 GetParameterValues(param) var url = decodeURIComponent(window.location.href); url = url.slice(url.indexOf('?') + 1).split('&'); for (var i = 0; i 我已经使用了一段时间了，到目前为止效果很好。除了处理 urlencoded 数组。使用 q = decodeURIComponent(window.location.search.substring(1)), 也有助于它做到这一点。 对我来说，如果没有查询参数，这将无限循环:(【参考方案26】：

这是我不久前创建的一个功能，我对此非常满意。它不区分大小写 - 这很方便。另外，如果请求的 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);

【讨论】：

另外，最好使用 decodeURI() 或 decodeURIComponent() 而不是 unescape()。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…【参考方案27】：

如果您使用的是 Browserify，您可以使用 Node.js 中的 url 模块：

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns  "bob": "123"

延伸阅读：URL Node.js v0.12.2 Manual & Documentation

编辑：您可以使用URL 接口，它在几乎所有新浏览器中都被广泛采用，如果代码要在旧浏览器上运行，您可以使用polyfill like this one。这是一个关于如何使用 URL 接口获取查询参数（又名搜索参数）的代码示例

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob');

你也可以使用 URLSearchParams，这里是 an example from MDN 使用 URLSearchParams 来做：

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) 
  console.log(p);


searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

【讨论】：

url 模块 API 的文档在这里：nodejs.org/api/url.html 这对于 nw.js 开发来说非常有用。 Browserify 甚至不需要，因为大多数节点模块都像在 nw.js 窗口中一样工作。我已经测试了这段代码，并且没有任何修改就可以像魅力一样工作。 哦，这太棒了！ URLSearchParams 完美运行。非常感谢！ 应该是最好的投票，自定义函数和附加库没有任何麻烦。它似乎也被 2019 年的浏览器主要采用。【参考方案28】：

我们刚刚发布了arg.js，这是一个旨在一劳永逸地解决这个问题的项目。传统上这很困难，但现在您可以做到：

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

或得到全部：

var params = Arg.all();

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

【讨论】：

你救了我伙计.. arg.js 是解决方案没有一个解决方案是从 IE 8 中的 # 获取值 ..:( 任何搜索 IE8 的人 # 从请求中获取这是解决方案..【参考方案29】：

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

我修改了答案，让它也解析带有井号的完整查询字符串：

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;
;

【讨论】：

如果您需要它，这很有趣，但哈希部分 AFAIK 的格式没有标准，因此将其称为另一个答案的弱点是不公平的。 是的，我知道。但在我的应用程序中，我集成了第 3 方 js 导航，它在哈希符号后有一些参数。 例如，在 Google 搜索页面中，搜索查询后跟井号“#”。【参考方案30】： 
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&amp;stringword=jquerybyexample

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

【讨论】：

这里已经有一些这种方法的实现。至少您需要 decodeUriComponent() 结果值。如果您不指定值，这也可能会出现问题，例如?stringtext&amp;stringword=foo.

以上是关于如何在 JavaScript 中获取查询字符串值？的主要内容，如果未能解决你的问题，请参考以下文章

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

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

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

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

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

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