URL を段階的にエンコードおよびデコードする方法
簡単な回答
URL エンコードするには: テキストを URL エンコーダーに貼り付けると、パーセントでエンコードされた文字列が即座に表示されます。デコードするには: エンコードされた URL を URL デコーダーに貼り付けると、元のテキストが表示されます。すべての処理は、encodeURIComponent() と decodeURIComponent() を使用してブラウザ内でローカルに行われます。
導入
URL エンコード (パーセント エンコードとも呼ばれます) は、URL 内の特殊文字をインターネット上で安全に送信できる形式に変換します。スペース、引用符、非 ASCII 文字などの文字は、URLs では特別な意味を持つか、まったく許可されません。 URL エンコードでは、パーセント記号の後に 2 つの 16 進数が続くものに置き換えられます (たとえば、スペースは %20 になります)。このガイドでは、ブラウザで URLs をエンコードおよびデコードする方法を説明します。
ステップバイステップ
-
URL エンコーダ/デコーダ ツールを開く
URL エンコーダおよびデコーダ ツール ページに移動します。このツールには、エンコードとデコードの 2 つのモードがあります。
-
テキストを入力するか、URL
エンコード モードで、エンコードするテキストまたは URL を貼り付けます。これは、スペース、特殊文字、または非 ASCII テキストを含む値を含むクエリ文字列を作成する場合に便利です。
-
エンコードされた出力を読み取る
このツールは、encodeURIComponent() を使用して入力をエンコードします。スペースは %20 になり、& のような特殊文字は %26 になり、非 ASCII 文字は UTF-8 でエンコードされてからパーセント エンコードされます。結果は即座に表示されます。
-
エンコードされた URL をコピーします
「コピー」をクリックして、エンコードされた文字列をコピーします。 API リクエスト、HTML href 属性、または JavaScript fetch() 呼び出しで使用します。
-
エンコードされた URL をデコードする
デコード モードに切り替えて、パーセントでエンコードされた文字列を貼り付けます。このツールは、decodeURIComponent() を使用してそれをデコードし、元のテキストを表示します。無効なエスケープ シーケンス (%ZZ など) はエラーを生成します。
例
クエリ文字列値をスペースでエンコードする
入力: hello world
出力: hello%20world
URL を特殊文字でエンコードする
入力: https://example.com/search?q=foo&bar=baz
出力: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dfoo%26bar%3Dbaz
非 ASCII テキストをエンコードする
入力: café
出力: caf%C3%A9
パーセントエンコードされた URL をデコードする
入力: hello%20world%20%26%20goodbye
出力: ハローワールド&さようなら
よくある問題
- クエリ パラメーター値のみをエンコードする必要がある場合、URL 全体をエンコードします。構造 (://?&=) ではなく、値をエンコードします。
- 二重エンコード - URL がすでにエンコードされている場合、再度エンコードすると %20 ではなく %2520 が生成されます。不明な場合は、まずデコードしてください。
- encodeURI() と encodeURIComponent() の使用 — encodeURI() は URL 構造文字 (:/?&=) を保持し、encodeURIComponent() はそれらをエンコードします。後者はクエリ パラメーター値に使用します。
- デコード中の無効なエスケープ シーケンス - %ZZ または %2 は有効なパーセント エンコーディングではないため、エラーがスローされます。
ヒント
- URL インジェクションを防ぐために、スペース、特殊文字、またはユーザー入力を含む可能性のあるクエリ パラメーター値を常にエンコードしてください。
- クエリ パラメーター値には encodeURIComponent() を使用し、安全でない文字をエンコードする必要がある完全な URLs には encodeURI() を使用します。
- URL エンコードは暗号化ではありません。誰でもデコードできます。機密データを隠すためには決して使用しないでください。
- URL エンコーダー ツールとデコーダー ツールを使用すると、ブラウザーで瞬時にプライベート処理を行うことができます。