JavaScript

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

JavaScriptで、現在のページのクエリ情報(URLの末尾にある「?〜」)の文字を取得したい場合はlocationオブジェクトのsearchを使えば取得することができます。locationオブジェクトにはsearch以外にもhrefやhostNameといった便利なものがあります。ということでメモがてらエントリーしておきます。

location.search

こんな感じで使うことができます。以下はURLが「http://example.com/example.html?aa=sample」だった場合です。

var a = location.search;
document.writeln(a);
// 実行結果 ?aa=sample

ただこれだと値に日本語などが含まれているとエンコードされてしまうのでdecodeURIComponentで取得した値をデコードしておくといいかもです。

var a = decodeURIComponent(location.search);
document.writeln(a);

これで、例えばURLが「http://example.com/example.html?aa=サンプル」だとしても結果は

?aa=サンプル

にデコードされて出力されます。

複数の値を1つずつ区切る

値が複数ある場合は「&」でつながったクエリ情報になるので、そこで区切るようにするといいですね。さらに最初の「?」がいらない時はsubstring(1)で?以降の文字を取得するといいです。

var a = decodeURIComponent(location.search.substring(1));
var b = a.split('&');
if(b != '') {
    for(var i = 0; i < b.length; i++) {
        document.writeln(i + 1 + '番目: ' + b[i] + '<br>');
    }
}

上記の場合はURLが「http://example.com/example.html?aa=サンプル1&bb=サンプル2」だとすると。

1番目: aa=サンプル1
2番目: bb=サンプル2

こんな感じになります。

さらに「=」で区切ったりすると値を加工して何かを出力するといったこともしやすそうですね。

関連記事

  1. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  2. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  3. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  4. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  5. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  6. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

コメント

    • otakebiya
    • 2013年 10月 30日

    大変役立ちました。

    有り難う御座いました。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP