Softonic

URIコンポーネントエンコーダー

ステップ 1 / 2
次へ

name=John & Janeのような値をエンコードせずにURLに渡したことがあるなら、その苦労はご存じでしょう。&が新しいパラメーターとして読まれ、サーバーには意味不明なデータが届きます。このツールは、RFC 3986に従って任意の文字列をURIコンポーネントとして安全に使えるようパーセントエンコードし、すべての予約文字を%HHペアに変換します（空白を含む）。フラグメント、クエリ値、リダイレクト先を貼り付ければ、どのURLにも安全に連結できる結果が得られます。

URIコンポーネントのエンコード方法

  1. 1

    値を貼り付け

    単一のクエリパラメーター値、パスセグメント、またはフラグメント文字列を入力します。

  2. 2

    エンコードかデコードを選択

    方向を切り替えて、パーセントエスケープを元の文字に戻します。

  3. 3

    実行

    ツールは各文字をUTF-8でエンコードし、予約バイトをそれぞれ%HHに置き換えます。

  4. 4

    結果をコピー

    出力をそのままURLテンプレートやAPIクライアントに入れます。

エスケープされる文字

このエンコーダーはRFC 3986に従います。手つかずで残るのは非予約集合A-Z a-z 0-9 - _ . ~だけです。それ以外はすべてパーセントエンコードされたUTF-8になり、空白や、JavaScriptのencodeURIComponentなら残す下位区切り文字! * ' ( )も対象です。

文字 エンコード結果
スペース %20
! %21
# %23
& %26
' %27
( %28
) %29
* %2A
+ %2B
/ %2F
= %3D
? %3F
é %C3%A9

コンポーネントと完全なURIの違い

これはencodeURIとは異なります。encodeURIは: / ? # [ ] @ ! $ & ' ( ) * + , ; =をURLの構造要素としてそのまま残します。クエリ文字列に連結する値には厳格な形式が必要で、それがこのツールの出力です。! ' ( ) *さえエスケープし、JavaScriptのencodeURIComponentより一歩踏み込みます。

const url = `/search?q=${encodeURIComponent(userInput)}`;

よくある落とし穴

  • 二重エンコード： すでにエンコードされたものを再度エンコードすると、%20ではなく%2520になります。出所が不確かなときは必ず先にデコードしてください。
  • フォームのプラス記号： HTMLフォーム送信は空白を%20ではなく+としてエンコードします。RFC 3986を厳格に守るデコーダー（これも含む）は+を空白に戻しません。その場合はフォーム対応のデコーダーを使ってください。
  • パス区切り： ここで/をエンコードすると%2Fになります。本当のパス構造を保ちたい場合は、先にセグメントを結合してから各セグメントを個別にエンコードしてください。

よくある質問

これはRFC 3986のパーセントエンコード、つまり厳格な形式です。:、/、?、#やその他の予約文字（さらに!、'、(、)、*）をエスケープします。コンポーネントは内部にURL構造を持つべきではないからです。そのためJavaScriptのencodeURIComponentより厳格で、encodeURIよりはるかに厳格です。

%20がRFC 3986の方式です。空白の+はapplication/x-www-form-urlencodedのボディエンコードの名残です。URLのクエリ文字列では%20が常に安全で、+はフォームのPOSTで生成された場合にのみサーバー側で想定されます。

各文字をまずUTF-8でエンコードし、その後すべてのバイトをエスケープします。「日」のような文字は%E6%97%A5（3バイト）になります。

いいえ。値は結果を作るためにサーバー側でパーセントエンコードされ、保存もログ記録もされません。貼り付けた内容は応答の送信後に何も残りません。

関連ツール

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

補色ファインダー

任意の色の補色を見つけます。HSL上の反対色、スプリットコンプリメンタリーのペア、アクセシブルな配色のヒントを返します。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

Nginx 設定ジェネレーター

かんたんなフォームから、TLS・HTTP/2・gzip・ブラウザキャッシュ・リバースプロキシの設定を含む Nginx の server block を生成します。

このツールは他の言語でも利用できます