URLエンコード/デコード
URLエンコードは、URLに使えない文字を % と16進数2桁に置き換えます。「日本」は %E6%97%A5%E6%9C%AC、スペースは %20 になり、デコードすると 日本 に戻ります。
使い方
- エンコードかデコードを選び、入力欄に文字を入力または貼り付けます。
- 検索語のような値ひとつを変換するならコンポーネント、アドレス全体を変換して : / ? & = # などをそのまま残すならURL全体を選びます。
- HTMLフォームのように + をスペースとして使うテキストなら、+ のオプションにチェックを入れます。結果は入力しながら更新されます。
- 入力がURLやクエリ文字列なら、結果の下の表にパラメーターごとのキーと値がデコードされて並びます。コピーで結果をコピー、入力に戻すで結果を逆方向にもう一度変換できます。
計算方法
パーセントエンコードは、使えない文字をUTF-8のバイト列にし、1バイトずつ % と16進数2桁で書きます。「あ」はE3 81 82の3バイトなので %E3%81%82 になります。日本語1文字はたいてい3バイト、絵文字は4バイトです。
コンポーネントは encodeURIComponent を使います。英数字と - _ . ! ~ * ' ( ) 以外はすべてエスケープし、/ ? & = : # も変換します。URLの中の値ひとつに使います。URL全体は encodeURI を使い、URLの構造を作る ; , / ? : @ & = + $ # を残すので、アドレス全体向けです。
デコードはその逆です。% の後ろに16進数2桁がない、またはバイト列がUTF-8として正しくない場合、ブラウザがデコードを拒否し、エラーを表示します。クエリの表ではその部分を元のまま赤で示すので、1つの壊れた値のせいで他が見えなくなることはありません。
+ がスペースを意味するのはフォームデータ（application/x-www-form-urlencoded）とほとんどのクエリ文字列だけで、パスの中では + はそのままプラス記号です。クエリの表は常に + をスペースとして読み、メインのデコードはオプションにチェックしたときだけそうします。
よく使う文字の変換表
| 文字 | エンコード後 | メモ |
|---|---|---|
| スペース | %20（または +） | + はクエリ文字列でのみ |
| & | %26 | パラメーターの区切りなので値の中ではエンコード |
| = | %3D | キーと値の区切り |
| ? | %3F | クエリ文字列の始まり |
| # | %23 | フラグメントの始まり |
| / | %2F | パスの区切り |
| % | %25 | エスケープ文字そのもの |
| + | %2B | プラス記号そのものはエンコードが必要 |
よくある質問
encodeURI と encodeURIComponent の違いは？
encodeURIComponent はURLの区切り文字（/ ? & = : #）もエスケープするので、値ひとつに使っても安全です。encodeURI は区切り文字を残すので、構造を壊さずにアドレス全体をエンコードできます。
スペースが %20 になったり + になったりするのはなぜ？
%20 がスペースの標準的なエンコードで、どこでも使えます。+ はフォーム由来の古い書き方で、クエリ文字列の中でだけ有効です。+ のオプションにチェックすると、エンコード時に %20 の代わりに + を書きます。
デコードで不正な形式のエラーが出るのは？
単独の %、% の後ろが16進数でない文字、%E3 だけのようにUTF-8として不完全なバイトが含まれています。壊れた部分を直すか消してください。クエリの表には残りのパラメーターが表示されます。
日本語や絵文字も変換できますか？
できます。先にUTF-8に変換するので、日本語でも絵文字でもエンコードしてデコードすれば元どおりに戻ります。文字化けしたURLを読める形に戻すときにも使えます。
入力したURLはサーバーに送られますか？
いいえ。すべてブラウザの中で処理します。トークンや個人情報を含むリンクも端末の外に出ません。