2007年5月 8日(火) 11時37分21秒 [計算・変換]

URL（URI）エンコード・デコードを行う

日本語文字などの非アスキー文字は、そのままではURL（URI）として使えません。そのため、日本語文字などをURL（URI）で使うためには、URL（URI）で使える文字列にエンコードする必要があります。JavaScriptでは、encodeURIというメソッドが用意されているので、これを使うことで簡単にURL（URI）エンコードを行うことができます。

使い方は簡単で、encodeURIメソッドの引数に変換したい文字列を渡すだけです。例えば、以下のような感じで記述します。

var encstr = encodeURI("変換したい文字列");

これを使えば、以下のようなURL（URI）エンコード機能を提供するフォームも簡単に作れます。

上記のソースは、次のような感じです。（「formInput」というid属性が付加されたテキスト入力欄の値をエンコードして、「encOutput」というid属性が付加された要素（p要素など）に結果を出力しています。ついでに、アラートボックスにも結果を表示しています。）

function EncodeStringToUri() {
var EncStr = encodeURI( document.getElementById("formInput").value );
document.getElementById("encOutput").innerHTML = EncStr;
alert(EncStr);
}


なお、当然エンコードができればデコードもできるわけで、URL（URI）エンコードされた文字列を元の文字列に戻す場合は、decodeURIメソッドを使います。
使い方は、encodeURIメソッドと全く同じで、引数にエンコードされた文字列を渡すだけです。例えば以下のような感じ。

var orgstr = decodeURI("エンコードされた文字列");

同様にして、URL（URI）エンコードされた文字列をデコードする機能を提供するフォームも簡単に作れます。

ソースは以下のような感じです。（「formInput」というid属性が付加されたテキスト入力欄の値をエンコードして、「decOutput」というid属性が付加された要素（p要素など）に結果を出力しています。ついでに、アラートボックスにも結果を表示しています。）

function DecodeStringToUri() {
var DecStr = decodeURI( document.getElementById("formInput").value );
document.getElementById("decOutput").innerHTML = DecStr;
alert(DecStr);
}


こんな感じで、JavaScriptを使えば簡単にURLエンコード／デコードができます。

なお、URLには「&」記号や「=」記号などはそのまま使うことができます。
でも、HTML中に記述する場合には、それらの記号はエンコードしておく必要があります。（エンコードしなくてもたいてい望み通りに機能しますが。）
今回のencodeURI／decodeURIメソッドは、それらの記号は変換しません。
それらの記号もすべて変換させるには、encodeURIComponent／decodeURIComponentメソッドを使います。この話はまた別の機会に。（まあ、使い方はまったく一緒ですが。^^;）