使い方
- 「エンコード」か「デコード」を選びます。
- モードを選びます。パラメータの値 1 つなら「コンポーネント」、URL の構造を保つなら「URL 全体」、スペースが + になる HTML フォームのデータなら「フォーム（スペースを + に）」です。
- テキストを貼り付けます。入力に合わせて結果がすぐに更新されます。
- 入力が URL の場合は、プロトコル、ホスト、パス、クエリパラメータが下に一覧表示されます。
オプションの説明
- コンポーネント
- 英数字と - _ . ~ 以外をすべてエンコードします。クエリパラメータの値やパスの 1 区間に使います。encodeURIComponent と同じ動作に加えて、RFC 3986 で予約されている ! ' ( ) * もエンコードします。
- URL 全体
- URL の構造を作る文字（: / ? # & =）はそのまま残し、スペースと非 ASCII 文字をエンコードします。JavaScript の encodeURI と同じです。
- フォーム
- HTML フォームで使われる application/x-www-form-urlencoded 形式です。スペースは %20 ではなく + になり、デコード時は + をスペースに戻します。
例
| 入力 | コンポーネント | URL 全体 | フォーム |
|---|---|---|---|
a b&c |
a%20b%26c |
a%20b&c |
a+b%26c |
café |
caf%C3%A9 |
caf%C3%A9 |
caf%C3%A9 |
https://x.com/?q=1 2 |
https%3A%2F%2Fx.com%2F%3Fq%3D1%202 |
https://x.com/?q=1%202 |
https%3A%2F%2Fx.com%2F%3Fq%3D1+2 |
パラメータ付きの URL を組み立てる
ユーザーの入力をクエリ文字列に入れるときは、値を 1 つずつエンコードします。
const url = `https://example.com/search?q=${encodeURIComponent(query)}&page=2`;最後に URL 全体をまとめてエンコードすると、値の中の & や = がエンコードされずに残り、パラメータが壊れてしまいます。
よくある質問
%20 と + の違いは何ですか？
どちらもスペースを表せますが、使える場所が違います。%20 は URL のどこでも有効ですが、+ がスペースを意味するのはフォーム送信のクエリ文字列の中だけです。パスの中の + はそのままプラス記号として扱われます。
テキストが二重にエンコードされる（%2520 になる）のはなぜですか？
2 回エンコードされたためです。%20 の % がさらに %25 にエンコードされています。2 回デコードしたうえで、コードでは値をエンコードする処理が 1 か所だけになるようにしてください。
encodeURI と encodeURIComponent はどう使い分けますか？
URL に埋め込むパラメータの値ごとに encodeURIComponent（「コンポーネント」モード）を使います。encodeURI（「URL 全体」）は、スペースや非 ASCII 文字を含む可能性がある完全な URL にだけ使います。
「パーセントエンコーディングが不正です」というエラーはどういう意味ですか？
% の後に 16 進数 2 桁が続いていないか、バイト列が正しい UTF-8 になっていないという意味です。エラーには最初の不正な箇所が何文字目かが表示されます。
日本語（漢字やひらがな）は URL でどのようにエンコードされますか？
各文字を UTF-8 のバイト列に変換し、1 バイトごとに %XX と書きます。たとえば「中」は %E4%B8%AD、「あ」は %E3%81%82 になります。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。