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

How can I get query string values in JavaScript?

提问人: 提问时间:5/23/2009 最后编辑:16 revs, 12 users 25%Ripounet 更新时间:6/6/2023 访问量:5202340

问:

这个问题的答案是社区的努力。编辑现有答案以改进此帖子。它目前不接受新的答案或交互。

有没有一种无插件的方法可以通过jQuery(或不通过)检索查询字符串值?

如果是这样,如何?如果没有,有没有插件可以这样做?

JavaScript URL 插件查询 字符串

评论

69赞 Lorenzo Polidori 10/29/2012
没有正则表达式的普通 javascript 解决方案:css-tricks.com/snippets/javascript/get-url-variables
0赞 coma 5/23/2009
我使用 jQuery-Plugin – getUrlParam(版本 2)中描述的插件 getUrlParam
6赞 Joseph Myers 5/14/2013
尽管这个问题的顶级解决方案值得欢迎,因为它很好地观察到不需要 jQuery,但它创建新的正则表达式并为每个所需参数重新解析查询字符串的方法效率极低。更有效(和多功能)的解决方案已经存在了很长时间,例如在这篇文章中转载在这里:htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/......
1赞 8/1/2013
JavaScript 查询字符串的可能重复项
4赞 Val Kornea 5/30/2014
约瑟夫,“不需要jQuery的出色观察”?当然不是必需的。jQuery所做的一切,都是使用JavaScript完成的。人们不使用jQuery,因为它可以做JavaScript做不到的事情。jQuery的重点是方便。

答:

172赞 12 revs, 3 users 68%alex #1

如果你使用的是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,特别是 和 ,URL 可能会更改,这将使参数及其值的缓存失效。history.pushState()history.replaceState()

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

10393赞 51 revs, 43 users 10%Code Spy #2

使用 URLSearchParams 从查询字符串中获取参数。

例如:

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

更新日期:2022年1月

使用 Proxy() 比使用 Object.fromEntries() 更快,并且支持得更好。

此方法附带的警告是,您不能再循环访问查询参数。

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

更新日期:2021年6月

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

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

更新时间:2018年9月

您可以使用 URLSearchParams,它很简单,并且具有不错的(但不完整)浏览器支持

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)

注意:如果一个参数多次出现 (),您将获得第一个值 ()。对此没有标准,用法也各不相同,例如请参阅以下问题:重复 HTTP GET 查询密钥的权威位置?foo=lorem&foo=ipsumlorem

注意:该函数区分大小写。如果您更喜欢不区分大小写的参数名称,请在 RegExp 中添加“i”修饰符

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


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

评论

2赞 shimatai 2/5/2022
2021 年 6 月和代理解决方案不适用于 SPA(Singla 页面应用程序)。SPA 更改页面的内容,甚至可以更改 URL 相对路径(例如添加查询字符串)。
1赞 kaerimasu 4/4/2022
@JeffThompson,尾随逗号是允许的,但不是必需的。它们使开发人员可以更轻松地向对象添加新条目,而无需编辑任何现有条目的行。
2赞 andy 4/7/2022
2022 年 1 月:如果需要将相同参数名称的所有值作为数组,请使用 .searchParams.getAll(prop)
10赞 Mohammad Kermani 7/28/2022
为什么不使用这样的东西:const param = new URLSearchParams(window.location.search); param.get('paramName')
5赞 Jason Hoetger 8/10/2022
代理不是性能更高......读取代码时。或者调试由于没有普通的旧 JS 对象而导致的奇怪问题。当您确定解析查询参数是应用程序的瓶颈时,您可以使用代理(或者询问为什么 URL 中有数百万个查询参数)。在此之前,请使用清晰易懂的 Object.fromEntries()。
226赞 9 revs, 6 users 55%brandonjp #3

Roshambo on snipplr.com 有一个简单的脚本来实现这一点,如使用 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.example/index.html?lang=de

只需致电 ,您就得到了它。var langval = $.urlParam('lang');

UZBEKJON也有一篇关于此的精彩博客文章,使用jQuery获取URL参数和值

1776赞 26 revs, 6 users 71%Andy E #4

此处发布的一些解决方案效率低下。每次脚本需要访问参数时都重复正则表达式搜索是完全没有必要的,只需一个函数即可将参数拆分为关联数组样式对象。如果您不使用 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 的答案

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


如果您使用的是服务器端预处理语言,则可能需要使用其本机 JSON 函数来为您完成繁重的工作。例如,在PHP中,你可以这样写:
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

简单多了!

#UPDATED

一项新功能是检索重复的参数,如下所示。但是,没有规范,当前大多数方法都遵循数组的生成。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]);
        }
    }
})();

评论

0赞 Vetrivel PS 2/2/2021
这就像一个魅力,每次在页面加载时获取实时 URL:-)
0赞 mihca 7/7/2021
很好!但是,我建议引入局部变量。恕我直言,这使得正在发生的事情更加明显。let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);
0赞 Lior Gross 11/14/2022
我用这个作为回退到顶级答案,因为在那之后,这是最完整的解决方案
39赞 3 revs, 2 users 97%Jet #5
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
1326赞 17 revs, 10 users 85%BrunoLM #6

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
}

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

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

最后返回对象,处理转义和符号。这个对象就像我的一样,具有相同的行为。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%

评论

0赞 Madalin Grigore-Enescu 6/1/2023
令人着迷的研究。我建议你用“substring”替换“substr”,以避免在各种编辑器中出现弃用的警告(这可能是为什么 8 人对这种方法投反对票的唯一解释,除了精神错乱)。
98赞 Ryan Phelan #7

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

