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. no-image
  2. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  3. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  4. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  5. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  6. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

コメント

    • otakebiya
    • 2013年 10月 30日

    大変役立ちました。

    有り難う御座いました。

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

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP