JavaScriptクエリ文字列
クエリ文字列ASP.NETスタイルから辞書を作成するJavaScriptライブラリはありますか？
次のように使用できるもの：
var query = window.location.querystring["query"]?
"query string"は.NET領域以外の何かと呼ばれますか？ location.searchがkey/valueコレクションに分割されないのはなぜですか？
EDIT：独自の関数を作成しましたが、主要な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; drVanilla javascriptを使用したコードの単一（ish）行でのソリューション
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
})
クエリ文字列?a=1&b=2&c=3&d&eitの場合：
> queryDict
a: "1"
b: "2"
c: "3"
d: undefined
e: undefined
複数値キーおよびエンコードされた文字？
JavaScriptでクエリ文字列値を取得するにはどうすればよいですか？ の元の回答を参照してください
"?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", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
この投稿を見つけた後、自分自身を見たときに、最も投票されたソリューションが最良であるとは思わないと付け加えるべきだと思いました。配列値を処理しません（？a = foo＆a = barなど-この場合、aが['foo'、 'bar']を返すことを期待します）。また、％20がスペースを表す16進文字エンコード（例：？a = Hello％20World）やスペースを表すプラス記号（例： ：？a = Hello + World）。
Node.jsは、クエリ文字列解析に対する非常に完全なソリューションのように見えるものを提供します。かなり隔離されており、許可されたライセンスの下にあるため、自分のプロジェクトで取り出して使用するのは簡単です。
コードはこちらでご覧いただけます： https://github.com/joyent/node/blob/master/lib/querystring.js
Nodeのテストは次のとおりです。 https://github.com/joyent/node/blob/master/test/simple/test-querystring.js 一般的な回答でこれらのいくつかを試して、それをどのように処理するかを確認することをお勧めします。
この機能を具体的に追加するために私が関わったプロジェクトもあります。これは、Python標準libクエリ文字列解析モジュールの移植版です。私のフォークはここにあります： https://github.com/d0ugal/jquery.qeeree
または、ライブラリ sugar.js を使用できます。
Sugarjs.comから：
Object.fromQueryString（str、deep = true）
URLのクエリ文字列をオブジェクトに変換します。 deepがfalseの場合、変換は浅いパラメーターのみを受け入れます（つまり、[]構文を持つオブジェクトまたは配列は受け入れません）。これらは普遍的にサポートされていないためです。
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;
クエリ文字列を手元に持っている場合、これを使用します。
/**
* @param qry the querystring
* @param name name of parameter
* @returns the parameter specified by name
* @author [email protected]
*/
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 "";
}
John Slegersが言及したライブラリにはjQueryの依存関係がありますが、これはVanilla Javascriptのバージョンです。
https://github.com/EldonMcGuinness/querystring.js
私は彼の投稿にコメントしただけだっただろうが、そうする評判はない。 ：/
例：
次の例では、不規則ではありますが次のクエリ文字列を処理します。
?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="https://rawgit.com/EldonMcGuinness/querystring.js/master/dist/querystring.min.js"></script>
<pre id="results">RESULTS: Waiting...</pre>// 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);
コード
Eldon McGuinnessによるこの要点 は、これまで見てきたJavaScriptクエリ文字列パーサーの最も完全な実装です。
残念ながら、それはjQueryプラグインとして書かれています。
私はそれをバニラJSに書き直し、いくつかの改善を行いました：
function parseQuery(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 = qi.map(function(n) {
return decodeURIComponent(n)
});
if (typeof qi[1] === "undefined") {
qi[1] = null;
}
if (typeof 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"
]
}
this Fiddle も参照してください。
純粋なJavaScript文字列操作でこれに似た要件のために作成した関数
"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を使用している場合、次の1行のソリューションがあります：_.object(window.location.search.replace(/(^\?)/, '').split('&').map(keyVal => keyVal.split('=')));
シンプルで読みやすく、小さくしたい
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'
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]);
}
}
}
さて、みんなが私の実際の質問を無視しているので、私も私の投稿をします！ここに私が持っているものがあります：
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;
})();
そしてテスト：
alert(window.location.querystring.toString());
for (var key in location.querystring) {
alert(key + "=" + location.querystring[key]);
}
JavaScriptは私の母国語ではありません。
とにかく、すでに1つが記述されているJavaScriptライブラリ（jQuery、Prototypeなど）を探しています。 :)
@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']
ここでの勝利は、（機能的ではなく）オブジェクト指向のインターフェースであり、location.searchだけでなく、任意の文字列で実行できます。
すでにJavaScriptライブラリを使用している場合、この関数makeはすでに存在します。例えば ここにプロトタイプのバージョンがあります