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

広告

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

encodeURI関数の使い方

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

encodeURI(strURI)

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

encodeURI 関数では次の文字以外の文字がすべてエンコードされます。(英数字というのは A~Z、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~Z、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 関数の使い方について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。