两全其美!

18赞 4 revs, 4 users 59%Martijn Pieters #8

这是我在 GitHub 上的查询字符串解析代码版本

它以 jquery.* 为“前缀”,但解析函数本身不使用 jQuery。它的速度非常快,但仍然可以进行一些简单的性能优化。

此外,它还支持URL中的列表和哈希表编码,例如:

arr[]=10&arr[]=20&arr[]=100

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}

评论

0赞 brauliobo 9/20/2019
不错,但不处理这个案子filters[topic][]=list
0赞 Abhinav Gupta 12/23/2020
嘿,如何使用上面的代码通过 Key 获取值??我想从这个 URL 获取城市值...abc.xyzl/urlpart1/...
41赞 2 revs, 2 users 79%shanimal #9

代码高尔夫:

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
39赞 3 revs, 3 users 93%Mohammed Arif #10

Roshambo jQuery 方法不负责解码 URL

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

刚刚在添加 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;
}
32赞 2 revs, 2 users 76%Clint #11

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

评论

0赞 Adarsh Konchady 11/7/2015
另外,最好使用 decodeURI() 或 decodeURIComponent() 而不是 unescape()。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......
681赞 5 revs, 3 users 80%James #12

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/

40赞 5 revs, 3 users 69%Mic #13

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

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

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

对于像这样的 URL,您可以稍后在代码中获取它们的值 和 。http://example.com?param1=val1&param2=val2search.param1search.param2

402赞 6 revs, 6 users 45%AlfaTeK #14

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

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

用法非常简单酷:

var url = $.url('http://example.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://example.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插件的不同之处在于它专注于元素 - 对于字符串的使用,只需直接使用,无论是否使用jQuery。类似的代码看起来像这样,这里是更完整的文档:URI

var url = new URI('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
18赞 3 revs, 3 users 93%Eneko Alonso #15

我宁愿使用正则表达式来执行此操作:split()

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}

评论

0赞 dogonaroof 2/8/2019
我不想使用正则表达式,于是选择了这个解决方案。我发现它工作得很好。谢谢!
5赞 3 revsmynameistechno #16

我接受了这个答案,并添加了对选择性将 URL 作为参数传递的支持;回退到 window.location.search。显然,这对于从非当前页面的 URL 获取查询字符串参数很有用:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);
37赞 3 revs, 2 users 80%skaurus #17

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

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 的结果将是相同的。但是使用 url Bruno 的解决方案返回一个没有键的对象,而我的解决方案返回一个带有键和值的对象。http://sb.com/reg/step1?param=http://sb.com/reg/step1?paramparamundefined

8赞 3 revs, 3 users 62%Anoop #18

以下代码将创建一个具有两种方法的对象:

  1. isKeyExist:检查特定参数是否存在
  2. getValue:获取特定参数的值。

 

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};
8赞 4 revs, 2 users 99%user981090 #19

试试这个:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

然后这样称呼它:

if(location.search != "") location.search.getValueByKey("id");

您也可以将其用于 cookie

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

这仅适用于具有 ...不适用于对象/数组。key=value[&|;|$]

如果您不想使用 String.prototype... 将其移动到函数并将字符串作为参数传递

66赞 4 revs, 3 users 97%Anatoly Mironov #20

我喜欢 Ryan Phelan 的解决方案。但是我看不出为此扩展jQuery有什么意义?没有使用 jQuery 功能。

另一方面,我喜欢 Google Chrome 中的内置函数: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 库的依赖关系。有关此功能的更多信息,请访问我的博客

9赞 alkos333 #21
function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://gist.github.com/1771618

59赞 5 revs, 2 users 84%sagivo #22

在纯 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');
79赞 rodneyrehm #23

如果执行的 URL 操作不仅仅是分析查询字符串,则可能会发现 URI.js 很有帮助。它是一个用于操作 URL 的库 - 并带有所有花里胡哨的功能。(对不起,这里是自我广告)

要将 QueryString 转换为 Map,请执行以下操作:

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)

7赞 BMitch #24

这是我自己对此的看法。第一个函数将 URL 字符串解码为名称/值对的对象:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

作为额外的奖励,如果您更改了一些参数,则可以使用第二个函数将参数数组放回 URL 字符串中:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};

评论

1赞 adardesign 8/28/2012
如果你仍然使用 jQuery,那么后面的方法 () 可以通过url_args_replace$.param()
1赞 greg 4/18/2013
为什么要使用 document.createElement(“a”) ?
2赞 BMitch 4/18/2013
@greg在浏览器引擎中创建元素,该元素将为您解析 URL,并提供用于与 URL 字符串交互的 search 和 href 方法。
24赞 2 revs, 2 users 95%vol7ron #25

查看实际操作:https://codepen.io/ajorpheus/pen/XWyWWNQ


http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
  • 常规键/值对 (?param=value)
  • 无值键(:无等号或值)?param
  • 带空值的键( : 等号,但等号右边没有值)?param=
  • 重复键 (?param=1&param=2)
  • 删除空键( :无键或值)?&&

###Code:

-

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

###How 致电:

-

    params['key'];  // returns an array of values (1..n)

###Output:

-

    key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]
23赞 3 revs, 3 users 94%IT ppl #26

这个工作正常。其他一些答案中的正则表达式会带来不必要的开销。

function getQuerystring(key) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == key) {
            return pair[1];
        }
    }
}

取自这里

评论

