情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

JavaScriptでURLパラメータを手軽に取得する方法

JavaScript (13) jQuery (2)

JavaScriptでURLパラメータを取得する方法についてGoogleで調べると、location.hrefやlocation.searchをsplitで「&」で区切った後にさらに「=」で区切るような処理をしていたり、jQueryのjQuery-URL-Parser(jquery.url.js)プラグインが紹介されていたりするのですが、URLパラメータをちょろっと取り出したいだけ、にしては大がかりなので、もっとあっさり書ける方法を紹介しておきます。

よく見つかるコード

よく見つかるコードは、主に2種類です。

JavaScriptのsplitでパラメータを取得する

一番よくあるのは、location.hrefを、splitで次々分割し、「&」や「=」で区切り、URLパラメータを分解する方法です。

ただしこの場合、ちょっとURLパラメータが欲しいだけにしては、何度もsplitを行い、splitした結果の何番目なのかも分からないため、コードの分量が大きめになります。

ちょっとURLパラメータを使いたいだけであれば、だいぶ大げさです。

jQueryプラグインを使う

次に見つかるのが、jquery.url.jsを使う方法です。

jquery.url.js(jQuery-URL-Parse, PURL)を使うと、確かに比較的簡単にURLパラメータを取得・設定できるのですが、それだけのために jquery.url.js を読み込むのも大げさですし、ちなみなことを言っておくと、このjquery.url.js(Purl)は既にメンテナンスされおらず、せめて使うのであれば、URI.jsが良さそうです。

本題:JavaScriptで、URLを取得するパラメータを取得する

今回使ってみた方法は、以下のようなものです(「lang」というURLパラメータを取得する例)。

var parameterLang = decodeURIComponent(location.search.match(/lang=(.*?)(&|$)/)[1]);

仮に大量に使うようなものであれば、しっかり分離した方がいいかもしれませんが、今回自分はTamperMonkey(GreaseMonkey, UserScript)で使いたかっただけなので、こういうコードがちょうど良かったわけです。

状況次第ですが、見つからないことも考慮するのであれば、以下のようにします。

var lang = 'default';
var match = location.search.match(/lang=(.*?)(&|$)/);
if(match) {
    lang = decodeURIComponent(match[1]);
}

説明

以下、説明をします。

今回は、「http://example.com/index.html?param1=value1&param2=value2#hash」から、「param2」の値を取得するのを例にします。

location.hrefではなくlocation.searchを使う

まず、URLパラメータが開始する「?」より後ろから、ハッシュ開始の「#」までは、自分で切り出さなくとも、簡単に location.search で取得できます(?は含み、#は含まない)。

例の場合では、「location.search」とするだけで「?param1=value1&param2=value2」がとれます。

正規表現でURLパラメータを見つける

メインの処理はこの部分で、「/param2=(.*?)(&|$)/」という正規表現オブジェクトで、location.search内を検索します。

「.*」ではなく「.*?」としているのは、最短一致にするためです。

「(.*?)」としているのは、そこにマッチしたぶぶんをキャプチャして、取り出すためです。

今回は「param2=value2」にマッチし、「value2」がキャプチャされます。

match関数の結果は、「["param2=value2", "value2", ""]」となり、0番目がマッチした全体、1番目が最初のキャプチャ(value2)、となっています。

※3つ目の「""」は、「(&|$)」がキャプチャされた結果なのですが、特にこのまま放置でも問題ないので放置しています。キャプチャしたくない場合には、「(&|$)」の代わりに「(?:&|$)」とします。

パラメータの取り出し

したがって、指定のURLパラメータの値は、「location.search.match(/param2=(.*?)(&|$)/)[1]」で取得できることになります。

エンコードされた日本語を復元する

URL中では、日本語や一部の記号類がURLエンコードされているので、パーセントを含むような文字になっています。これを復元するために、最後にdecodeURIComponentを使います。

コメント(1)

  1. ta
    2015年12月30日(水) 23:40

    便利ですね。使わせていただきます。
    ただ、こういう検索をすると、まずいようです。
    正規表現 /id=(.*?)(&|$)/
    クエリ ?iid=1&id=2
    iidの方を取得してしまいます。

    修正案
    /(&|\?)id=(.*?)(&|$)/
    にして、match[2]を取る

新しいコメントを投稿