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. Tiny Colorpicker
  2. Bootstrap Carousel Touch Slider with Text Animation
  3. Timeline

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  4. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  5. Ace Responsive Menu
  6. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

コメント

    • otakebiya
    • 2013年 10月 30日

    大変役立ちました。

    有り難う御座いました。

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

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP