ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript URLパラメータのread_javascriptスキルの改良版

JavaScript URLパラメータのread_javascriptスキルの改良版

WBOY
WBOYオリジナル
2016-05-16 18:56:29903ブラウズ

以下は、Script House が使用しているいくつかのメソッドです

コードをコピーします コードは次のとおりです:




以下は通常の関数です
JavaScript の規則性を使用して URL リンクの解析クラスを実装します
http: //www.jb51.net/article/15000.htm

次のコードは少し面倒です
/* 「JavaScript の決定版ガイド」では、通常のパラメータを使用せずに、URL パラメータを取得するためのより簡潔な方法を紹介しています。ループを使用した式。オブジェクトを一度に返す利点は、この関数を 1 回呼び出すだけで、パラメータと値のペアをオブジェクトに格納できるため、他のパラメータの値を取得するためにこの関数を再度呼び出す必要がないことです。将来的には、オブジェクトの属性を取得するだけで済みます。


* 使用法:
* var args = getArgs( ); // URL からパラメータを解析します
* var q = args.q "" // パラメータが定義されている場合はその値を使用し、それ以外の場合はデフォルト値を与えます
* var n = args.n ? parseInt(args.n) : 10;
*/
var getArgs = function ()
{
var args = new Object( ); 🎜 >var query = window.location.search.substring(1); // http://www.snowpeak.org/testjs.htm?a1=v1&a2=&a3=v3#anchor から取得したクエリ文字列を取得します。 a1=v1&a2=&a3=v3。
varpairs = query.split("&"); // アンパサンドで配列に区切ります
for(var i = 0; i var pos =pairs [ i].indexOf('='); // "name=value" ペアを検索します
if (pos == -1) continue; // ペアがない場合はループを抜けて続行します。次のペアの
var argname =pairs[i].substring(0,pos); // パラメータ名を取得します
var value =pairs[i].substring(pos 1); // パラメータ値を取得します>value = decodeURIComponent(value) ; // 必要に応じてデコードします
args[argname] = value; // オブジェクトの属性として保存します
}
return args; >}


その優れた利点は、プログラムは一度抽出操作を実行するだけで済み、今後パラメータ値を繰り返し取得する場合にプログラムを再度実行する必要がないことです。この方法の方が URL パラメータを取得しやすく、理解しやすいです。

以下は、以前に公開した「ループなし」ですが「やや複雑すぎる」バージョンです:



コードをコピー
コードは次のとおりです:

//正規表現を使用して、ループせずに URL からパラメータ値を取得します。ループを置換するコア技術は、文字列の replace() メソッドが関数を 2 番目のパラメータとして使用し、ユーザー定義の方法で置換できることです。
//このパラメータ名はあるが値がない場合は空の文字列が返され、そのようなパラメータ名が存在しない場合は未定義が返されます。
var getArg = function(argname)
{
var str = location.href;
var submatch;
//まず、疑問符と坑口の間のクエリ文字列を取り出します。 http://www.snowpeak.org/testjs.htm?a1=v1&a2=&a3=v3#anchor から切り取った URL ( a1=v1&a2=&a3=v3 など)。
//疑問符はパターン内の特殊文字であるため、? として記述する必要があります。ポンド記号はオプションであるため、パターンは #? で終わります。
if (submatch = str.match(/?) ([^#]*) #?/))
{
//キャプチャされたサブマッチを a1=v1&a2=&a3=v3 の形式で取得し、前に & を追加して通常の &a1=v1&a2=&a3 を作成します次のステップで簡単に置換できるように =v3
var argstr = '&' submatch[1]
//置換関数を作成し、見つかった形状 &a1=v1 の各グループを a1:"v1" に置換します。これは、次のようなオブジェクト定義に使用されます。 属性宣言
var returnPattern = function(str)
{
//$1 と $2 は、最初と 2 番目にキャプチャされた部分一致を表し、文字列
で使用する必要があります。 return str.replace (/&([^=] )=([^&]*)/, '$1:"$2",');
}
// 2 番目のグローバル正規置換を実行します。パラメータは単なるものです。定義された置換関数は、a1=v1&a2=&a3=v3 を a1:"v1",a2:"",a3:"v3" に置き換えます。
argstr = argstr.replace(/&([^=] ) = ([^&]*)/g, returnPattern);
//最後に、var retvalue = {a1:"v1",a2:"" の形式でオブジェクトの宣言を実行します。 ,a3:"v3"} ; オブジェクト宣言で、置換された文字列の末尾にカンマがある場合は、substr
eval('var retvalue = {' argstr.substr(0, argstr.length-1 ) '};');
//URL の各パラメータ名がその属性名であり、パラメータ値が対応する属性値です。
return retvalue[argname] ];
}
}

//Test
document.write('a1=' getArg('a1') ', a2=' getArg('a2') ', a3 =' getArg('a3 '));
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。