100%クライアントサイド: すべてのエンコードとデコードはブラウザ内で行われます。データはサーバーに送信されません。

エンコード / デコード

クイックテスト — 文字をクリックして挿入:

spaceSP & = ? # / @ + % " < > \u{1F680} \u4e2d\u6587

出力

URLパーサー

上にURLをペーストするとコンポーネントが表示されます

URLエンコーディングとは?

URLエンコーディング(正式にはパーセントエンコーディング)は、URL(Uniform Resource Locator)内で許可されていない文字や特別な意味を持つ文字を表現する方法です。安全でない文字や予約文字をパーセント記号(%)と2桁の大文字16進数(文字のUTF-8バイト値)に置き換えます。例えば、スペース文字(ASCII 32 / 0x20)は%20に、アンパサンド(&)は%26になります。

URLは印刷可能なASCII文字のサブセットに制限されています。その安全なセット外の文字 — Unicode文字(絵文字や非ラテン文字など)、URL構文で特別な意味を持つ文字(?#/=など)、不可視の制御文字 — はURLに埋め込む前にエンコードする必要があります。

encodeURI vs encodeURIComponent

JavaScriptはURLエンコーディング用に2つの組み込み関数を提供しており、正確性のために適切なものを選ぶことが重要です:

関数用途エンコードされない文字
encodeURI() 完全な構造的に有効なURLをエンコード A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
encodeURIComponent() 単一のURLコンポーネント(例: クエリ値)をエンコード A-Z a-z 0-9 - _ . ! ~ * ' ( )
decodeURI() encodeURIの逆 encodeURIがエンコードしない文字はデコードしない
decodeURIComponent() encodeURIComponentの逆 すべてのパーセントエンコードシーケンスをデコード

経験則:URLに挿入する値(クエリパラメータの名前と値、ユーザーデータを含むパスセグメント)をエンコードする場合はencodeURIComponentを使用します。すでに完全な構造的に正しいURLがあり、転送の安全性を確保したいだけの場合はencodeURIを使用します。完全なURLにencodeURIComponentを使うと、プロトコルとホストのスラッシュやコロンもエンコードされて壊れてしまいます。

よくある質問

URLエンコーディングとは?

URLエンコーディング(パーセントエンコーディング)は、URL内の特殊文字と非ASCII文字をUTF-8バイト値を表す2桁の16進数が続く%に変換して安全なフォーマットにします。RFC 3986で定義された許可されたASCIIサブセットのみの文字をURLに含めることを保証し、パースエラーや曖昧さを防ぎます。

encodeURIとencodeURIComponentの違いは?

encodeURIは完全なURL用で、:///?&=などの構造的な文字はURL構造の一部であるためエンコードしません。encodeURIComponentは個々の値(クエリパラメータ値など)用で、それらの構造的な文字もエンコードするため、値がそれが埋め込まれたURL構造を壊すことはありません。ユーザー提供のデータをURLに挿入する場合は常にencodeURIComponentを使用してください。

URLのスペースにおける%20と+の違いは?

%20はスペースの普遍的に正しいパーセントエンコーディングで、URLのどの部分でも有効です。+記号はクエリ文字列内でコンテンツタイプがapplication/x-www-form-urlencoded(HTMLフォーム送信のデフォルト)の場合にのみスペースを表します。URLパスでは+はリテラルのプラス記号であり、スペースではありません。最大の互換性と明確さのために、プログラム的に構築するURLではスペースのエンコードに%20を優先してください。

URL内のUnicode文字はどのようにエンコードされる?

Unicode文字はUnicodeコードポイントから直接パーセントエンコードされるわけではありません。まず文字がUTF-8バイトシーケンスに変換され、次に各バイトが個別にパーセントエンコードされます。例えば、絵文字の🚀(U+1F680)のUTF-8表現はF0 9F 9A 80で、%F0%9F%9A%80にエンコードされます。JavaScriptのencodeURIComponentはこれを自動的に処理するため、非ASCII文字を含むユーザー入力のエンコードには最も安全なオプションです。

関連する開発者ツール