目次

パーセントエンコーディング

encodeURIComponent()

数字 英字 - . _ ~ ! ' ( ) * 以外の文字をエンコードします。

! ' ( ) * は新しい規格では予約文字に変更になっているのでエンコードが必要かもしれません。

パーセントエンコーディングの結果はここに表示されます

デコードの結果はここに表示されます

encodeURI()を使用

上記に加え # $ & + , / : ; = ? @ もエンコードしません。

パーセントエンコーディングの結果はここに表示されます

デコードの結果はここに表示されます

解説

URLは文字列からなる様々な要素が区切り文字で区切られたものです。各要素の文字列の中に様々な理由で許されない文字を入れたいときには、パーセントエンコーディングして入れることができます。

特にファイル名やformで送る文字に日本語を含めたいときに使われます。

ECMAScript 準拠の javascript では4つの関数があります。

encodeURIComponent()
decodeURIComponent()
encodeURI()
decodeURI()

de~ と en~ は互いに逆関数です。

「Component 付き」が各要素の文字列用で、「Component なし」が全体を一度に変換する用途のようですが、どちらにしても、仕組みをよく調べてから使用しなければ間違いを起こします。

これらの関数は、RFC2396 に基づくものです。

英字、数字は下の表には書かれていませんが非予約文字です。各要素の文字列としてエンコードなしでそのまま使えます。表にはASCIIの記号で非予約文字として扱われるものを●で示しました。

予約文字◎は区切り文字に使われる文字で各要素の文字列には使えませんから「Component 付き」の encodeURIComponent()関数で変換します。除外文字(SDU)も予約文字と同様に扱われますが注意が必要な文字です。

「Component 付き」と「Component なし」の違いは予約文字を変換するかどうかですが、# がなぜか例外です。

encodeURI(), encodeURIComponent() と RFC 2396 の比較
記号 ! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~
encodeURI() %20 ! %22 # $ %25 & ' ( ) * + , - . / : ; %3C = %3E ? @ %5B %5C %5D %5E _ %60 %7B %7C %7D ~
encodeURIComponent() %20 ! %22 %23 %24 %25 %26 ' ( ) * %2B %2C - . %2F %3A %3B %3C %3D %3E %3F %40 %5B %5C %5D %5E _ %60 %7B %7C %7D ~
RFC2396 予約文字
RFC2396 除外文字 S D D D D D U U U U U U U U
RFC2396 非予約文字

これで説明を終えることができれば、楽なのですが、この非予約文字などの規約は RFC3986 により変更になりました。

非予約文字が減り、予約文字の扱いになったことに注目してください。encodeURIComponent() では変換してくれないけれども、変換しなければ使えない文字になったということです。注意が必要です。

どちらにせよ、漢字を含めUTF-8の非ASCII部分の文字を変換したいという場合には問題なく使えます。

そのdecodeも問題なく使えます。

予約文字を含む場合は注意が必要です。もともと区切り文字で区切られた各要素の文字列は要素によりいろいろな規約があるので単純な関数ではある程度までしか対処できません。

encodeURI(), encodeURIComponent() と RFC 3986 の比較
記号 ! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~
encodeURI() %20 ! %22 # $ %25 & ' ( ) * + , - . / : ; %3C = %3E ? @ %5B %5C %5D %5E _ %60 %7B %7C %7D ~
encodeURIComponent() %20 ! %22 %23 %24 %25 %26 ' ( ) * %2B %2C - . %2F %3A %3B %3C %3D %3E %3F %40 %5B %5C %5D %5E _ %60 %7B %7C %7D ~
RFC3986 予約文字
RFC3986 非予約文字

ウェブページ(Dec.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/