にしし ふぁくとりー:西村文宏 個人サイト

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

パーセント記号を使ったURL(URI)エンコード・デコード方法 [計算・変換]

日本語文字や空白文字などの「URLには使えない文字」をURLで使うには、URLエンコード(パーセントエンコーディング)を使う必要があります。JavaScriptでURL(URI)エンコードするにはencodeURIメソッドを使います。同様に、URLエンコードされた文字列を元の文字列に戻すようデコードするにはdecodeURIメソッドを使います。

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エンコード:

結果

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

JavaScriptソース

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)エンコードされた文字列をデコードする機能を提供するフォームも簡単に作れます。

URLデコード:

結果

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

JavaScriptソース

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---