是否有一种无插件的方式通过jQuery(或没有)检索查询字符串值?
如果是这样,怎么样?如果没有,是否有插件可以这样做?
更新:2018年9月
您可以使用简单且具有良好浏览器支持的 URLSearchParams .
const urlParams = new URLSearchParams(window.location.search); const myParam = urlParams.get('myParam');
一部开拓创新
你不需要为此目的使用jQuery.您只能使用一些纯JavaScript:
function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); }
用法:
// query string: ?foo=lorem&bar=&baz var foo = getParameterByName('foo'); // "lorem" var bar = getParameterByName('bar'); // "" (present with empty value) var baz = getParameterByName('baz'); // "" (present with no value) var qux = getParameterByName('qux'); // null (absent)
注意:如果参数多次出现(?foo=lorem&foo=ipsum
),您将获得第一个值(lorem
).没有关于此的标准和用法不同,请参阅此问题:重复HTTP GET查询键的权威位置.
注意:该功能区分大小写.如果您更喜欢不区分大小写的参数名称,请将"i"修饰符添加到RegExp
这是基于新的URLSearchParams规范的更新,以更简洁地实现相同的结果.请参阅下面标题为" URLSearchParams "的答案.
这里发布的一些解决方案效率低下.每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的,将参数拆分成关联数组样式对象的单个函数就足够了.如果您不使用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
.它需要一个更复杂的正则表达式来处理,;
或者&
我认为这是不必要的,因为它很少;
被使用,我想说两者都更不可能被使用.如果你需要支持;
而不是&
,只需在正则表达式中交换它们.
更简单!
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; }, {} ) : {} };
var qs = (function(a) { if (a == "") return {}; var b = {}; for (var i = 0; i < a.length; ++i) { var p=a[i].split('=', 2); if (p.length == 1) b[p[0]] = ""; else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); } return b; })(window.location.search.substr(1).split('&'));
使用URL ?topic=123&name=query+string
,以下内容将返回:
qs["topic"]; // 123 qs["name"]; // query string qs["nothere"]; // undefined (object)
撕毁谷歌的代码,我找到了他们使用的方法: getUrlParameters
function (b) { var c = typeof b === "undefined"; if (a !== h && c) return a; for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) { var l = b[f][p]("="); if (l !== -1) { var q = b[f][I](0, l), l = b[f][I](l + 1), l = l[Ca](/\+/g, " "); try { d[q] = e(l) } catch (A) {} } } c && (a = d); return d }
它是混淆的,但它是可以理解的.它不起作用,因为某些变量未定义.
他们开始在网址上查找参数?
,也从哈希中查找参数#
.然后对于每个参数,它们以等号分割b[f][p]("=")
(看起来indexOf
,它们使用char的位置来获得键/值).将它拆分后,检查参数是否有值,如果有,则存储值d
,否则只是继续.
最后d
返回对象,处理转义和+
符号.这个对象就像我的一样,它具有相同的行为.
我的方法作为jQuery插件
(function($) { $.QueryString = (function(paramsArray) { let params = {}; for (let i = 0; i < paramsArray.length; ++i) { let param = paramsArray[i] .split('=', 2); if (param.length !== 2) continue; params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " ")); } return params; })(window.location.search.substr(1).split('&')) })(jQuery);
用法
//Get a param $.QueryString.param //-or- $.QueryString["param"] //This outputs something like... //"val" //Get all params as object $.QueryString //This outputs something like... //Object { param: "val", param2: "val" } //Set a param (only in the $.QueryString object, doesn't affect the browser's querystring) $.QueryString.param = "newvalue" //This doesn't output anything, it just updates the $.QueryString object //Convert object into string suitable for url a querystring (Requires jQuery) $.param($.QueryString) //This outputs something like... //"param=newvalue¶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));
准备代码:方法声明
var qs = window.GetQueryString(query); var search = qs["q"]; var value = qs["value"]; var undef = qs["undefinedstring"];
var search = window.getParameterByName("q"); var value = window.getParameterByName("value"); var undef = window.getParameterByName("undefinedstring");
在Windows Server 2008 R2/7 x64上的Firefox 4.0 x86中进行测试
分割方法:最快144,780±2.17%
正则表达式方法:13,891±0.85%| 慢了90%
改进版Artem Barger的答案:
function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); }
有关改进的更多信息,请参阅:http://james.padolsey.com/javascript/bujs-1-getparameterbyname/
火狐44+,歌剧36+,边缘17+,Safari浏览器10.3+和Chrome 49+支持URLSearchParams API:
Chrome公告和详细信息
歌剧公告和细节
Firefox公告和细节
对于IE的稳定版本,有一个谷歌建议的URLSearchParams polyfill.
它没有被W3C标准化,但它是WhatWG的生活标准.
您可以在现场使用它,但是您需要删除location
问号(例如,带.searchParams
):
let params = new URLSearchParams(location.search);
要么
let params = (new URL(location)).searchParams;
或者当然在任何URL上:
let url = new URL('https://example.com?foo=1&bar=2'); let params = new URLSearchParams(url.search);
你也可以get(KEY)
在URL对象上使用简写属性来获取params ,如下所示:
let params = new URL('https://example.com?foo=1&bar=2').searchParams; params.get('foo'); // "1" params.get('bar'); // "2"
您通过读/设置参数set(KEY, VALUE)
,append(KEY, VALUE)
,for (let p of params) {}
API.您还可以迭代所有值location
.
一个参考实现和示例页面都可以审核和测试.
只是另一个建议.插件Purl允许检索URL的所有部分,包括锚点,主机等.
它可以与jQuery一起使用或不与jQuery一起使用.
用法很简单,很酷:
var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version url.attr('protocol'); // returns 'http' url.attr('path'); // returns '/folder/dir/index.html'
然而,随着2014年11月11日的,金银丝不再维护,笔者建议使用URI.js代替.jQuery插件的不同之处在于它专注于元素 - 用于字符串,只需URI
直接使用,有或没有jQuery.类似的代码将看起来像这样的,更全面的文档在这里:
var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version url.protocol(); // returns 'http' url.path(); // returns '/folder/dir/index.html'
一个快速,完整的解决方案,可处理多值密钥和编码字符.
var qd = {}; if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)}) //using ES6 (23 characters cooler) var qd = {}; if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})多行:
var qd = {}; if (location.search) location.search.substr(1).split("&").forEach(function(item) { var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); // null-coalescing / short-circuit //(k in qd) ? qd[k].push(v) : qd[k] = [v] (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit })
什么是所有这些代码......
"null-coalescing",短路评估
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"
访问URL的不同部分使用 location.(search|hash)
var queryDict = {}; location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
正确处理空键.
覆盖多键与去年发现的价值.
"?a=1&b=0&c=3&d&e&a=5" > queryDict a: "5" b: "0" c: "3" d: undefined e: undefined
简单的按键检查 (item in dict) ? dict.item.push(val) : dict.item = [val]
var qd = {}; location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})
现在返回数组.
通过qd.key[index]
或访问值qd[key][index]
> qd a: ["1", "5"] b: ["0"] c: ["3"] d: [undefined] e: [undefined]
使用decodeURIComponent()
第二个或两个分裂.
var qd = {}; location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})例:
"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab" > qd a: ["1", "5", "t e x t"] b: ["0"] c: ["3"] d: ["undefined"] // decodeURIComponent(undefined) returns "undefined" !!!* e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]
*!请注意,decodeURIComponent(undefined)
返回字符串"undefined"
.解决方案在于简单的使用&&
,确保decodeURIComponent()
不会在未定义的值上调用.(参见顶部的"完整解决方案".)
v = v && decodeURIComponent(v);
如果查询字符串为空(location.search == ""
),结果有点误导qd == {"": undefined}
.建议在启动解析函数之前检查查询字符串:
if (location.search) location.search.substr(1).split("&").forEach(...)
snipplr.com上的Roshambo有一个简单的脚本来实现在使用jQuery获取URL参数中描述的内容 改进了.使用他的脚本,您也可以轻松获得所需的参数.
这是要点:
$.urlParam = function(name, url) { if (!url) { url = window.location.href; } var results = new RegExp('[\\?&]' + name + '=([^]*)').exec(url); if (!results) { return undefined; } return results[1] || undefined; }
然后从查询字符串中获取参数.
所以,如果URL /查询字符串是xyz.com/index.html?lang=de
.
只要打电话var langval = $.urlParam('lang');
,你就明白了.
UZBEKJON也有一篇很棒的博客文章,用jQuery获取URL参数和值.
如果您使用的是jQuery,则可以使用库,例如jQuery BBQ:Back Button&Query Library.
... jQuery BBQ提供了一个完整的
.deparam()
方法,以及散列状态管理和片段/查询字符串解析和合并实用程序方法.
编辑:添加Deparam示例:
var DeparamExample = function() {
var params = $.deparam.querystring();
//nameofparam is the name of a param from url
//code below will get param if ajax refresh with hash
if (typeof params.nameofparam == 'undefined') {
params = jQuery.deparam.fragment(window.location.href);
}
if (typeof params.nameofparam != 'undefined') {
var paramValue = params.nameofparam.toString();
}
};
只需使用两个分割:
function get(n) { var half = location.search.split(n + '=')[1]; return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null; }
我正在阅读所有以前和更完整的答案.但我认为这是最简单,更快捷的方法.您可以签入此jsPerf 基准
要解决Rup评论中的问题,请通过将第一行更改为下面的两行来添加条件拆分.但绝对准确性意味着它现在比regexp慢(参见jsPerf).
function get(n) { var half = location.search.split('&' + n + '=')[1]; if (!half) half = location.search.split('?' + n + '=')[1]; return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null; }
因此,如果你知道你不会遇到Rup的反案,那就赢了.否则,regexp.
或者,如果您可以控制查询字符串并且可以保证您尝试获取的值永远不会包含任何URL编码字符(将这些字符包含在一个值中是个坏主意) - 您可以使用以下稍微更简化和可读的版本第一个选项:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
这是我将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');
两全其美!
如果您正在进行更多的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&
到?foo&bar=baz
)
我喜欢Ryan Phelan的解决方案.但我没有看到任何扩展jQuery的意义吗?没有使用jQuery功能.
另一方面,我喜欢谷歌浏览器中的内置功能:window.location.getParameter.
那么为什么不使用这个呢?好的,其他浏览器没有.所以,如果它不存在,让我们创建这个函数:
if (!window.location.getParameter ) { window.location.getParameter = function(key) { function parseParams() { var params = {}, e, a = /\+/g, // Regex for replacing addition symbol with a space r = /([^&=]+)=?([^&]*)/g, d = function (s) { return decodeURIComponent(s.replace(a, " ")); }, q = window.location.search.substring(1); while (e = r.exec(q)) params[d(e[1])] = d(e[2]); return params; } if (!this.queryStringParams) this.queryStringParams = parseParams(); return this.queryStringParams[key]; }; }
这个函数或多或少来自Ryan Phelan,但它的包装方式不同:清晰的名称和其他javascript库没有依赖关系.更多关于我的博客上的这个功能.
这是获取类似于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" }
在简单的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参数.静态方法具有以下可在主题URL上调用的子方法:
和getHost
的getPath
getHash
setHash
getParams
getQuery
setParam
getParam
hasParam
removeParam
例:
URLParser(url).getParam('myparam1')
var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something"; function URLParser(u){ var path="",query="",hash="",params; if(u.indexOf("#") > 0){ hash = u.substr(u.indexOf("#") + 1); u = u.substr(0 , u.indexOf("#")); } if(u.indexOf("?") > 0){ path = u.substr(0 , u.indexOf("?")); query = u.substr(u.indexOf("?") + 1); params= query.split('&'); }else path = u; return { getHost: function(){ var hostexp = /\/\/([\w.-]*)/; var match = hostexp.exec(path); if (match != null && match.length > 1) return match[1]; return ""; }, getPath: function(){ var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/; var match = pathexp.exec(path); if (match != null && match.length > 1) return match[1]; return ""; }, getHash: function(){ return hash; }, getParams: function(){ return params }, getQuery: function(){ return query; }, setHash: function(value){ if(query.length > 0) query = "?" + query; if(value.length > 0) query = query + "#" + value; return path + query; }, setParam: function(name, value){ if(!params){ params= new Array(); } params.push(name + '=' + value); for (var i = 0; i < params.length; i++) { if(query.length > 0) query += "&"; query += params[i]; } if(query.length > 0) query = "?" + query; if(hash.length > 0) query = query + "#" + hash; return path + query; }, getParam: function(name){ if(params){ for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); if (decodeURIComponent(pair[0]) == name) return decodeURIComponent(pair[1]); } } console.log('Query variable %s not found', name); }, hasParam: function(name){ if(params){ for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); if (decodeURIComponent(pair[0]) == name) return true; } } console.log('Query variable %s not found', name); }, removeParam: function(name){ query = ""; if(params){ var newparams = new Array(); for (var i = 0;i < params.length;i++) { var pair = params[i].split('='); if (decodeURIComponent(pair[0]) != name) newparams .push(params[i]); } params = newparams; for (var i = 0; i < params.length; i++) { if(query.length > 0) query += "&"; query += params[i]; } } if(query.length > 0) query = "?" + query; if(hash.length > 0) query = query + "#" + hash; return path + query; }, } } document.write("Host: " + URLParser(url).getHost() + '
'); document.write("Path: " + URLParser(url).getPath() + '
'); document.write("Query: " + URLParser(url).getQuery() + '
'); document.write("Hash: " + URLParser(url).getHash() + '
'); document.write("Params Array: " + URLParser(url).getParams() + '
'); document.write("Param: " + URLParser(url).getParam('myparam1') + '
'); document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '
'); document.write(url + '
'); // Remove the first parameter url = URLParser(url).removeParam('myparam1'); document.write(url + ' - Remove the first parameter
'); // Add a third parameter url = URLParser(url).setParam('myparam3',3); document.write(url + ' - Add a third parameter
'); // Remove the second parameter url = URLParser(url).removeParam('myparam2'); document.write(url + ' - Remove the second parameter
'); // Add a hash url = URLParser(url).setHash('newhash'); document.write(url + ' - Set Hash
'); // Remove the last parameter url = URLParser(url).removeParam('myparam3'); document.write(url + ' - Remove the last parameter
'); // Remove a parameter that doesn't exist url = URLParser(url).removeParam('myparam3'); document.write(url + ' - Remove a parameter that doesn\"t exist
');
来自MDN:
function loadPageVar (sVar) { return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); } alert(loadPageVar("name"));
代码高尔夫:
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] + "
"); };
在我的Mac上:test.htm?i=can&has=cheezburger
显示
0:can 1:cheezburger i:can has:cheezburger
我经常使用正则表达式,但不是那样.
在我的应用程序中读取一次查询字符串似乎更容易也更有效,并从所有键/值对构建对象,如:
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://domain.com?param1=val1¶m2=val2
你之后能得到它们的价值在你的代码search.param1
和search.param2
.
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
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; }
这是我对这个优秀答案的编辑- 增加了使用没有值的键解析查询字符串的能力.
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.
究竟是什么改变了?使用网址http://sb.com/reg/step1?param=
结果将是相同的.但是使用url http://sb.com/reg/step1?param
Bruno的解决方案返回一个没有键的对象,而我的返回一个带有键param
和undefined
值的对象.
我喜欢这个(取自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; }
对我来说很棒.
我需要查询字符串中的一个对象,我讨厌很多代码.它可能不是宇宙中最强大的,但它只是几行代码.
var q = {}; location.href.split('?')[1].split('&').forEach(function(i){ q[i.split('=')[0]]=i.split('=')[1]; });
像这样的网址this.htm?hello=world&foo=bar
会创建:
{hello:'world', foo:'bar'}
这是Andy E的链接"Handle array-style query strings"-version的扩展版本.修复了一个错误(?key=1&key[]=2&key[]=3
; 1
丢失并替换为[2,3]
),进行了一些小的性能改进(重新解码值,重新计算"["位置等)并添加了许多改进(功能化,支持?key=1&key=2
,支持;
分隔符) .我把这些变量简单地留了下来,但是添加了很多评论以使它们具有可读性(哦,我v
在本地函数中重复使用,抱歉,如果这令人困惑的话).
它将处理以下查询字符串...
?测试=您好与人= NEEK与人[] =杰夫 - 人[] =吉姆人[详细] =约翰&TEST3和非缓存= 1398914891264
......把它变成一个看似......的物体
{ "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; };
这是我前段时间创建的一个功能,我很满意.它不区分大小写 - 这很方便.此外,如果请求的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); }
关于该问题的最佳答案的问题是它是在#之后放置的不支持的参数,但有时也需要获得该值.
我修改了答案,让它解析带有井号的完整查询字符串:
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; };
我们刚刚发布了一个旨在一劳永逸地解决这个问题的项目arg.js.它传统上是如此困难,但现在你可以这样做:
var name = Arg.get("name");
或获得全部:
var params = Arg.all();
如果你关心它们之间的区别?query=true
,#hash=true
那么你可以使用Arg.query()
和Arg.hash()
方法.
function GetQueryStringParams(sParam) { var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } }?
这就是假设URL是这样你可以使用这个函数的方法
http://dummy.com/?stringtext=jquery&stringword=jquerybyexample
var tech = GetQueryStringParams('stringtext'); var blog = GetQueryStringParams('stringword');
如果您使用的是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"
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
常规键/值对(?param=value
)
?param
没有值的键(:没有等号或值)
键值为空值(?param=
:等号,但等号右边没有值)
重复键(?param=1¶m=2
)
删除空键(?&&
:无键或值)
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]); } }
params['key']; // returns an array of values (1..n)
key ["value"] keyemptyvalue [""] keynovalue [undefined, "nowhasvalue"]
单行获取查询:
var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];
我使用这里列出的技术开发了一个小型库,为任何人的问题创建一个易于使用的插入式解决方案; 在这里能找到它:
https://github.com/Nijikokun/query-js
用法
获取特定参数/键:
query.get('param');
使用构建器获取整个对象:
var storage = query.build(); console.log(storage.param);
还有更多...查看github链接了解更多示例.
特征
缓存解码和参数
支持哈希查询字符串 #hello?page=3
支持传递自定义查询
支持数组/对象参数 user[]="jim"&user[]="bob"
支持空管理 &&
支持没有值的声明参数 name&hello="world"
支持重复参数 param=1¶m=2
清洁,紧凑和可读的来源 4kb
AMD,要求,节点支持
一个非常轻量级的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)
这是我在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
36> Eneko Alonso..:我宁愿使用
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; }
37> IT ppl..:这个工作正常
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]; } } }取自这里
您可能至少想要在返回之前调用``[[[[[[[[[[[[[(((((((((((((((((((((((((((((((((((首先是空格,就像这里所有其他解决方案一样.其他一些解决方案也更喜欢在分裂`=`上限制2个部分,以便在接受输入时更宽松.
38> Vladimir Kor..:这是我正在使用的:
/** * 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在最后一种情况下返回'覆盖'而不是'0'使其与PHP一致.适用于IE7.
"令人惊讶的是,这里发布了多少过于复杂和不完整的解决方案"大笑,具有讽刺意味......
为什么不?[HTML 5](http://www.w3.org/TR/html5/forms.html#naming-form-controls:-the-name-attribute)不限制输入控件名称的字符集,也不限制无论如何,它们都保证它们来自HTML.我不明白为什么对可打印字符会有限制.
39> cocco..:获取所有查询字符串参数,包括复选框值(数组).
考虑到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循环,性能应该非常好.
支持:
空值(键= /键)
键值(键=值)
数组(key [] = value)
散列(散列标记被拆分)
笔记:
它不支持对象数组(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书籍中的shorthands和bitwise运算符或使用你最喜欢的搜索引擎).以标准可读语法重写代码意味着性能损失.
40> George..:对于那些想要一个简短方法(有限制)的人:
location.search.split('myParameter=')[1]
这对于一般情况来说还不够:它假定1)你只对单个参数感兴趣2)它保证是该行中的最后一个参数(即你可以保证所有浏览器都将它放在最后,或者它是页面上唯一的参数,并且您不会将URL放在RSS feed聚合器中,它可能会添加utm参数)和3)值中没有可以转义的字符进行传输,例如空格或许多符号.
所有方法都没有1种尺寸.如果你在一个短线程中有一个完美的解决方案,我会全神贯注地检查出来.以上是一个快速解决方案,不是一般情况,而是对于希望轻量级和快速解决静态实现的编码人员.无论如何,感谢您的评论.
(location.search.split('myParameter =')[1]).split('&')[0]; 如果有多个参数,这会给你相同的结果.仅对静态实现有用.
41> alkos333..:function getUrlVar(key){ var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); return result && unescape(result[1]) || ""; }https://gist.github.com/1771618
42> Anoop..:以下代码将创建一个具有两个方法的对象:
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; } };
43> 小智..:试试这个:
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 ...它移动到一个函数并传递字符串作为参数
44> Albireo..:此函数将查询字符串转换为类似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; }
我们对
undefined
on 执行检查,parameter[1]
因为decodeURIComponent
如果变量是undefined
,则返回字符串"undefined" ,这是错误的.用法:
"use strict"; var data = getQuerystringData(); var parameterValue = getQuerystringData("parameterName");
45> 小智..:我使用此代码(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
46> BMitch..:这是我对此的看法.第一个函数将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; };另外,如果你更改了一些args,你可以使用第二个函数将args数组放回到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; };
@greg在浏览器引擎中创建元素,它将为您解析一个URL并提供搜索和href方法以与url字符串进行交互.
47> Imdad..:以下函数返回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要使用此功能,您可以编写
var obj= getQueryStringObject(); alert(obj.key1);
48> 小智..:我在这里为我的需求做了一个小的URL库:https://github.com/Mikhus/jsurl
这是在JavaScript中操纵URL的更常见方式.同时它非常轻量级(缩小和gzip <1 KB)并且具有非常简单和干净的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);