JavaScriptでクエリ文字列を解析する
クエリ文字列www.mysite.com/default.aspx?dest=aboutus.aspxを解析する必要があります。 JavaScriptでdest変数を取得する方法
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'として）提供されたクエリ文字列を受け取り、オブジェクトを返します。文字列は＆のすべての出現箇所で分割され、配列になります。その後、配列はトラバースされ、その中の各項目は "="で分割されます。これにより、0番目の要素がパラメータで、1番目の要素が値になる（またはno = signの場合は未定義の）サブ配列になります。これらはオブジェクトのプロパティにマッピングされているので、たとえば "hello = 1＆another = 2＆something"という文字列は次のようになります。
{
hello: "1",
another: "2",
something: undefined
}
さらに、このコードは "hello = 1＆hello = 2"のような繰り返しの繰り返しに気付き、結果を配列に変換します。
{
hello: ["1", "2"]
}
また、=記号が使用されていない場合も扱っていることがわかります。 ＆記号の直後に等号がある場合も無視されます。
元の質問には少しやり過ぎですが、javascriptでクエリ文字列を操作する必要がある場合は再利用可能な解決策:)
あなたがその1つだけのクエリ文字列変数を持つことを知っているなら、あなたは単にすることができます：
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;
};
これはどう？
function getQueryVar(varName){
// Grab and unescape the query string - appending an '&' keeps the RegExp simple
// for the sake of this example.
var queryStr = unescape(window.location.search) + '&';
// Dynamic replacement RegExp
var regex = new RegExp('.*?[&\\?]' + varName + '=(.*?)&.*');
// Apply RegExp to the query string
val = queryStr.replace(regex, "$1");
// If the string is the same, we didn't find a match - return false
return val == queryStr ? false : val;
}
..それだけでそれを呼び出す：
alert('Var "dest" = ' + getQueryVar('dest'));
乾杯
specificlinks内の内のDOM要素をピックアップし、それらのユーザーをリダイレクトページに移動したいタイマーを使用して、クリックした元のURLに渡します。これは私が上記の方法の1つを組み込んだ通常のJavaScriptを使用してそれを行った方法です。
リンクのあるページ：Head
function replaceLinks() {
var content = document.getElementById('mainContent');
var nodes = content.getElementsByTagName('a');
for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
{
href = nodes[i].href;
if (href.indexOf("thisurl.com") != -1) {
nodes[i].href="http://www.thisurl.com/redirect.aspx" + "?url=" + nodes[i];
nodes[i].target="_blank";
}
}
}
}
本文
<body onload="replaceLinks()">
リダイレクトページHead
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);
}
function delayer(){
window.location = getQueryVariable('url')
}
Body
<body onload="setTimeout('delayer()', 1000)">