URLエンコード(パーセントエンコーディング)とは

日本語文字などの非アスキー文字や、空白文字などの一部の記号は、そのままではURL(URI)として使えません。そのため、それらの文字をURL(URI)で使うためには、URL(URI)で使える文字列にエンコード(エスケープ)する必要があります。その方法はパーセントエンコーディング(percent-encoding)と呼ばれ、その文字を構成するコードを「%記号＋2桁の数値」の形で記述します。

例えば、検索語をURLに含めるような場合で「s=さくら」という文字列をURLエンコードしたい場合は、「s=%E3%81%95%E3%81%8F%E3%82%89」のようになります。これは、以下のような規則で日本語文字(というかURLに使えない文字)をエスケープした結果です。

• s ：これはURLに使える文字なのでそのまま変化なし。
• = ：これはURLに使える記号なのでそのまま変化なし。
• さ ：これはUTF-8コードでは「E3 81 95」なので、16進数数値の前に「%」記号を付加して「%E3%81%95」と変換。
• く ：これはUTF-8コードでは「E3 81 8F」なので、16進数数値の前に「%」記号を付加して「%E3%81%8F」と変換。
• ら ：これはUTF-8コードでは「E3 82 89」なので、16進数数値の前に「%」記号を付加して「%E3%82%89」と変換。

上記の規則で変換すると、「s=さくら」という文字列は「s=%E3%81%95%E3%81%8F%E3%82%89」になるわけです。これがURLエンコード(パーセントエンコーディング)です。

URLエンコード(パーセントエンコーディング)を実行するencodeURIメソッド

JavaScriptでは、URL(URI)エンコードのためのencodeURIというメソッドが用意されているので、これを使うことで簡単に文字列をエンコードできます。使い方は簡単で、encodeURIメソッドの引数に変換したい文字列を渡すだけです。例えば、以下のような感じで記述します。

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

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

上記のURLエンコードフォームを作るソースは下記のような感じです。

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

ここでは、「formInput」というid属性が付加されたテキスト入力欄の値をエンコードして、「encOutput」というid属性が付加された要素(p要素など)に結果を出力しています。

URLデコードを実行するdecodeURIメソッド

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

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

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

上記のデコードフォームを作るソースは、以下のような感じです。

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

ここでは、「formInput」というid属性が付加されたテキスト入力欄の値をデコードして、「decOutput」というid属性が付加された要素(p要素など)に結果を出力しています。
こんな感じで、JavaScriptを使えば簡単にURLエンコード／デコードができます。

(更新日：2017年05月22日)