URLエンコーダー/デコーダーとは？
URLエンコーダー/デコーダーは、URL内の特殊文字をパーセントエンコード形式に変換したり、元に戻したりします。クエリ文字列やAPIパラメーター、スペースや特殊文字を含むURLを扱うときに便利です。
エンコード方式は 4 つです。Component モード(encodeURIComponent)は / や & を含むすべての予約文字をエスケープし、クエリ値の中身に最適。Full URL モード(encodeURI)は構造文字を保持し、URL 全体を解析可能なまま残します。フォームデータモードは application/x-www-form-urlencoded 送信向けに空白を + へ変換します。RFC 3986 厳格モードはさらに踏み込み、encodeURIComponent が見逃す !'()* のサブデリミタもエスケープするため、規格準拠の URL のどこにでも安全に置けます。Auto-detect は入力に %XX があるかを見て方向を自動判定し、リアルタイムを有効にすると入力中に即変換、再帰デコードを有効にすると二重・三重エンコードを残りが無くなるまで剥がし、比較パネルは同じ入力を 4 方式で同時にエンコードして並べます。
使い方
- URLまたはテキスト文字列を入力フィールドに貼り付けます。
- 「エンコード」をクリックして特殊文字をパーセントエンコード形式に変換するか、「デコード」をクリックして元に戻します。
- 結果をクリップボードにコピーするか、スワップボタンで入出力を切り替えます。
使用するタイミング
- 手作業でクエリ文字列を組み、スペース・& ・= を確実にエスケープしたいとき。
- パーセントエンコードされたサーバーログを読みやすい文章に戻したいとき。
- ASCII 外の文字を含む外国語 URL を、プレーンテキストのメールに崩れずに貼りたいとき。
結果
開発者が「hello world&foo=bar」を「hello%20world%26foo%3Dbar」にエンコードして、クエリ文字列パラメーターとして使用します。
よくある質問
- encodeURI と encodeURIComponent は何が違う?
- encodeURI は構造を成す /、?、&、= をそのまま残し、URL 全体が動くようにします。encodeURIComponent はそれらもすべてエスケープし、クエリ ? の後に置く 1 つのパラメータ値として正しく使えます。
- デコードしたのに %20 が残るのはなぜ?
- 原文が二重エンコードされている(1 回デコードしてもなおエンコード文字列が残るのでもう 1 回必要)、もしくは + を空白として扱うフォームエンコードのデータです。2 回デコードするか、デコード前に + をスペースに置換してください。
- URL にそのまま入れてよい文字はどれ?
- 予約されていない文字、すなわち A–Z、a–z、0–9 と 4 つの記号(ハイフン、アンダースコア、ピリオド、チルダ)です。それ以外、空白、ASCII 外の文字、そしてその位置で構文意味を持たない予約文字は、すべて %エンコードが必要です。
- 同じ文字列を 2 回エンコードしたら壊れますか?
- 壊れます。2 重エンコードは % を %25 に変えるため、元へ戻すにはデコードが 2 回必要になります。すでにエンコード済みかもしれない他システムからの値を連結する場合は、先に 1 回デコードするか、状態フラグを持たせてください。
- 中国語・アラビア語のような Unicode 文字も扱えますか?
- 扱えます。ブラウザの encodeURIComponent は任意の文字を UTF-8 バイト列にし、各バイトを %エンコードします。デコードはその逆で、「café」は言語に関係なく「caf%C3%A9」と往復します。