这是一种在JavaScript中解析查询字符串的快速简便方法:
function getQueryVariable(variable) { 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 (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } console.log('Query variable %s not found', variable); }
现在请求page.html?x =你好:
console.log(getQueryVariable('x'));
如果您需要获得多个查询值,则很容易,但速度不是很快.我认为更好的抽象是返回一个JS对象,其中包含查询字符串中的所有名称值对 (38认同)
另外,拆分("=")不够好,你可以有一个"name = value"对,其中value包含一个非编码的'='.解决方法是使用indexOf('=')来查找第一个'=',以及之前和之后的子字符串. (11认同)
您还应解码任何已编码百分比的特殊字符 (9认同)
怎么样??this = 1&this = 2&this = 3` (9认同)
小智.. 154
function parseQuery(queryString) { var query = {}; var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&'); for (var i = 0; i < pairs.length; i++) { var pair = pairs[i].split('='); query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); } return query; }
将查询字符串hello=1&another=2
转换为对象{hello: 1, another: 2}
.从那里,很容易提取您需要的变量.
也就是说,它不处理数组例如"hello=1&hello=2&hello=3"
.要使用它,您必须在添加之前检查您所创建的对象的属性是否存在,并将其值转换为数组,并推送任何其他位.
这是一种在JavaScript中解析查询字符串的快速简便方法:
function getQueryVariable(variable) { 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 (decodeURIComponent(pair[0]) == variable) { return decodeURIComponent(pair[1]); } } console.log('Query variable %s not found', variable); }
现在请求page.html?x =你好:
console.log(getQueryVariable('x'));
function parseQuery(queryString) { var query = {}; var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&'); for (var i = 0; i < pairs.length; i++) { var pair = pairs[i].split('='); query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); } return query; }
将查询字符串hello=1&another=2
转换为对象{hello: 1, another: 2}
.从那里,很容易提取您需要的变量.
也就是说,它不处理数组例如"hello=1&hello=2&hello=3"
.要使用它,您必须在添加之前检查您所创建的对象的属性是否存在,并将其值转换为数组,并推送任何其他位.
您还可以使用Rodney Rehm提供的优秀URI.js库.这是如何做:-
var qs = URI('www.mysite.com/default.aspx?dest=aboutus.aspx').query(true); // == { dest : 'aboutus.aspx' } alert(qs.dest); // == aboutus.aspx
并解析当前页面的查询字符串: -
var $_GET = URI(document.URL).query(true); // ala PHP alert($_GET['dest']); // == aboutus.aspx
我也是!http://jsfiddle.net/drzaus/8EE8k/
(注意:没有花哨的嵌套或重复检查)
deparam = function (querystring) { // remove any preceding url and split querystring = querystring.substring(querystring.indexOf('?')+1).split('&'); var params = {}, pair, d = decodeURIComponent; // march and parse for (var i = querystring.length - 1; i >= 0; i--) { pair = querystring[i].split('='); params[d(pair[0])] = d(pair[1] || ''); } return params; };//-- fn deparam
并测试:
var tests = {}; tests["simple params"] = "ID=2&first=1&second=b"; tests["full url"] = "http://blah.com/?" + tests["simple params"]; tests['just ?'] = '?' + tests['simple params']; var $output = document.getElementById('output'); function output(msg) { $output.innerHTML += "\n" + Array.prototype.slice.call(arguments, 0).join("\n"); } $.each(tests, function(msg, test) { var q = deparam(test); // prompt, querystring, result, reverse output(msg, test, JSON.stringify(q), $.param(q)); output('-------------------'); });
结果是:
simple params ID=2&first=1&second=b {"second":"b","first":"1","ID":"2"} second=b&first=1&ID=2 ------------------- full url http://blah.com/?ID=2&first=1&second=b {"second":"b","first":"1","ID":"2"} second=b&first=1&ID=2 ------------------- just ? ?ID=2&first=1&second=b {"second":"b","first":"1","ID":"2"} second=b&first=1&ID=2 -------------------
这是我的版本松散地基于Braceyard的版本,但解析为'字典'并支持没有'='的搜索参数.在我的JQuery $(document).ready()函数中使用它.参数存储为argsParsed中的键/值对,您可能希望将其存储在某处...
'use strict'; function parseQuery(search) { var args = search.substring(1).split('&'); var argsParsed = {}; var i, arg, kvp, key, value; for (i=0; i < args.length; i++) { arg = args[i]; if (-1 === arg.indexOf('=')) { argsParsed[decodeURIComponent(arg).trim()] = true; } else { kvp = arg.split('='); key = decodeURIComponent(kvp[0]).trim(); value = decodeURIComponent(kvp[1]).trim(); argsParsed[key] = value; } } return argsParsed; } parseQuery(document.location.search);
继我对@bobby发布的答案的评论后,这里是我将使用的代码:
function parseQuery(str) { if(typeof str != "string" || str.length == 0) return {}; var s = str.split("&"); var s_length = s.length; var bit, query = {}, first, second; for(var i = 0; i < s_length; i++) { bit = s[i].split("="); first = decodeURIComponent(bit[0]); if(first.length == 0) continue; second = decodeURIComponent(bit[1]); if(typeof query[first] == "undefined") query[first] = second; else if(query[first] instanceof Array) query[first].push(second); else query[first] = [query[first], second]; } return query; }
此代码接受提供的查询字符串(作为'str')并返回一个对象.字符串在&的所有出现时被拆分,从而产生一个数组.然后对该数组进行travsers,并将其中的每个项目拆分为"=".这导致子数组,其中第0个元素是参数,第1个元素是值(如果没有=符号,则为undefined).这些映射到对象属性,因此例如字符串"hello = 1&another = 2&something"变为:
{ hello: "1", another: "2", something: undefined }
此外,此代码注意到重复重复,例如"hello = 1&hello = 2"并将结果转换为数组,例如:
{ hello: ["1", "2"] }
你还会注意到它处理了没有使用=符号的情况.如果在&符号后面有一个等号,它也会忽略.
对于原始问题有点矫枉过正,但如果您需要在javascript中使用查询字符串,则可以使用可重用的解决方案:)
如果您知道只有一个查询字符串变量,则可以执行以下操作:
var dest = location.search.replace(/^.*?\=/, '');
以下函数将使用正则表达式解析搜索字符串,缓存结果并返回所请求变量的值:
window.getSearch = function(variable) { var parsedSearch; parsedSearch = window.parsedSearch || (function() { var match, re, ret; re = /\??(.*?)=([^\&]*)&?/gi; ret = {}; while (match = re.exec(document.location.search)) { ret[match[1]] = match[2]; } return window.parsedSearch = ret; })(); return parsedSearch[variable]; };
您可以在没有任何参数的情况下调用一次并使用该window.parsedSearch
对象,也可以getSearch
随后调用.我还没有完全测试过这个,正则表达式可能还需要一些调整......
我想要一个简单的函数,它将URL作为输入并返回查询参数的映射.如果我要改进这个功能,我会支持URL和/或嵌套变量中的数组数据标准.
这应该可以使用jQuery.param(qparams)函数.
function getQueryParams(url){ var qparams = {}, parts = (url||'').split('?'), qparts, qpart, i=0; if(parts.length <= 1 ){ return qparams; }else{ qparts = parts[1].split('&'); for(i in qparts){ qpart = qparts[i].split('='); qparams[decodeURIComponent(qpart[0])] = decodeURIComponent(qpart[1] || ''); } } return qparams; };