3赞 Rup 5/24/2012
您可能至少希望在返回之前调用 decodeUriComponent,如果不是像此处的所有其他解决方案一样先用空格替换加号。其他一些解决方案也更喜欢拆分时限制 2 个部分,以便更宽松地接受输入。pair[1]=
1赞 IT ppl 5/24/2012
@Rup你是对的......实际上,在我的代码中,它始终是一个数字而不是任何特殊字符,所以错过了......
0赞 Roc Boronat 11/25/2019
谢谢你!这是 Kindle 实验浏览器支持的唯一方法。怪胎项目在这里!:·)
6赞 2 revsImdad #27

以下函数返回 queryString 的对象版本。 您可以简单地写入和访问 和 in 参数的值。obj.key1obj.key2key1key2

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

要使用这个函数,你可以写

var obj= getQueryStringObject();
alert(obj.key1);
36赞 2 revs, 2 users 88%Tomamais #28

我喜欢这个(取自 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;
}

对我来说效果很好。

721赞 26 revs, 9 users 57%Paul Sweatte #29

URLSearchParams

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

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

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

您可以在以下位置使用它:location

const params = new URLSearchParams(location.search);

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

或者当然,在任何 URL 上:

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" 

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

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

评论

1赞 chri3g91 2/9/2022
const params = new URL(location.href).searchParams;不依赖 URL 的静态文本
0赞 luke_mclachlan 4/14/2022
@chri3g91事实上,正如答案所示,您可以使用const params = new URL(location).searchParams;
59赞 3 revsPaulpro #30

这是获取类似于 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&y&z=hello&x=6

{
  x: "6",
  y: undefined,
  z: "hello"
}
103赞 6 revs, 6 users 39%Martin Borthiry #31

只需使用两个拆分

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

我正在阅读之前所有更完整的答案。但我认为这是最简单、最快捷的方法。你可以检查这个 jsPerf 基准测试

要解决 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 的反诉,那么这就赢了。否则为 regexp。

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

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
45赞 4 revs, 4 users 66%user229044 #32

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

它是一种简单的库方法,可以对 URL 参数进行剖析和操作。静态方法具有以下子方法,可以在主题 URL 上调用这些方法:

  • getHost的
  • getPath (获取路径)
  • 获取哈希
  • set哈希
  • getParams(获取参数)
  • 获取查询
  • setParam
  • getParam
  • hasParam
  • removeParam

例:

URLParser(url).getParam('myparam1')

var url = "http://www.example.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>');
6赞 2 revsAlbireo #33

此函数将查询字符串转换为类似 JSON 的对象,它还处理无值和多值参数:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

我们执行 on 的检查,因为如果变量是 ,则返回字符串“undefined”,这是错误的。undefinedparameter[1]decodeURIComponentundefined

用法:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
4赞 Rob #34

有一个不错的小实用程序,带有一些很酷的加糖:url

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

查看更多示例并在此处下载:https://github.com/websanova/js-url#url

20赞 2 revs, 2 users 80%Anoop #35

获取查询的单行代码:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];

评论

6赞 Brad Koch 1/29/2013
如果密钥不存在,则触发错误,也许可以尝试一下?(location.search.match(new RegExp('kiosk_modeasdf' + "=(.*?)($|\&)", "i")) || [])[1]
0赞 tim 2/13/2013
@Brad,当然它是未定义的,因为这是你要找的钥匙。如果您的查询是?hello=world,将返回var value = location.search.match(new RegExp("hello" + "=(.*?)($|\&)", "i"))[1];"world"
2赞 rob 9/30/2014
@BradKoch我发现您的解决方案最好,尤其是在短路到空字符串(window.location.search.match(new RegExp('kiosk_modeasdf' + “=(.*?)($|\&)“, ”i“)) ||[])[1] ||'';
0赞 e-frank 10/10/2017
我想你忘记了测试以“?”或“&”开头的键,例如:var result = location.search.match(new RegExp(“[\?\&]” + key + “=(.*?)($|\&)“, ”i“));
4赞 Code Spy #36

这是最简单和最小的函数 JavaScript 从 URL 中获取 int 和 String 参数值

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

来源和演示 : http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

评论

2赞 Rup 1/25/2013
我认为这很容易被击败,例如 不会返回 123,因为它从 中获取字符串,并且会返回,而不是仅仅当它不是行上的最后一个值时,等等。您也没有对提取的值进行解码 UriComponent。另外,我无法尝试您的演示 - 我被重定向到博彩网站???xyz=page&str=Expected&page=123pagexyz=pagestrExpected&page=123Expected
0赞 Code Spy 1/29/2013
@Rup你说的是罕见/最坏的情况..但是在正常和常规情况下,此代码工作正常并解决了目的......关于DEMO,它工作正常,并展示了这个功能是如何工作的!谢谢!
2赞 Rup 1/29/2013
好的,终于设法通过adfly获得了您的演示。是的,这工作正常,但只是因为您只有一个字符串参数并且是最后一个 - 尝试使用多个参数并切换顺序。尝试将 pagee 参数放在 page 参数之前,它会失败。例如,这是您的演示,其中三个的顺序颠倒了。另一个问题是,如果有人发布一个包含非 ASCII 字符的字符串,例如空格 - 它将被 URI 编码,而您之后不会对其进行解码。
21赞 2 revsNijikokun #37

我使用这里列出的技术开发了一个小型库,为任何人的麻烦创建一个易于使用的插入式解决方案;可以在这里找到它:

https://github.com/Nijikokun/query-js

用法

获取特定参数/键:

query.get('param');

使用构建器获取整个对象:

var storage = query.build();
console.log(storage.param);

