Encode比較ツール Part.1：escape , encodeURI , encodeURIComponent関数

前回の「IE Key Event キャプチャー：IE8ではEventオブジェクトのプロパティの増減無し・動きに変化は？」続き、もう一つ昔作った検証ツールを移植＆機能追加してみました。 （IE8動作確認済み）

この[Encode比較ツール]では、文字列のエンコード＆デコードの検証を行なえます。

使い方は簡単で、テキストボックスに文字列を入力し実行ボタンを押すだけ。

すると実行結果として変換タイプ毎に変換された結果を表示します。
（極一部のWeb制作者にしか需要ないだろうなぁ・・・）

各列の意味は次の通り。

［エンコード→デコード］実行結果の各列の意味

ﾂꀀ

変換タイプは、サーバー側ではPHP4のurlencodeで使える物を選択できるようにしたえり、ブラウザ側は、JavaScript上で行える関数（escape , encodeURI , encodeURIComponent）を選択できるようにしてあります。

これにより、サーバー側とブラウザ側でのエンコードの違いや、よく問題として取り上げられるescape関数とencodeURI関数のどちらを使うべきか？といった検証を手軽に行えます。
（いやなにも考えずに、encodeURIを使っとけばいいだろ・・・やっぱ需要が・・）

ﾂꀀ

（う～ん・・・あまり需要が無いといっても、最近たまたま使いたい場面があったので紹介しておきます。 ）

使用例）encodeURIComponent関数で変換される文字、変換されない文字の判定に使う

encodeURIComponent関数について調べていた時に、次の２つのページの解説の違いに気付きました。

一番目のリンク先はITProのリファレンス系のサイト、二番目のリンク先はブログ系サイトとなっており、通常はITProを信用するのですが解説と動きが異なるようです。

こんな困った状況に遭遇した時に、これ！　この[Encode比較ツール]が役立ちます！
（いや、だからこんな状況滅多にないって・・・）

「encodeURIComponent：ITpro」
http://itpro.nikkeibp.co.jp/article/Reference/20081126/319910/

「encodeURIComponent」関数では，以下の文字列も変換する。
・予約語 ;,/?:@&=+$
・文字列 -_.!~*’()
・スコア #

「javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com)」
http://groundwalker.com/blog/2007/02/
javascript_escape_encodeuri_encodeuricomponent_.html

・全ての関数で[0-9A-Za-z]は変換されない。
・escape()で変換されない記号は *+-./@_ だけである。
・encodeURI()で変換されない記号は !#$’()*+,-./:;=?@_~ である。
・encodeURIComponent() が変換しない記号は !’()*-._~ のみである。
・マルチバイトなコードについては、たとえば、UTF-8の「あ」は escape() だと %u3042、encodeURL()およびencodeURIComponent() だと %E3%81%82。

ﾂꀀ

一番目のITPROの情報によるとencodeURIComponent関数は、『,/?:@&=+$-_.!~*’()#』の文字列を変換するとの解説となっているのに対して、二番目のブログの内容では、『!’()*-._~』は変換されないとの解説になっている。

これらの違いを調べるべく実際に動かしてみると、次の結果となります。
（実行タイプJavaScriptはブラウザ側で動作するため、IEの場合とFireFoxにて検証。）

う～ん　どうやらブログの内容である『!’()*-._~』は変換されないという解説が正しいようですねぇ。

ただITProのencodeURIComponentのリファレンスをあらためて読み返してみると、"以下の文字列も変換する"と記載されており、考えにくいが"文字列"と分類されていない、"予約語"と"スコア"は含まれないと読み取れなくもない。

そのためITProのencodeURIの解説も合わせて検証し"文字列"の定義の範囲を調査してみる。
（もし"以下の文字列"に"予約語"と"スコア"が含まれないなら、encodeURIに同じパターンで記載されている"予約語"と"スコア"は"文字列"には含まれないので変換されるハズ・・・）

「encodeURI：ITpro」
http://itpro.nikkeibp.co.jp/article/Reference/20081126/319909/?ST=oss

「encodeURI」関数では，以下の文字列は，変換されない。
・予約語 ;,/?:@&=+$
・文字列 アルファベット、数字、-_.!~*’()
・スコア #

予約語と文字列とスコアを繋げた文字列『,/?:@&=+$-_.!~*’()#』をエンコードしてみると・・

"予約語"と"スコア"も変換されていないですね。

やっぱり"以下の文字列"という表現には、"予約語"＋"文字列"＋"スコア"が含まれているようです。

結果、おそらくITProのencodeURIComponent のリファレンスが間違っておりブログの内容が正しい事がわかります。

ﾂꀀ

・・・とまぁ、このように手軽にエンコード結果の比較・検証を行えるツールとなっています。

長くなってきましたので、次回につづけます。