URL エンコード・デコード

パーセントエンコーディングの役割

URL に使えるのは限られた ASCII 文字だけで、その一部には役割があります。/ はパスの区切り、? はクエリの開始、& と = はパラメータの区切り、# はフラグメントの開始です。それ以外の文字や、データとして使われる予約文字は、その UTF-8 の各バイトについて % と 16 進数 2 桁で書き表します。スペースは %20、& は %26 になり、UTF-8 で 2 バイトの é は %C3%A9 になります。

これを間違えるのは典型的なバグです。「salt & pepper」の検索が「salt 」としか届かないのは、エンコードされていない & が新しいパラメータを始めてしまったためです。

encodeURIComponent、encodeURI、フォームエンコードのどれを使うか

コンポーネント（encodeURIComponent）

英字、数字、- _ . ! ~ * ' ( ) 以外をすべてエンコードします。クエリの値、パスの 1 区間、パラメータとして渡すリダイレクト URL など、URL の一部分に使います。10 回中 9 回はこれが正解です。

URL 全体（encodeURI）

URL の構造を作る文字（: / ? # & = など）はそのままにし、スペースや非 ASCII 文字などそれ以外をエンコードします。有効にしたい完全なアドレスに使い、単一の値には決して使わないでください。値の中の & や = はエンコードされません。

フォーム（application/x-www-form-urlencoded）

フォーム送信時にブラウザが送る形式で、URLSearchParams が生成する形式でもあります。スペースは + になり、英字、数字、* - . _ だけがそのまま残ります。

デコード、+ 記号、不正なシーケンス

+ がスペースを意味するのはクエリ文字列とフォームの本文の中だけで、パスでは文字どおりのプラス記号です。そのためデコードでは推測せず、+ をスペースにのスイッチを用意しています。デコードした値でスペースのはずの場所にプラス記号が表示される場合は、オンにしてください。

JavaScript の decodeURIComponent は、後に 16 進数 2 桁が続かない最初の %（「100%」だけでも該当します）や、Latin-1 でパーセントエンコードされたテキスト（é が %E9）のような有効でない UTF-8 のバイト列で「URI malformed」エラーを出します。このデコーダーはそこで止まらず、有効な部分はすべてデコードし、壊れた部分はそのまま残して、長いログの行の中でも見つけられるよう、それぞれを行と列付きで一覧表示します。

URL を読み取り、編集する

解析機能は、任意の絶対 URL のプロトコル、認証情報、ホスト、ポート、パス、クエリ、フラグメントを、読みやすいようにデコードして表示します。クエリパラメータはキーと値の表として表示され、値を変えたり、パラメータを追加・削除したりすると、正しいエンコードで URL 全体が再構成されます。utm_source などのトラッキングパラメータを取り除いたり、長いリダイレクトリンクが実際にどこを指しているかを確かめたりするのに便利です。

その他のエンコードについては、Base64 エンコーダーや、URL ではなく HTML 用にテキストをエスケープする HTML エンティティ変換をご覧ください。