and tons 更多...查看 GitHub 链接以获取更多示例。

特征

  1. 对解码和参数进行缓存
  2. 支持哈希查询字符串#hello?page=3
  3. 支持传递自定义查询
  4. 支持数组/对象参数user[]="jim"&user[]="bob"
  5. 支持空管理&&
  6. 支持不带值的声明参数name&hello="world"
  7. 支持重复参数param=1&param=2
  8. 干净、紧凑、可读的源4kb
  9. AMD、Require、Node 支持
31赞 4 revs, 4 users 69%gewel #38
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://example.com/?stringtext=jquery&stringword=jquerybyexample

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

评论

0赞 Rup 2/6/2013
这里已经有一些这种方法的实现。至少你需要对结果值进行解码 UriComponent()。如果您不指定值,这也可能会出现错误,例如 .?stringtext&stringword=foo
45赞 3 revs, 3 users 79%orip #39

MDN 中

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

alert(loadPageVar("name"));
33赞 3 revs, 2 users 86%tim #40

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

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

像这样的 URL 将创建:this.htm?hello=world&foo=bar

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

评论

4赞 Rup 2/15/2013
整洁。不过,根据 Mozilla 的说法,forEach 在 IE7 或 8 上不起作用,我怀疑如果根本没有查询字符串,它会失败。涵盖更多情况的一个最小改进是在存储值时对值进行解码 - 可以说是键,但你不太可能在其中使用奇数字符串。
1赞 cod3monk3y 2/26/2014
漂亮而简单。不处理数组参数,但这确实非常可读(顺便说一句,这与我的第一个想法相似)。此外,这是多余的,但我有比两次拆分 10 个字符字符串更大的性能鱼要炸。?a&b&csplit
1赞 Shawn Kovac 5/20/2015
当 queryString 为 “?hello=world&one=a=b&two=2” 时,当您获取 'one' 的值时,您只能获得值中第一个 '=' 之前的部分。它的值是 'a=b',但你只得到 'a',因为你在 '=' 上拆分了 'one=a=b'。这简直是越野车。:((
4赞 3 revsGabriel Ryan Nahmias #41

我相信这是实现这一目标的准确而简洁的方法(修改自 http://css-tricks.com/snippets/javascript/get-url-variables/):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}

评论

1赞 Rup 3/17/2013
这看起来很合理!您可能需要对从查询字符串中获取的值进行解码,以防它们已使用 %s 或 +s 进行编码以提交。
18赞 5 revs, 3 users 81%Roi #42

一个非常轻量级的jQuery方法:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

并发出警报,例如?q

alert(request.q)

评论

2赞 Rup 4/2/2013
整洁。已经有一些相同的答案 - 迭代拆分 - 尽管没有一个使用jQuery的答案,而且我认为它们中的任何一个都不是完美的。不过,我不明白你的结束语,我认为你在阅读这两个值时需要它们。returndecodeUriComponentpair[]
0赞 Roi 5/14/2013
是的,拥有 decodeUriComponent 是 def 最佳实践 - 我只是在飞行中写了它。至于回归......我只是保持退回东西的习惯。完全没有必要
4赞 2 revs, 2 users 68%Kevin Cox #43

如果需要数组样式的参数,URL.js 支持任意嵌套的数组样式参数以及字符串索引(映射)。它还处理 URL 解码。

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}
27赞 4 revs, 4 users 58%Ph0en1x #44

关于这个问题的最高答案的问题在于,它不支持放置在 # 之后的参数,但有时也需要它来获取此值。

我修改了答案,让它也解析带有哈希符号的完整查询字符串:

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

评论

1赞 Rup 4/22/2013
如果你需要它,这很有趣,但是哈希部分AFAIK的格式没有标准,所以把它称为另一个答案的弱点是不公平的。
2赞 Ph0en1x 4/22/2013
是的,我明白。但是在我的应用程序中,我集成了第三方 js 导航,它们在哈希符号之后有一些参数。
0赞 etlds 6/26/2014
例如,在 Google 搜索页面中,搜索查询后跟井号“#”。
6赞 2 revs, 2 users 78%Mikhus #45

我在这里做了一个小的URL库来满足我的需求:https://github.com/Mikhus/jsurl

这是在 JavaScript 中操作 URL 的更常见方法。同时,它非常轻量级(缩小并压缩< 1 KB),并且具有非常简单干净的 API。而且它不需要任何其他库即可工作。

关于最初的问题,操作非常简单:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);

评论

0赞 Rup 4/19/2013
这很有趣。为什么要手动解码该值?您还将限制可以接受的 UTF-8 顶级字符代码,尽管我意识到您在实践中不太可能达到它。
0赞 Mikhus 4/19/2013
为什么以这种方式解码在这里解释: unixpapa.com/js/querystring.html 实际上,我已经从那里获取了这个想法的代码,这是我脚本的顶级注释中所说的内容
0赞 brauliobo 9/20/2019
也不支持对象数组,例如filters[topic][]=list
29赞 7 revs, 5 users 82%nkh #46

如果您使用的是 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 手册和文档

编辑:您可以使用 URL 接口,它在几乎所有新浏览器中都被广泛采用,如果代码要在旧浏览器上运行,您可以使用像这样的 polyfill。下面是一个关于如何使用 URL 接口获取查询参数(又名搜索参数)的代码示例

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

你也可以使用 URLSearchParams,这里有一个来自 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"

评论

0赞 andrezsanchez 9/13/2014
该模块的 API 文档位于以下位置:nodejs.org/api/url.htmlurl
0赞 Andrew Grothe 7/14/2015
这对 nw.js 开发很有好处。甚至不需要浏览器化,因为大多数节点模块都像在 nw.js 窗口中一样工作。我已经测试了这段代码,并且无需任何修改即可像魅力一样工作。
0赞 Baran 7/17/2019
哦,这太棒了!URLSearchParams 工作完美。非常感谢!
2赞 TheWhiteLlama 9/30/2019
应该是投票最好的,没有自定义函数和其他库的麻烦。它似乎也主要被浏览器 2019 采用。
4赞 3 revs, 3 users 75%Robert Bolton #47

如果您不希望使用 JavaScript 库,则可以使用 JavaScript 字符串函数来解析 .将此代码保存在外部 .js 文件中,您可以在不同的项目中一遍又一遍地使用它。window.location

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}
2赞 3 revs, 3 users 62%soheil bijavar #48

请参阅此帖子或使用此帖子

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression 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))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>

评论

0赞 Rup 7/10/2013
您的示例用法 - 从准备好的文档返回 - 看起来很奇怪,而 AFAICS 它永远不会起作用:只会返回一个字符串和您的三等号——将其与整数进行比较。否则似乎是一个巧妙的解决方案。decode()
0赞 Rup 7/10/2013
...虽然它与上面的 Andy E 的解决方案相同。
0赞 Peter Mortensen 7/24/2016
链接已断开。
3赞 2 revs, 2 users 96%farnoush resa #49

我推荐 Dar Lessons 作为一个很好的插件。我已经用它工作了很长时间。您还可以使用以下代码。 Jus 放在 document.ready 之前,并将下面的代码放在 document.ready 的开头。在此代码之后,您可以将其用于您拥有的任何查询对象var queryObj = {};queryObj["queryObjectName"]

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}

评论

0赞 Rup 7/15/2013
在两个帖子中为 Dar Lessons 提供两个插头?我认为我们至少不能推荐当前版本:它容易受到脚本注入攻击。(我已经给他发了电子邮件让他知道)。像这里的许多解决方案一样,你已经错过了,你可能还想更优雅地处理缺失的值。split('=')decodeURIComponent
0赞 Rup 7/17/2013
Dar Lessons 现已发布 1.1 版本,修复了脚本注入攻击。
3赞 7 revs, 3 users 68%Pushkraj #50

用:

  $(document).ready(function () {
      var urlParams = {};
      (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);

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

请检查并让我知道您的意见。另请参阅如何使用 jQuery 获取查询字符串值

评论

0赞 Rup 7/23/2013
这与 Soheil 的答案相同,Soheil 的答案本身就是 Andy E 的答案的副本,包裹在 jQuery 中,并在末尾进行检查。您在上一节中还复制了 Soheil 的错误:这是不可能的,因为它始终是字符串而不是整数,而且 from 也没有意义。你从哪里得到这个代码?urlParams["q1"]=== 1return 1$(document).ready()
2赞 Pushkraj Lanjekar 7/23/2013
@Rup : 我是从 codeproject.com/Tips/529496/Handling-QueryString-Using-jQuery 那里得到的
4赞 2 revsclyfe #51

Node.js 的源代码
https://github.com/joyent/node/blob/master/lib/querystring.js 中有一个强大的实现

此外,TJ 的 qs 还进行了嵌套参数解析 https://github.com/visionmedia/node-querystring

4赞 kayz1 #52
var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};

评论

1赞 allenhwkim 8/25/2013
这比处理查询字符串中的数组值的公认解决方案要好得多。即 arr[]=1&arr[]=2
7赞 2 revs, 2 users 95%user2579312 #53

我使用以下代码(JavaScript)来获取通过URL传递的内容:

function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                vars[key] = value;
            });
            return vars;
        }

然后要将值分配给变量,您只需要指定要获取的参数,即 URL 是否为example.com/?I=1&p=2&f=3

您可以执行此操作以获取值:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

则值为:

getI = 1, getP = 2 and getF = 3

评论

1赞 Rup 9/9/2013
这很整洁,尽管它在键和值上丢失,而且您可能不需要正则表达式上的标志(这并不重要)。decodeURIComponenti
1赞 JoshYates1980 6/8/2017
但是如果你有 example.com/3(MVC 路由)怎么办
4赞 BlueMark #54

有许多解决方案可以检索 URI 查询值,我更喜欢这个,因为它很短且效果很好:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

评论

0赞 Rup 9/9/2013
这很整洁,尽管这基本上是最被接受的答案,例如,您已经失去了对值中空格加号的解码。但是,密钥名称是新的,一方面比考虑密钥中的编码的公认答案更正确,但另一方面仍然会错过非最小编码,例如 不匹配。encodeURIComponentget("key")?k%65y=value
4赞 2 revs, 2 users 96%Ankit_Shah55 #55

这是获取参数值(查询字符串)的非常简单的方法

使用函数检索其值gV(para_name)

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}
27赞 Mat Ryer #56

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

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

或获得全部:

var params = Arg.all();

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

评论

0赞 Dilip Rajkumar 2/4/2014
你救了我,伙计。arg.js 是解决方案 没有一个解决方案是从 # 获取值 在 IE 8..:( 任何一个搜索 IE8 # 从请求中获取 这是解决方案。
5赞 2 revs, 2 users 75%acjay #57

如果您有下划线.jslodash,则完成此操作的快速而肮脏的方法是:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));

评论

