JavaScript でクエリ文字列を解析する
このチュートリアルでは、JavaScript でのクエリ文字列の解析がどのように機能するかを見ていきますが、先に進む前に、履歴をもう一度見て、そもそもなぜこれらのクエリ文字列が必要なのかを見てみましょう。
クエリ文字列は、疑問符 ? の直後にあるハイパーリンクまたは URL の一部です。これは、Python ディクショナリにいくぶん似ている、キーまたはパラメータと呼ばれる変数に値を設定します。データベースまたは Web サーバーから指定されたデータを取得するとともに、ある Web ページから別の Web ページにデータを送信します。
ダミーのハイパーリンク
www.mysite
.com // default.aspx?username=user+1&units=kgs&units=pounds&permission=false
上記のハイパーリンクでは、この部分はクエリと呼ばれます。
username = user + 1 & units = kgs& units = pounds& permission = false
つまり、解析とは、何かの一部をすくい取るという意味です。ここでは、クエリ文字列について説明しています。つまり、このプロセスでは、クエリ文字列の一部を取得して処理します。その解析されたクエリ文字列は、データ要求を参照または取得する際に重要な役割を果たします。
解析されたクエリは次のようになります。
username = user 1
次に、JavaScript が複数のテストケースを通過する特定のハイパーリンクのクエリ文字列を解析する方法を示す、より具体的な例を見てみましょう。この例では、parseQuery 関数がハイパーリンクを引数として受け取り、解析されたクエリを JavaScript オブジェクトの形式で吐き出します。
parseQuery の構文
parseQuery(query)
query：クエリとして渡される特定の文字列。
function parseQuery(query) {
object = {};
if (query.indexOf('?') != -1) {
query = query.split('?');
query = query[1];
}
parseQuery = query.split('&');
for (var i = 0; i < parseQuery.length; i++) {
pair = parseQuery[i].split('=');
key = decodeURIComponent(pair[0]);
if (key.length == 0) continue;
value = decodeURIComponent(pair[1].replace('+', ' '));
if (object[key] == undefined)
object[key] = value;
else if (object[key] instanceof Array)
object[key].push(value);
else
object[key] = [object[key], value];
}
return object;
};
空のオブジェクトを作成することから始めましょう。次に、クエリまたはハイパーリンクが ? から切り離されます。余分な URL を取り除きます。
それが完了したら、クエリを&から分割して、属性とその値をリストの形式で取得します。このリストは、値と属性を個別に抽出するために繰り返されます。
ここで、キーと値のペアがいくつかのテストケースをチェックし、最後に、残りの値から、+ 記号をより読みやすい値を与えるスペースに置き換えます。
テストケースを見てみましょう。
ケース 1
parseQuery('username=Eren&units=kgs&permission=true');
この場合、URL username=Eren&units=kgs&permission=true の代わりにクエリを渡します。最初の if ブロックがスキップされ、キーと値のペアが複数あるため、クエリが分割されます。、および重複するキーがないため、このコード行は true であるかどうかがチェックされます。
if (object[key] == undefined) object[key] = value;
出力：
{
username: 'Eren',
units: 'kgs',
permission: 'true'
}
ケース 2
parseQuery(
'http:/www.mysite.com//default.txt?username=David+Rogers&units=kgs&permission=false');
ここで、完全なハイパーリンクを使用します
http: /www.mysite.com/ / default.txt ? username = David + Rogers& units =
kgs& permission = false
引数として、以下の if 条件が True になり、このブロックがハイパーリンクからクエリを抽出します
if (query.indexOf('?') != -1) {
出力：
{
username: 'David Rogers',
units: 'kgs',
permission: 'false'
}
ケース 3
parseQuery(
'http:/www.mysite.com//default.txt?username=user1&insect=%D0%B1%D0%B0%D0%B1%D0%BE%D1%87%D0%BA%D0%B0');
エンコードされたメッセージを含む URL を入力してみましょう。
http: /www.mysite.com/ / default.txt ? username = user1& insect = % D0 % B1 %
D0 % B0 % D0 % B1 % D0 % BE % D1 % 87 % D0 % BA % D0 % B0
このメッセージをデコードするために、decodeURIComponent() 関数を使用しました。
出力：
{
username: 'user 1',
insect: 'бабочка'
}
ケース 4
parseQuery(
'http:/www.mysite.com//default.txt?username=Eren&units=kgs&permission=false&units=pounds');
最後に、重複するキーを含むハイパーリンクを検討します
http: /www.mysite.com/ / default.txt ?
username = Eren& units = kgs& permission = false& units = pounds
コード行の下の最初の重複値に対して、実行され、配列が作成されます。
else object[key] = [object[key], value];
その後、重複するすべてのエントリがこの配列にプッシュされます。
else if (object[key] instanceof Array) object[key].push(value);
出力：
{
username: 'Eren',
units: [ 'kgs', 'pounds'],
permission: 'false'
}