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

こんな感じになります。

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

iPhoneで人気のメールクライアント「Sparrow」を使ってみたのでメール設定など色々前のページ

WordPressで最新記事の一覧をプラグインを使わないで表示させるやり方次のページWordPressのログイン時のツールバー

関連記事

  1. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  2. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  3. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  4. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  5. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  6. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

コメント

    • otakebiya
    • 2013年 10月 30日

    大変役立ちました。

    有り難う御座いました。

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

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP