是否有一种通过jQuery（或不使用）检索查询字符串值的无插件方法？
如果是，怎么办？如果没有，是否有插件可以这样做？
如果您使用的是jQuery，那么可以使用一个库，例如jQueryBBQ：返回按钮和查询库。
…jQueryBBQ提供了一个完整的.depam（）方法，以及哈希状态管理、片段/查询字符串解析和合并实用程序方法。
编辑：添加参数示例：
var DeparamExample=函数（）{var params=$.depam.querystring（）；//nameofram是来自url的参数的名称//如果ajax使用哈希刷新，下面的代码将获取参数if（typeof params.nameofram==“undefined”）{params=jQuery.departam.frage（window.location.href）；}if（typeof params.nameofram！=“undefined”）{var paramValue=params.nameofram.toString（）；}};
如果您只想使用纯JavaScript，可以使用。。。
var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();
由于新的HTML历史API，特别是History.pushState（）和History.replaceState（），URL可能会发生更改，这将使参数及其值的缓存无效。
此版本将在每次更改历史记录时更新其内部参数缓存。
更新：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)
注意：如果参数出现多次（？foo=lorem&foo=ipsum），您将获得第一个值（lorem）。关于这一点没有标准，用法也各不相同，请参见例如这个问题：重复HTTPGET查询键的权威位置。
注意：该函数区分大小写。如果您喜欢不区分大小写的参数名，请在RegExp中添加“i”修饰符
注意：如果您得到了一个无无用转义esint错误，可以替换name=name.replace（/[\[\]]/g，'\\$&'）；其中name=name。replace（/[[\]]/g，'\\$&'）。
这是基于新URLSearchParams规范的更新，以更简洁地实现相同的结果。请参阅下面标题为“URLSearchParams”的答案。
snipplr.com上的Roshambo有一个简单的脚本来实现这一点，这在使用jQuery|Improved获取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参数和值。
这里发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全不必要的，一个函数将参数拆分为关联数组样式对象就足够了。如果您不使用HTML5历史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中没有定义数组样式参数，所以我不会用源代码污染这个答案。对于那些对“污染”版本感兴趣的人，请看下面坎贝尔的答案。
此外，正如评论中指出的；是key=value对的合法分隔符。它需要更复杂的正则表达式来处理；或&，我认为这是不必要的，因为这很少见；我想说，更不可能两者都使用。如果您需要支持；而不是&，只是在正则表达式中交换它们。
If you're using a server-side preprocessing language, you might want to use its native JSON functions to do the heavy lifting for you. For example, in PHP you can write:
<script>var urlParams = <?php echo json_encode($_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]);
}
}
})();
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
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)
Google方法
撕扯谷歌的代码，我找到了他们使用的方法：getUrlParameters
function (b) {
var c = typeof b === "undefined";
if (a !== h && c) return a;
for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
var l = b[f][p]("=");
if (l !== -1) {
var q = b[f][I](0, l),
l = b[f][I](l + 1),
l = l[Ca](/\+/g, " ");
try {
d[q] = e(l)
} catch (A) {}
}
}
c && (a = d);
return d
}
这是模糊的，但可以理解。它无法工作，因为某些变量未定义。
他们开始在url上查找参数？并且还从散列#中。然后，对于每个参数，它们以等号b[f][p]（“=”）分割（看起来像indexOf，它们使用字符的位置来获取键/值）。拆分后，他们检查参数是否有值，如果有值，则存储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¶m2=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"];
Regex测试代码
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中测试
拆分方法：最快144780±2.17%Regex方法：13891±0.85%|90%慢
下面是我将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');
两全其美！
这是我在GitHub上的查询字符串解析代码版本。
它的前缀是jquery.*，但解析函数本身不使用jquery。它非常快，但仍然可以进行一些简单的性能优化。
它还支持URL中的列表和哈希表编码，例如：
arr[]=10&arr[]=20&arr[]=100
or
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;
}
代码高尔夫：
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=cheezburg显示屏
0:can
1:cheezburger
i:can
has:cheezburger
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;
}
这是我不久前创建的一个函数，我对此很满意。它不区分大小写-这很方便。此外，如果请求的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);
}
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/
我经常使用正则表达式，但并非如此。
在我的应用程序中读取一次查询字符串，并从所有键/值对构建一个对象，对我来说似乎更容易、更有效，比如：
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¶m2=val2您可以稍后在代码中以search.param1和search.param2的形式获取它们的值。
只是另一个建议。插件Purl允许检索URL的所有部分，包括锚点、主机等。
它可以与jQuery一起使用，也可以不使用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插件的不同之处在于它关注元素-对于字符串使用，只需直接使用URI，无论是否使用jQuery。类似的代码看起来是这样的，更完整的文档如下：
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'
我宁愿使用split（）而不是Regex执行此操作：
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;
}
我接受了这个答案，并添加了对可选地将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);
这是我对这个优秀答案的编辑——增加了解析带有键而没有值的查询字符串的能力。
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。
那么到底发生了什么变化？使用urlhttp://sb.com/reg/step1?param=结果是一样的。但使用urlhttp://sb.com/reg/step1?paramBruno的解决方案返回一个没有键的对象，而我的解决方案则返回一个带有键参数和未定义值的对象。
以下代码将创建一个具有两个方法的对象：
isKeyExist:检查是否存在特定参数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;
}
};
试试看：
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。。。将其移动到函数并将字符串作为参数传递
我喜欢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库。有关此功能的更多信息，请访问我的博客。
function getUrlVar(key){
var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);
return result && unescape(result[1]) || "";
}
https://gist.github.com/1771618
在简单的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');
如果您要做的URL操作比简单地解析查询字符串更多，那么您可能会发现URI.js很有用。它是一个用于操作URL的库，并且附带了所有的提示。（很抱歉在这里自我宣传）
要将查询字符串转换为映射，请执行以下操作：
var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
"foo": ["bar", "world"],
"bar": "baz"
}
（URI.js还“修复”了错误的查询字符串，如？&foo&&bar=baz&to？foo&bar=baz）
这是我自己的看法。第一个函数将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;
};
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
常规键/值对（？param=值）不带值的键（？param：无等号或值）键w/空值（？param=：等号，但等号右侧没有值）重复键（？param=1¶m=2）删除空键（？&&：无键或值）
代码：
var queryString=window.location.search | |“”；var keyValPairs=[]；var参数＝｛｝；queryString=queryString.substr（1）；if（queryString.length）{keyValPairs=queryString.split（'&'）；for（keyValPairs中的pairNum）{var key=keyValPairs[pairNum].split（'='）[0]；如果（！key.length）继续；if（typeof params[key]==“undefined”）params[key]=[]；params[key].push（keyValPairs[pairNum].split（'='）[1]）；}}
如何呼叫：
params['key']；//返回值数组（1..n）
输出：
键[“value”]关键字空值[“”]注释记号[未定义，“nowhasvalue”]
这个很好用。其他一些答案中的正则表达式引入了不必要的开销。
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];
}
}
}
从这里取的
以下函数返回queryString的对象版本。您可以简单地编写obj.key1和obj.key2来访问参数中key1和key2的值。
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);
我喜欢这个（摘自jqueryhowto.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;
}
对我来说很棒。
URL搜索参数
Firefox 44+、Opera 36+、Edge 17+、Safari 10.3+和Chrome 49+支持URLSearchParams API：
Chrome公告和详细信息歌剧院公告和详情Firefox公告和详细信息
谷歌建议URLSearchParams polyfill用于IE的稳定版本。
它没有被W3C标准化，但它是WhatWG的生活标准。
您可以在以下位置使用它：
const params = new URLSearchParams(location.search);
or
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"
通过get（KEY）、set（KEY，VALUE）、append（KEY，VAL）API读取/设置参数。您还可以遍历（let p of params）｛｝的所有值。
参考实现和示例页面可用于审计和测试。
下面是一种快速获取类似于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"
}
只需使用两个拆分：
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的反案，这就赢了。否则，使用正则表达式。
或者，如果您可以控制查询字符串，并且可以保证您试图获取的值永远不会包含任何URL编码字符（在值中包含这些字符是个坏主意）-您可以使用以下是第一个选项的略为简化和可读的版本：函数getQueryStringValueByName（名称）{var queryStringFromStartOfValue=位置.search.split（名称+“=”）[1]；返回queryStringFromStartOfValue！==未定义？queryStringFromStartOfValue.split（“&”）[0]：null；
这些都是很好的答案，但我需要一些更强大的东西，我想你们可能都想拥有我创造的东西。
这是一种简单的库方法，可以对URL参数进行剖析和操作。静态方法有以下子方法，可以在主题URL上调用：
获取主机获取路径获取哈希setHash获取参数获取查询setParam（设置参数）获取参数hasParamremoveParam（删除参数）
例子：
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>');
此函数将查询字符串转换为类似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;
}
我们对参数[1]执行未定义检查，因为如果变量未定义，decodeURIComponent将返回字符串“undefined”，这是错误的。
用法：
"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");
这里有一个很好的小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
获取查询的一行代码：
var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
这是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
我使用这里列出的技术开发了一个小型库，以创建一个易于使用的解决方案；可以在这里找到：
https://github.com/Nijikokun/query-js
用法
正在获取特定参数/密钥：
query.get('param');
使用生成器获取整个对象：
var storage = query.build();
console.log(storage.param);
还有很多。。。查看github链接以获取更多示例。
特征
解码和参数缓存支持哈希查询字符串#hello？第3页支持传递自定义查询支持数组/对象参数user[]=“jim”&user[]=”bob“支持空管理&&支持不带值的声明参数name&hello=“world”支持重复参数param=1¶m=2干净、紧凑、可读的源4kbAMD，需要，节点支持
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');
从MDN：
function loadPageVar (sVar) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
alert(loadPageVar("name"));
我需要查询字符串中的一个对象，我讨厌很多代码。它可能不是世界上最健壮的，但它只是几行代码。
var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
q[i.split('=')[0]]=i.split('=')[1];
});
像这样的URL.htm？hello=world&foo=bar将创建：
{hello:'world', foo:'bar'}
我认为这是实现这一点的准确和简洁的方法（修改自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.
}
非常轻量级的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)
如果需要数组样式参数，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'
}
关于这个问题的顶级答案的问题是，不支持在#后面放置参数，但有时也需要获得这个值。
我修改了答案，让它解析带有哈希符号的完整查询字符串：
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;
};
我在这里做了一个小的URL库来满足我的需求：https://github.com/Mikhus/jsurl
这是一种在JavaScript中操纵URL的更常见的方法。同时，它非常轻量级（缩小和gzip＜1KB），并且具有非常简单和干净的API。而且它不需要任何其他库来工作。
关于最初的问题，很简单：
var u = new Url; // Current document URL
// or
var u = new Url('http://user:pass@example.com: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);
如果您使用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"
如果您不想使用JavaScript库，可以使用JavaScript字符串函数来解析window.location。将此代码保存在外部.js文件中，您可以在不同的项目中反复使用它。
// 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;
}
查看此帖子或使用此：
<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>
我推荐Dar Lessons作为一个很好的插件。我用它工作了很长时间。您也可以使用以下代码。Just put var queryObj={}；在document.ready之前，将下面的代码放在document.read的开头。在这段代码之后，您可以对任何查询对象使用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;
}
Use:
$(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;
}
请检查并让我知道您的意见。另请参阅How to get querystring value using jQuery。
Node.js的源代码中有一个健壮的实现https://github.com/joyent/node/blob/master/lib/querystring.js
TJ的qs也执行嵌套参数解析https://github.com/visionmedia/node-querystring
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;
};
我使用以下代码（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
有很多方法可以检索URI查询值，我更喜欢这个方法，因为它很短，而且效果很好：
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
这是获取参数值（查询字符串）的非常简单的方法
使用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)}
我们刚刚发布了arg.js，这是一个旨在一劳永逸地解决这个问题的项目。传统上很难，但现在你可以做到：
var name = Arg.get("name");
或者得到全部：
var params = Arg.all();
如果你在乎两者之间的区别？query=true和#hash=true，则可以使用Arg.query（）和Arg.hash（）方法。
如果您有Undercore.js或lodash，一种快速而肮脏的方法是：
_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));
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
})
这是什么代码。。。“零合并”，短路评估ES6解构赋值、箭头函数、模板字符串####示例：
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
> qd.a[1] // "5"
> qd["a"][1] // "5"
阅读更多。。。关于Vanilla JavaScript解决方案。
要访问URL的不同部分，请使用位置。（搜索|哈希）
最简单（虚拟）解决方案
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
多值键
简单的密钥检查（字典中的项目）？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"]
# From comments **\*!!!** Please note, that `decodeURIComponent(undefined)` returns string `"undefined"`. The solution lies in a simple usage of [`&&`][5], which ensures that `decodeURIComponent()` is not called on undefined values. _(See the "complete solution" at the top.)_
v = v && decodeURIComponent(v);
If the querystring is empty (`location.search == ""`), the result is somewhat misleading `qd == {"": undefined}`. It is suggested to check the querystring before launching the parsing function likeso:
if (location.search) location.search.substr(1).split("&").forEach(...)
可靠地做这件事比一开始想象的要复杂得多。
其他答案中使用的location.search很脆弱，应该避免使用-例如，如果有人搞砸了，并在？查询字符串。在我看来，URL在浏览器中自动转义的方式有很多种，这使得decodeURIComponent非常强制性。许多查询字符串是由用户输入生成的，这意味着对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;
}
}
这将从URL字符串中解析变量AND数组。它既不使用正则表达式，也不使用任何外部库。
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"
这会奏效的。。。您需要在需要通过传递其名称来获取参数的地方调用此函数。。。
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];
}
获取所有querystring参数，包括复选框值（数组）。
考虑到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--loop，性能应该非常好。
支持：
空值（key=/key）键值（Key=value）数组（键[]=值）哈希（哈希标签被拆分）
笔记：
它不支持对象数组（key[key]=value）
如果空格为+，则保留为+。
如果需要，添加替换（/\+/g，“”）。
用法：
qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')
返回：
{
"empty": "",
"key": "value",
"array": [
"1",
"2"
]
}
演示：
http://jsfiddle.net/ZQMrt/1/
Info
如果你不明白什么，或者你读不懂函数，就问问。我很高兴解释我在这里做了什么。
如果您认为该函数不可读且无法维护，我很乐意为您重写该函数，但请考虑速记和按位运算符总是比标准语法更快（可能在ECMA-262书中阅读有关速记和按位数运算符的信息，或使用您最爱的搜索引擎）。用标准可读语法重写代码意味着性能损失。
使用纯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投标
这对我不起作用，我想匹配吗？b，因为b参数存在，并且不匹配？返回r参数，这是我的解决方案。
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;
}
};
就获取查询对象的大小而言，最短的表达式似乎是：
var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });
您可以使用A元素将URI从字符串解析到其位置，如组件（例如，去掉#…）：
var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above
快速、轻松、快速：
功能：
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"];
下面是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
这是Andy E链接的“句柄数组样式查询字符串”版本的扩展版本。修复了一个错误（？key=1&key[]=2&key[]＝3；1丢失并替换为[2,3]），进行了一些小的性能改进（重新解码值，重新计算“[”位置等），并添加了一些改进（功能化，支持？key=1&key=2，支持；分隔符）。我将变量留得很短，但添加了大量注释以使其可读（哦，我在本地函数中重用了v，如果这令人困惑，很抱歉；）。
它将处理以下查询字符串。。。
?test=Hello&pers=neek&pers[]=jeff&pers[][]=jim&pers[extra]=john&test3&nocache=13989148914891264
…把它做成一个看起来像。。。
{
"test": "Hello",
"person": {
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
},
"test3": "",
"nocache": "1398914891264"
}
如上所述，此版本处理一些“格式错误”数组，即-person=neek&person[]=jeff&person[]=jim或person=neek/person=jeff/person=jim，因为密钥是可识别的和有效的（至少在dotNet的NameValueCollection.Add中）：
如果目标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;
};
以下是我正在使用的：
/**
* 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中工作。
最漂亮但最基本的：
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
// 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]);
}
此函数将根据需要使用递归返回已解析的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;
};
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
- Access-Control-Allow-Origin不允许Origin < Origin >