0赞 Rup 11/20/2013
整洁。虽然与顶部基于拆分的答案相比,您缺少对 +s 和 decodeURIComponent 调用的处理,但对于简单的值,这就足够了。
0赞 acjay 11/21/2013
是的,它实际上只是为了获取简单的字母数字标记。在当前的项目中,这就是我所需要的,所以我真的不想要一个笨重的功能。
1赞 David Fregoli 1/7/2014
这是我用来制作查询参数的键值对象的方法:_.chain(document.location.search.slice(1).split('&')).invoke('split', '=').object().value()
263赞 27 revs, 4 users 85%Qwerty #58

tl;博士

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

// using ES5   (200 characters)
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)})

// as a function with reduce
function getQueryParams() {
  return location.search
    ? location.search.substr(1).split`&`.reduce((qd, item) => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v); return qd}, {})
    : {}
}

多行:

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 解构赋值, 箭头函数模板字符串
####Example:

"?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。搜索|哈希)

最简单的(虚拟)解决方案

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

####Example:

"?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”。解决方案在于 ['&&'][5] 的简单用法,它确保不会对未定义的值调用 'decodeURIComponent()'。_(请参阅顶部的“完整解决方案”。_
如果查询字符串为空 ('location.search == “”'),则结果有点误导 'qd == {“”: undefined}'。建议在启动解析函数之前检查查询字符串,如下所示:
v = v && decodeURIComponent(v);
if (location.search) location.search.substr(1).split("&").forEach(...)
2赞 4 revs, 3 users 57%Seth Holladay #59

可靠地做到这一点比人们最初想象的要复杂得多。

  1. location.search,用于其他答案,很脆弱,应该避免 - 例如,如果有人搞砸了并在字符串之前放置标识符,它会返回空。#fragment?query
  2. 在我看来,有很多方法可以在浏览器中自动转义 URL,这几乎是强制性的。decodeURIComponent
  3. 许多查询字符串都是从用户输入生成的,这意味着对 URL 内容的假设非常糟糕。包括非常基本的东西,比如每个键都是唯一的,甚至有一个值。

为了解决这个问题,这里有一个可配置的 API,其中包含健康的防御性编程。请注意,如果您愿意对某些变量进行硬编码,或者如果输入永远不能包含 ,等等,则可以将其大小减半。hasOwnProperty

版本1:返回一个数据对象,其中包含每个参数的名称和值。它有效地删除了重复数据,并始终尊重从左到右找到的第一个。

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

版本2:返回一个数据映射对象,该对象具有两个相同长度的数组,一个用于名称,一个用于值,每个参数都有一个索引。这个支持重复的名称,并且故意不删除重复名称,因为这可能就是您想要使用这种格式的原因。

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
          url = location.href; // more robust than location.search, which is flaky
    }
        if (!paramKey || typeof paramKey !== 'string') {
            paramKey = '&';
        }
        if (!pairKey || typeof pairKey !== 'string') {
            pairKey = '=';
        }
        // when you do not explicitly tell the API...
        if (arguments.length < 5) {
            // it will unescape parameter keys and values by default...
            decode = true;
        }

        queryStart = url.indexOf('?');
        if (queryStart >= 0) {
            // grab everything after the very first ? question mark...
            query = url.substring(queryStart + 1);
        } else {
            // assume the input is already parameter data...
            query = url;
        }
        // remove fragment identifiers...
        fragStart = query.indexOf('#');
        if (fragStart >= 0) {
            // remove everything after the first # hash mark...
            query = query.substring(0, fragStart);
        }
        // make sure at this point we have enough material to do something useful...
        if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
            // we no longer need the whole query, so get the parameters...
            query = query.split(paramKey);
            result = {
                names: [],
                values: []
            };
            // loop through the parameters...
            for (i = 0, len = query.length; i < len; i = i + 1) {
                pairKeyStart = query[i].indexOf(pairKey);
                if (pairKeyStart >= 0) {
                    name = query[i].substring(0, pairKeyStart);
                } else {
                    name = query[i];
                }
                // only continue for non-empty names...
                if (name) {
                    if (decode) {
                        // unescape characters with special meaning like ? and #
                        name = decodeURIComponent(name);
                    }
                    if (pairKeyStart >= 0) {
                        value = query[i].substring(pairKeyStart + 1);
                        if (value) {
                            if (decode) {
                                value = decodeURIComponent(value);
                            }
                        } else {
                            value = missingValue;
                        }
                    } else {
                        value = missingValue;
                    }
                    result.names.push(name);
                    result.values.push(value);
                }
           }
           return result;
       }
   }

评论

2赞 Rup 1/17/2014
很整洁,尽管这里的大多数答案都涉及将查询部分拆分为参数,而不是从任意 URL 中提取它。他们中的大多数假设我们在当前页面上,因此只需用于获取您正在提取的字符串。location.search
0赞 Donatello 9/18/2014
这不是问题的重点,我们需要将每对查询参数提取为键/值,支持数组、空值等。顺便说一句,“?hello#haha”不是一个好的行为,因为 #haha 通常会回复一个锚点,而锚点不是参数“hello”的一部分
1赞 Seth Holladay 10/11/2014
我把这个非常简短而模糊的问题理解为与其他人截然不同的东西。现在对我来说很明显是什么意思了,我已经更新了我的答案,包括一个明显更好的设计,可以与之媲美。
2赞 4 revsPithikos #60

这将解析 URL 字符串中的变量数组。它既不使用正则表达式,也不使用任何外部库。

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

例:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

输出:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"
1赞 2 revs, 2 users 86%sonorita #61

这将起作用......您需要在需要通过传递其名称来获取参数的地方调用此函数...

