検索などでURLの後ろについてる「?」で始まるクエリ このクエリを取得してごにょごにょすることがあったのでメモ

こちらの記事を参考にしました。ありがとうございました。

JavaScriptのlocation.searchでクエリ情報を取得してみる

実際に使ったコードはこんな感じです。

var query, queryItems, queryItem, length;
query = decodeURIComponent(location.search);
query = query.substr(1);
queryItems = query.split('&');
//nameとvalueに分ける
for( var i = 0, length = queryItems.length; i<length; i++ ){
    queryItem = queryItems[i].split('=');
    name = queryItem[0];
    value = queryItem[1];
}

ポイント

location.search

location.searchでクエリの情報を取得ができます。 エンコードをさけるにはdecodeURIComponentを使う。

substr()

substr()は文字列の指定された部分を取得できます。 substr(開始の場所,文字数) 文字列の先頭を0番目としてカウントし、指定した場所から文字数分取得できます。 開始の場所だけ指定するとそれ以降すべて取得になるので query.substr(1); として?の次の文字から取得します。

split()

split()は指定した文字で区切って配列に格納してくれます。 今回は2箇所で使用しています。

まずは‘&'で区切ってnameごとに配列にいれる。 そのあと配列の中身一つ一つを'='で区切ってnameとvalueに分けます。

var query = 'keyword=Javascript&amp;number=1'
var queryItem = query.splite('&amp;');
console.log(queryItems); //['keyword=Javascript', 'number=1']

まずはquery.splite(’&’);でnameごとに情報を分けます。

for( var i = 0, length = queryItems.length; i<length; i++ ){
    queryItem = queryItems[i].split('=');
    name = queryItem[0];
    value = queryItem[1];
}

配列の数をqueryItems.lengthで取得して、配列の数だけループさせます。 nameごとに’='でspliteすると0がname、1がvalueの値になります。

あとは煮るなり焼くなりすればOKです。