encodeURI関数/encodeURIComponent関数(URIをエンコードする)

JavaScript のグローバル関数のひとつである encodeURI は引数に指定した URI の中の特別な文字をエンコードします。また encodeURIComponent は引数に指定した URI の中で使われる文字列の中の特別な文字をエンコードします。ここでは encodeURI 関数および encodeURIComponent 関数の使い方について解説します。

(Last modified: 2023年02月03日)

encodeURI関数の使い方

グローバル関数のひとつである encodeURI 関数は、引数に指定した文字列の中に含まれる特別な文字をエンコードします。書式は次の通りです。

encodeURI(strURI)

引数には対象となる文字列を指定してください。文字列の中の特別な文字がエンコードされた新しい文字列が戻り値として返されます。

encodeURI 関数では次の文字以外の文字がすべてエンコードされます。(英数字というのは A～Ｚ、a～z、0～9 までの文字のことです)。例えば日本語の文字などはすべてエンコードされます。

英数字 - _ . ! ~ * ' ( ) # ; , / ? : @ & = + $ 

encodeURI 関数は、引数の文字列に URI 全体(例えば https://www.example.com/ など)を指定する場合に使用される関数です。その為、 URI の中で特別な意味を持つ / や & などの文字はエンコードされません。その為、パラメータの値に & の文字が含まれている場合には問題となります。

次のサンプルをみてください。

let uri = 'https://www.example.com/ブログ/park.html'
console.log(encodeURI(uri));
>> https://www.example.com/%E3%83%96%E3%83%AD%E3%82%B0/park.html

let uri = 'https://www.example.com/公園.html?place=sea&park'
console.log(encodeURI(uri));
>> https://www.example.com/%E5%85%AC%E5%9C%92.html?place=sea&park

1 番目の URI のようなケースでは問題ありませんが、 2 番目の URI のようにパラメータの中で値として & が含まれているような場合 encodeURI 関数ではエンコードされないためこういった利用できません。この場合はパラメータの値だけをエンコードする encodeURIComponent 関数を使用してください。

decodeURI関数の使い方

encodeURI 関数によってエンコードされたものをデコードするにはグローバル関数のひとつである decodeURI 関数を使用します。書式は次の通りです。

decodeURI(strEncodedURI)

引数には対象となるエンコードされた文字列を指定してください。 encodeURI 関数でエンコードされた文字をデコードした新しい文字列が戻り値として返されます。

次のサンプルをみてください。

let encodedURI = 'https://www.example.com/%E3%83%96%E3%83%AD%E3%82%B0/park.html'
console.log(decodeURI(encodedURI));
>> https://www.example.com/ブログ/park.html

エンコードされた URI をデコードして元に戻すことができました。

encodeURIComponent関数の使い方

グローバル関数のひとつである encodeURIComponent 関数は、引数に指定した文字列の中に含まれる特別な文字をエンコードします。書式は次の通りです。

encodeURIComponent(str)

引数には対象となる文字列を指定してください。文字列の中の特別な文字がエンコードされた新しい文字列が戻り値として返されます。

encodeURIComponent 関数では次の文字以外の文字がすべてエンコードされます。(英数字というのは A～Ｚ、a～z、0～9 までの文字のことです)。例えば日本語の文字などはすべてエンコードされます。

英数字 - _ . ! ~ * ' ( )

encodeURIComponent 関数では encodeURI 関数ではエンコードされなかった次の文字もエンコードの対象となります。

# ; , / ? : @ & = + $ 

encodeURIComponent 関数は、引数の文字列に URI の中に含まれるパラメータ部分などだけを指定する場合に使用される関数です。その為 & などの文字もエンコードされます。引数に URI 全体の文字列を指定してしまうと / も含めてエンコードされてしまうので問題となります。

次のサンプルをみてください。

let uri = 'https://www.example.com/公園.html?';
let para = 'place=sea&park'
console.log(encodeURIComponent(para));
>> place%3Dsea%26park

encodeURIComponent 関数は & も含めてエンコードを行うのでパラメータの中の値に & などが含まれていればエンコードした値を返してくれます。

もう一つサンプルをみてください。

let uri = 'https://www.example.com/ブログ/park.html'
console.log(encodeURIComponent(uri));
>> https%3A%2F%2Fwww.example.com%2F%E3%83%96%E3%83%AD%E3%82%B0%2Fpark.html

URI を表す文字列全体を引数に指定してしまうと、コロン(:)やスラッシュ(/)等も含めてエンコードしてしまいます。この場合は encodeURI 関数を使用してください。

decodeURIComponent関数の使い方

encodeURIComponent 関数によってエンコードされたものをデコードするにはグローバル関数のひとつである decodeURIComponent 関数を使用します。書式は次の通りです。

decodeURIComponent(strEncoded)

引数には対象となるエンコードされた文字列を指定してください。 encodeURIComponent 関数でエンコードされた文字をデコードした新しい文字列が戻り値として返されます。

次のサンプルをみてください。

let strEncode = 'place%3Dsea%26park'
console.log(decodeURIComponent(strEncode));
>> place=sea&park

エンコードされた文字列をデコードして元に戻すことができました。

-- --

encodeURI 関数および encodeURIComponent 関数の使い方について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。