function getParameterByName(name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  alert(results[1]);
  if (results == null)
    return "";
  else
    return results[1];
}

评论

1赞 Rup 1/22/2014
这与顶部正则表达式答案几乎相同,只是您匹配的是整个 URL,而不仅仅是查询字符串部分,并且您没有删除结果中的转义符。
10赞 2 revs, 2 users 86%cocco #62

获取所有查询字符串参数,包括复选框值(数组)。

考虑到GET参数的正确和正常使用,我看到它缺少的东西,在大多数函数上,是对数组的支持和删除哈希数据。

所以我写了这个函数:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

使用速记运算符&while-循环,性能应该很好。

支持:

  1. 空值 (key= / key)
  2. 键值 (key=value)
  3. 数组 (key[]=value)
  4. 哈希(哈希标签被拆分出来)

笔记:

它不支持对象数组 (key[key]=value)

如果空格为 +,则保持 +。

如果需要,请添加。.replace(/\+/g, " ")

用法:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

返回:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

演示:

http://jsfiddle.net/ZQMrt/1/

信息

如果您不明白某些内容或无法阅读该功能,请询问。我很高兴在这里解释我做了什么。

如果你认为这个函数是不可读和不可维护的,我很乐意为你重写这个函数,但考虑到速记和按位运算符总是比标准语法快(也许在ECMA-262书中阅读速记和按位运算符,或者使用你最喜欢的搜索引擎)。以标准可读语法重写代码意味着性能损失。

评论

0赞 Rup 1/27/2014
非常简洁,尽管我发现很难相信预先缩小它实际上除了第一次解析之外没有任何帮助,或者如果人们无论如何都要缩小他们的生产代码,那么通常会有所帮助。这里的大多数函数都不需要剥离哈希部分,因为它们以不包含哈希部分开头。我也不清楚你的“按位运算符”是什么意思 - 你在几个地方使用了 empty-or-undefined-is-false,这与你得到的一样接近,但这里没有位操作。location.search
0赞 Alex 7/27/2015
如果对多个复选框值使用数组,请添加: if ( v.charAt(0) == '[' ) { v = v.replace('[', '[“').replace(']', '”]').replace(',', '“,”“);v = JSON && JSON.parse(v) ||$.parseJSON(v);} 在“c[k]?typeof ...”
0赞 brauliobo 9/20/2019
我需要一个支持对象数组
4赞 3 revs, 2 users 77%Sai #63

使用纯 JavaScript 和正则表达式的简单解决方案:

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

Js小提琴

2赞 4 revs, 2 users 98%Dorian #64

这对我不起作用,我想在参数存在时匹配,而不是作为参数匹配,这是我的解决方案?bb?returnr

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};

评论

0赞 Rup 2/14/2014
对于这些问题,这里的哪个答案对您不起作用?(这值得对答案本身发表评论,我也有兴趣知道。至于您的解决方案,看起来它只是一个使用下划线.js的字符串拆分解决方案?你可能错过了一个电话。decodeURIComponent
0赞 Dorian 2/14/2014
不错的收获,我添加了(以及它的规格)。投票最多的答案(2600 分的快乐答案)没有按预期工作:不返回未找到的参数,例如不检测当前参数。decodeURIComponentnull?b
2赞 filip #65

就大小而言,获取查询对象的最短表达式似乎是:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

您可以使用该元素将字符串中的 URI 解析为类似其 -like 的组件(例如,要摆脱 ):Alocation#...

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
1赞 2 revs, 2 users 76%Shlomi Hassid #66

快速、简单、快速:

功能:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

用法:

var varRequest = getUrlVar()["theUrlVarName"];

评论

0赞 Rup 4/14/2014
这与第四个答案类似,尽管转义较少,而且您不会像那样只接受参数(尽管您不再看到它们了)。我不确定您是否需要正则表达式选项,并且您正在处理整个 href,而不仅仅是看起来很奇怪但应该没有区别的搜索部分。?keyi
0赞 Shlomi Hassid 4/14/2014
@Rup 嗨,谢谢你的评论 - 我看不出相似之处......他使用哪个会很好用,但是如果我们尝试使用重音字符 - 在某些情况下它会失败(主要是 FF) 如您所见,我的答案简单快捷,适合大多数需要快速解决方案的程序员查询字符串变量提取。添加 i(不区分大小写)更灵活一些,但可以删除,我同意。decodeURIComponent
10赞 2 revsGeorge #67

对于那些想要简短方法(有限制)的人:

location.search.split('myParameter=')[1]

评论

4赞 Rup 4/14/2014
对于一般情况来说,这还不够:它假设 1) 你只对单个参数感兴趣 2) 保证它是行中的最后一个参数(即你可以保证所有浏览器都会把它放在最后,或者它是页面上唯一的参数,并且你不会将 URL 放在 RSS 提要聚合器中,在那里它可能会添加 utm 参数)和 3) 那里值中没有可以转义以进行传输的字符,例如空格或许多符号。
2赞 George 4/14/2014
没有一种尺寸适合所有方法。如果你在一条短线中有一个完美的解决方案,我会全力以赴地检查一下。以上是一个快速解决方案,不是针对一般情况,而是针对那些想要轻量级和快速解决方案的静态实现的编码人员。无论如何,感谢您的评论。
2赞 Anurag 8/1/2014
(location.search.split('myParameter=')[1]).split('&')[0] ;在具有多个参数的情况下,这将为您提供相同的结果。仍然只对静态实现有用。
2赞 3 revs, 2 users 97%krisrak #68

