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

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

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が良さそうです。

今回使ってみた方法は、以下のようなものです（「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を使います。