JavaScript查询string
有什么JavaScript库,使查询string, ASP.NET
风格的字典?
可以使用的东西,如:
var query = window.location.querystring["query"]?
“查询string”在.NET
领域之外被称为别的吗? 为什么不将location.search
分解为关键/值集合 ?
编辑 :我写了我自己的function,但没有任何主要的JavaScript库这样做?
您可以从location.search属性中提取键/值对,该属性具有URL后面的部分。 符号,包括? 符号。
function getQueryString() { var result = {}, queryString = location.search.slice(1), re = /([^&=]+)=([^&]*)/g, m; while (m = re.exec(queryString)) { result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } return result; } // ... var myParam = getQueryString()["myParam"];
tl;博士解决scheme使用香草JavaScript的单一(ish)代码行
var queryDict = {} location.search.substr(1).split("&").forEach(function(item) { queryDict[item.split("=")[0]] = item.split("=")[1] })
查询string?a=1&b=2&c=3&d&e
它返回:
> queryDict a: "1" b: "2" c: "3" d: undefined e: undefined
多值键和编码字符 ?
如何在JavaScript中获取查询string值?
"?a=1&b=2&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" > queryDict a: ["1", "5", "text"] b: ["2"] c: ["3"] d: [undefined] e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
find这篇文章后,当我看着自己的时候,我想我应该补充说,我不认为最有利的解决scheme是最好的。 它不处理数组值(例如?a = foo&a = bar – 在这种情况下,我期望得到一个返回['foo','bar'])。 它也据我所知不考虑编码值 – 例如hex字符编码,其中%20表示一个空格(例如:?a = Hello%20World)或用于表示空格的加号(例如:?a = Hello + World)。
Node.js提供了一个非常完整的查询stringparsing解决scheme。 在你自己的项目中取出和使用它很容易,因为它相当好的隔离和许可许可。
它的代码可以在这里查看: https : //github.com/joyent/node/blob/master/lib/querystring.js
节点有的testing可以在这里看到: https : //github.com/joyent/node/blob/master/test/simple/test-querystring.js我会build议尝试一些这些stream行的答案,看看它是如何处理它们。
还有一个项目,我参与了专门添加这个function。 它是Python标准库查询stringparsing模块的一个端口。 我的叉子可以在这里find: https : //github.com/d0ugal/jquery.qeeree
或者你可以使用图书馆sugar.js 。
来自sugarjs.com:
Object.fromQueryString(str ,deep = true )
将URL的查询string转换为对象。 如果deep是假的,转换将只接受浅的params(即没有对象或带有[]语法的数组),因为这些不是被普遍支持的。
Object.fromQueryString('foo=bar&broken=wear') >{"foo":"bar","broken":"wear"} Object.fromQueryString('foo[]=1&foo[]=2') >{"foo":[1,2]}
例:
var queryString = Object.fromQueryString(location.search); var foo = queryString.foo;
如果你有查询string,使用这个:
/** * @param qry the querystring * @param name name of parameter * @returns the parameter specified by name * @author eduardo.medeirospereira@gmail.com */ function getQueryStringParameter(qry,name){ if(typeof qry !== undefined && qry !== ""){ var keyValueArray = qry.split("&"); for ( var i = 0; i < keyValueArray.length; i++) { if(keyValueArray[i].indexOf(name)>-1){ return keyValueArray[i].split("=")[1]; } } } return ""; }
// How about this function queryString(qs) { var queryStr = qs.substr(1).split("&"),obj={}; for(var i=0; i < queryStr.length;i++) obj[queryStr[i].split("=")[0]] = queryStr[i].split("=")[1]; return obj; } // Usage: var result = queryString(location.search);
值得注意的是,John Slegers提到的库确实有jQuery依赖,但是这里是一个版本,它是vanilla Javascript。
EldonMcGuinness/querystring.html
我只是简单地评论他的职位,但我缺乏这样的声誉。 :/
例:
下面的示例处理以下内容,尽pipe不规则,查询string:
?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab
var qs = "?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"; //var qs = "?=&="; //var qs = "" var results = querystring(qs); (document.getElementById("results")).innerHTML =JSON.stringify(results, null, 2);
<script src="EldonMcGuinness/querystring.js/master/dist/querystring.min.js"></script> <pre id="results">RESULTS: Waiting...</pre>
代码
以下代码基于Eldon McGuinness的Gist ,是目前为止我所见过的JavaScript查询stringparsing器的最完整实现:
var parseQuery = function (str) { var qso = {}; var qs = (str || document.location.search); // Check for an empty querystring if (qs == "") { return qso; } // Normalize the querystring qs = qs.replace(/(^\?)/, '').replace(/;/g, '&'); while (qs.indexOf("&&") != -1) { qs = qs.replace(/&&/g, '&'); } qs = qs.replace(/([\&]+$)/, ''); // Break the querystring into parts qs = qs.split("&"); // Build the querystring object for (var i = 0; i < qs.length; i++) { var qi = qs[i].split("="); qi = $.map(qi, function (n) { return decodeURIComponent(n) }); if (qso[qi[0]] != undefined) { // If a key already exists then make this an object if (typeof (qso[qi[0]]) == "string") { var temp = qso[qi[0]]; if (qi[1] == "") { qi[1] = null; } qso[qi[0]] = []; qso[qi[0]].push(temp); qso[qi[0]].push(qi[1]); } else if (typeof (qso[qi[0]]) == "object") { if (qi[1] == "") { qi[1] = null; } qso[qi[0]].push(qi[1]); } } else { // If no key exists just set it as a string if (qi[1] == "") { qi[1] = null; } qso[qi[0]] = qi[1]; } } return qso; };
如何使用它
var results = parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab");
产量
{ "foo": ["bar", "boo" ], "roo": "bar", "bee": "bop", "": ["ghost", "ghost2"], "checkbox[]": ["b1", "b2"], "dd": null, "http": [ "http://w3schools.com/my test.asp?name=ståle&car=saab", "http://w3schools2.com/my test.asp?name=ståle&car=saab" ] }
又见这小提琴 。
function decode(s) { try { return decodeURIComponent(s).replace(/\r\n|\r|\n/g, "\r\n"); } catch (e) { return ""; } } function getQueryString(win) { var qs = win.location.search; var multimap = {}; if (qs.length > 1) { qs = qs.substr(1); qs.replace(/([^=&]+)=([^&]*)/g, function(match, hfname, hfvalue) { var name = decode(hfname); var value = decode(hfvalue); if (name.length > 0) { if (!multimap.hasOwnProperty(name)) { multimap[name] = []; } multimap[name].push(value); } }); } return multimap; } var keys = getQueryString(window); for (var i in keys) { if (keys.hasOwnProperty(i)) { for (var z = 0; z < keys[i].length; ++z) { alert(i + ":" + keys[i][z]); } } }
我喜欢保持简单,可读和小。
function searchToObject(search) { var pairs = search.substring(1).split("&"), obj = {}, pair; for (var i in pairs) { if (pairs[i] === "") continue; pair = pairs[i].split("="); obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]); } return obj; } searchToObject(location.search);
例:
searchToObject('?query=myvalue')['query']; // spits out: 'myvalue'
函数我写了一个与纯JavaScriptstring操作类似的要求
"http://www.google.lk/?Name=John&Age=20&Gender=Male" function queryize(sampleurl){ var tokens = url.split('?')[1].split('&'); var result = {}; for(var i=0; i<tokens.length; i++){ result[tokens[i].split('=')[0]] = tokens[i].split('=')[1]; } return result; }
用法:
queryize(window.location.href)['Name'] //returns John queryize(window.location.href)['Age'] //returns 20 queryize(window.location.href)['Gender'] //returns Male
如果你使用lodash + ES6,这是一个单行的解决scheme: _.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));
好吧,因为大家都在无视我的实际问题,呃,我也会发布我的! 这是我有:
location.querystring = (function() { // The return is a collection of key/value pairs var queryStringDictionary = {}; // Gets the query string, starts with '?' var querystring = unescape(location.search); // document.location.search is empty if no query string if (!querystring) { return {}; } // Remove the '?' via substring(1) querystring = querystring.substring(1); // '&' seperates key/value pairs var pairs = querystring.split("&"); // Load the key/values of the return collection for (var i = 0; i < pairs.length; i++) { var keyValuePair = pairs[i].split("="); queryStringDictionary[keyValuePair[0]] = keyValuePair[1]; } // Return the key/value pairs concatenated queryStringDictionary.toString = function() { if (queryStringDictionary.length == 0) { return ""; } var toString = "?"; for (var key in queryStringDictionary) { toString += key + "=" + queryStringDictionary[key]; } return toString; }; // Return the key/value dictionary return queryStringDictionary; })();
而testing:
alert(window.location.querystring.toString()); for (var key in location.querystring) { alert(key + "=" + location.querystring[key]); }
请注意,JavaScript并不是我的母语。
无论如何,我正在寻找一个已经写了一个的JavaScript库(例如jQuery,Prototype)。 🙂
build立在@CMS的答案我有以下(在CoffeeScript中,可以很容易地转换为JavaScript):
String::to_query = -> [result, re, d] = [{}, /([^&=]+)=([^&]*)/g, decodeURIComponent] while match = re.exec(if @.match /^\?/ then @.substring(1) else @) result[d(match[1])] = d match[2] result
你可以很容易地抓住你需要的东西:
location.search.to_query()['my_param']
这里的胜利是一个面向对象的接口(而不是function),它可以在任何string(不只是location.search)上完成。
如果您已经在使用JavaScript库,则此function已经存在。 例如这里是Prototype的版本