URL デコード JavaScript

1. URL のエンコードとデコードの必要性
2. JavaScript での URL デコード
3. まとめ

この記事では、URL のデコードと、JavaScript を使用してエンコードされた URL をデコードする方法について説明します。

URL のエンコードとデコードの必要性

URL に含める必要がある特定の文字があります。 URL には、0 ～ 9 の数字や a ～ z の文字などの US-ASCII 文字、およびいくつかの特殊文字を含めることができます。

ただし、一部の URL には、US-ASCII にない文字または特殊文字を含めることができます。 そのとき、URL エンコーディングが必要になります。

URL エンコーディングを使用すると、US-ASCII テーブル以外の特殊文字が含まれている場合でも、URL を適切な形式、つまり許容される形式にすることができます。

以下の例を参照してください。

http://example.us/url encoding

上記の URL では、URL とエンコードの間にギャップ/スペースがあり、これは URL 形式では受け入れられません。 URL をエンコードすると、ギャップがいくつかの特殊文字に置き換えられ、URL は適切な形式になります。

URL デコードを使用して、エンコードされた URL をデコードできます。 このプロセスは、URL エンコーディングの逆です。

URL をデコードすると、より読みやすい方法で URL を取得できます。

JavaScript での URL デコード

JavaScript では、エンコードされた URL をデコードする方法が 3つあります。

1. unescape()メソッド
2. decodeURI() メソッド
3. decodeURIComponent() メソッド

unescaped() メソッドを使用してエンコードされた URL をデコードする

このメソッドは JavaScript では非推奨です。つまり、この関数は JavaScript では使用されません。 この関数を使用する代わりに、他の 2つのオプションを使用して、エンコードされた URL をデコードできます。

decodeURI() メソッドを使用してエンコードされた URL をデコードする

JavaScript には、URL をエンコードする encodeURI() メソッドと、エンコードされた URL をデコードする decodeURI() メソッドがあります。 encodeURI() メソッドは、アドレスのドメイン関連部分 (HTTPS、ドメイン名など) を除いて URL アドレスをエンコードします。

decodeURI() は encodeURI() の逆のメソッドで、エンコードされた URL を通常の文字でデコードします。 以下は decodeURI() および encodeURI() メソッドの構文です。

構文：

// Syntax for encoding
encodeURI(content to encode)

// Syntax for decoding
decodeURI(content to decode)

デコード プロセスを確認するには、エンコードされた URL が必要です。 サンプル URL を見てみましょう。

http://example.us /url encoding

最初のステップとして、URL を以下の文字列として変数に割り当てる必要があります。

let exURL = ' http://example.us /url encoding';

次に、encodeURI() メソッドを使用してエンコードし、console.log() メソッドを使用して出力します。

let encodedURL = encodeURI(exURL);
console.log(encodedURL);

上記のステートメントでは、encodeURI() メソッドを encodedURL という変数に割り当てています。 別の方法として、以下のように console.log() 関数内で encodeURI() 関数を直接使用できます。

console.log(encodeURI(exURL));

どちらの方法でも同じ結果が得られるので、最初のパスに進みましょう。 これで、完全な JavaScript コードは次のようになります。

完全なコード:

let exURL = 'http://example.us /url encoding';
let encodedURL = encodeURI(exURL);
console.log(encodedURL);

出力：

decodeURI() メソッドを使用してデコードしましょう。 まず、以下のように、decodeURI() プロセスを別の変数に割り当てることができます。

let decodedURL = decodeURI(encodedURL);
console.log(decodedURL);

出力：

ご覧のとおり、上記のプロセスからデコードされた URL を取得します。

decodeURIComponent() メソッドを使用してエンコードされた URL をデコードする

decodeURIComponent() メソッドは、encodeURIComponent() メソッドの逆のメソッドです。 encodeURIComponent() メソッドは、URL アドレスをそのドメイン関連部分でエンコードします。

また、encodeURI() メソッドでは行われない一連の特殊文字をエンコードします。 ユニークキャラクター一覧はこちら。

decodeURIComponent() アプローチは、エンコードされた URL を関連する文字と記号でデコードします。

構文：

// Syntax for encoding
encodeURIComponent(content to encode)

// Syntax for decoding
decodeURIComponent(content to decode)

URLの例を見てみましょう。

https://stackoverflow.com/url+encoded string+in javascript

上記の例では、URL 内に spaces、/、:、および + マークがあります。 encodeURIComponent() メソッドを使用して URL をエンコードしましょう。

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';
let encoded = encodeURIComponent(exURL);
console.log(encoded);

出力：

それでは、以下のように decodeURIComponent() メソッドを使用してデコードしてみましょう。

let decoded = decodeURIComponent(encoded);
console.log(decoded);

上記のように、decodeURIComponent() メソッドを変数に割り当てました。 console.log() メソッドを使用して出力します。

出力：

ご覧のとおり、エンコードした URL がデコードされた URL として提供されています。

完全なコード:

let exURL = 'https://stackoverflow.com/url+encoded string+in javascript';

let encoded = encodeURIComponent(exURL);
console.log(encoded);

let decoded = decodeURIComponent(encoded);
console.log(decoded);

まとめ

この記事では、JavaScript を簡単に紹介し、URL のエンコードとデコードについて説明しました。 次に、いくつかの例とともに、主に decodeURI() と decodeURIComponent() の 2つのメソッドについて説明しました。

どちらの方法も、要件に応じて適切な方法を使用するために 2つの方法で機能します。 unescape() メソッドは最近非推奨になりましたが、代わりに他の 2つのメソッドを解決策として使用できます。