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. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  2. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  3. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  4. ZooMove

    JavaScript

    マウスオーバーで画像を拡大ズーム・移動もできるjQueryプラグイン「ZooMove」

    ZooMoveは、マウスオーバーで指定された画像やエリアをズームするこ…

  5. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  6. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

コメント

    • otakebiya
    • 2013年 10月 30日

    大変役立ちました。

    有り難う御座いました。

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP