URL エンコーダ/デコーダ

URL エンコーダ/デコーダは、テキストをパーセント エンコーディング (URL エンコーディングとも呼ばれます) に変換します。 &、=、?、#、および / のような文字は、URL で構造的な意味を持ちます。クエリ文字列値にリテラル「&」が含まれている場合、その文字が % 26 としてエスケープされない限り、サーバーはパラメータを半分に分割します。このツールを使用すると、開発者は 3 つのエンコーディング バリアントすべてに遭遇します。個々の値については encodeURIComponent、完全な URL については encodeURI、HTML フォーム ボディについては application/x-www-form-urlencoded (スペースは +)。

ほとんどのチュートリアルで認められるよりも、モード間の区別が重要です。 encodeUriComponent は、予約済みのすべての区切り記号をエスケープします。これは、単一のクエリ パラメータ、パス セグメント、または別の URL に埋め込まれたリダイレクト ターゲットに対して適切な選択です。ただし、それを完全な URL で実行すると、https:// に https// にマングルします。 # & =) ですから、スペースや é や 日本語のような ASCII 以外の文字が UTF-8 パーセントでエンコードされた形式にエスケープされる間、URL 全体が移動可能です。 フォーム URLencode モードは、スペースが「%20」ではなく「+」になる以外は、<form>: エンコードウリコンセントと同じものを送信するときにブラウザが送信するものと一致します。これは、今日でも API 統合を失敗させる従来の癖です。

すべてがブラウザーで 100% クライアント側で実行され、本番環境 JavaScript で使用されているのと同じ native encodeURIComponent、encodeURI、decodeuricomponent 関数を使用するため、結果はコードが生成するものと正確に一致します。 貼り付けるものは何もありません - OAuth コールバック URL、署名された S3 リンク、トークン、セッション ID - マシンから離れることはありません。デコーダーはまた、不正な入力をキャッチし (JavaScript で 16 進数 2 桁が続く迷走 % が URIError をスローします)、サイレントに失敗するのではなく、明らかなエラーを報告します。

うまくいった例では、この URL エンコーダとデコーダの 3 つのモードが同じテキスト上でどのように異なるかを示しています。 cafe & creme と入力し、encodeURIComponent を選択した状態でエンコードをクリックします。出力は caf%C3%A9%20%26%20cr%C3%A8me です。 application/x-www-form-urlencoded にモードを切り替えて再度エンコードすると、スペースは + になり、caf%C3%A9+%26+cr%C3%A8me になります。 encodeURI モードでは、& はそのまま残ります。 encodeURI では URL 区切り文字として扱われ、そのモードが URL 全体に適合し、単一の値ではないためです。 decode はそれらのいずれかを反転しますが、フォーム モードのみが + をスペースに戻します。