以下是原型实现:String

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

调用示例:

var status = str.getParam("status")

str可以是查询字符串或 URL

评论

0赞 Rup 4/19/2014
不过,这与顶部答案基本相同,少了一些无法转义的内容,只需放在 String.prototype 上即可。
0赞 krisrak 4/19/2014
@Rup 这对于解析任何字符串查询很有用,而不仅仅是在 URL 中。例如,Oauth2 将令牌响应作为查询字符串返回,此 String 原型对于解析很有用,最重要的是而不是在 RegExp 中,用于解析带有换行符的查询字符串[\\?&]*[\\?&]
34赞 8 revs, 2 users 99%Campbeln #69

这是 Andy E 链接的“处理数组样式查询字符串”版本的扩展版本。修复了一个错误 (; 丢失并替换为 ),进行了一些小的性能改进(重新解码值、重新计算“[”位置等),并添加了许多改进(功能化、支持 、 支持分隔符)。我把变量留得很短,但添加了大量的注释以使其可读(哦,我在本地函数中重复使用,如果这会;)混淆,对不起。?key=1&key[]=2&key[]=31[2,3]?key=1&key=2;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"
}

正如你在上面看到的,这个版本处理了一些“格式错误”数组,即 - 或者当键是可识别和有效的(至少在 dotNet 的 NameValueCollection.Add 中):person=neek&person[]=jeff&person[]=jimperson=neek&person=jeff&person=jim

如果目标 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;
};

评论

0赞 Mike Clark 2/3/2015
若要获取查询字符串值,可以使用此“GetParameterValues”函数。在这种情况下,您只需要传递查询 stirng 参数名称,它就会返回值 $(document).ready(function () { var bid = GetParameterValues('token');function GetParameterValues(param) { var url = decodeURIComponent(window.location.href); url = url.slice(url.indexOf('?') + 1).split('&'); for (var i = 0; i < url.length; i++) { var urlparam = url[i].split('='); if (urlparam[0] == param) { return urlparam[1]; } }
1赞 Vladislav Dimitrov 7/27/2017
我已经使用它一段时间了,到目前为止它很棒。除了处理 urlencoded 数组。使用也有助于它做到这一点。q = decodeURIComponent(window.location.search.substring(1)),
0赞 kofifus 12/17/2020
对我来说,如果没有查询参数,这将无休止地循环:(
13赞 15 revs, 2 users 82%Vladimir Kornea #70

这是我正在使用的:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: http://stackoverflow.com/a/23946023/2407309
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

在最后一种情况下返回 'override' 而不是 '0' 使其与 PHP 一致。在 IE7 中工作。

评论

1赞 Rup 6/2/2014
这是因为每个人似乎对处理没有值的键或通过构建值数组等处理重复的键都有不同的要求。已经有很多分裂的答案,但我没有看到一个与这个完全相同的答案,真的。(FWIW 我认为需要过于技术化,尽管我怀疑有人会使用非平凡的参数。paramNamedecodeURIComponent
1赞 Val Kornea 11/18/2014
参数名称永远不需要解码。
2赞 Rup 11/18/2014
为什么不呢?HTML 5 不限制输入控件名称的字符集,也不能保证它们来自 HTML。我不明白为什么对可打印字符有限制。
1赞 Sudar 4/1/2015
解决方案很好,但为什么语句末尾没有分号呢?
2赞 Val Kornea 4/1/2015
@Sudar 因为没有理由拥有它们。大多数人总是包括它们,只是因为他们总是看到其他人包括它们,并且因为其他语言需要它们;它们通常也被错误地认为是 JavaScript 中必需的,这有时会导致令人困惑的问题。无缘无故做事通常具有误导性;JavaScript 不是 C++ 或 PHP。㚧。defensive semicolon
3赞 2 revsDamien #71

最漂亮但最基本的:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

它不处理值列表,例如?a[]=1&a[]2

评论

0赞 Rup 6/6/2014
整洁!您可能需要从第一项中删除前导“?”(我不知道这是否总是必要的,但这里的许多答案都是如此),并且您还需要对值执行一些转义(加号到空格)decodeURIComponent
0赞 Damien 6/6/2014
谢谢你,绝对,当 location.search 为空时,我们还需要一个 .filter(Boolean) 来删除列表中的空字符串项。那是:location.search.substr(1).split('&').filter(Boolean).map(...
0赞 Damien 6/6/2014
反之亦然:来自返回的哈希图的查询字符串:$.map(queryhash, function(v,k){ return [k,v].join('=')}).join('&')
0赞 2 revs, 2 users 83%Konstantin Tarkus #72
// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

评论

0赞 hackel 8/24/2017
呃,哈希 != 查询字符串。
1赞 2 revsPeter T Bosse II #73

此函数将返回一个解析的 JavaScript 对象,其中包含任何任意嵌套的值,必要时使用递归。

下面是一个 jsfiddle 示例。

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

给定上述任何测试示例。

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};

评论

3赞 Rup 7/1/2014
看起来总体上不错,但为什么要预先缩小它呢?在原样的地方遵循是很棘手的;特别是,你在右边方括号线周围做了一些令人讨厌的事情。此外,类似的东西会使它崩溃。c[xx=a&c[]=b
0赞 Peter T Bosse II 5/5/2016
我的意图不是预先缩小它,而我只是在命名变量方面很糟糕,所以我没有试图想出更好的名称。我重新编写了代码以适应您的示例输入并做出适当的响应。我还改用正则表达式而不是尝试对字符串进行切片(正如您指出的那样,这并不总是有效)。