特定の文字を1文字～4文字のUTF-8文字エンコーディングで表されるエスケープシーケンス(特殊文字)に置き換えることで、URIをエンコードします。 (2つの"サロゲート"文字から構成される文字は、4文字のエスケープシーケンスになります)

文法

encodeURIComponent(str);

引数	説明
str	URI構成の文字列を指定します。

encodeURIは、下記の一覧の文字を除く全ての文字を、適切なUTF-8のエスケープシーケンスに置換します。

タイプ	対象文字
エスケープされない文字	アルファベット、数字、 - _ . ! ~ * ' ( )

上位・下位のペアになっていないサロゲートのエンコードを試みると、 URIErrorがスローされることに注意してください。(下記例を参照)

// 上位・下位のペアOK
alert(encodeURIComponent('\uD800\uDFFF'));

// 孤立した上位サロゲートのため、
// "URIError: malformed URI sequence"をスロー
alert(encodeURIComponent('\uD800'));

// 孤立した下位サロゲートのため、
// "URIError: malformed URI sequence"をスロー
alert(encodeURIComponent('\uDFFF'));

サーバーへ予期しないリクエストが送られることを避けるために、 何らかのユーザー入力パラメーターがURIの一部として渡される際は、encodeURIComponentを使用するべきです。 例えば、ユーザーがコメント入力欄に"Thyme &time=again"と打ち込まれるようなケースです。 encodeURIComponentを使用しなければ、comment=Thyme%20&time=againとして使用され、 アンド(アンパサンド)とイコールの組み合わせであるため、キーと値のペアとして認識されてしまいます。 代わりにPOSTのcommentキーに"Thyme &time=again"にしたとすると、 2つのPOSTキーを持つことになり、1つは"Thyme "、もう1つ(time)は"again"になります。

application/x-www-form-urlencoded(POST)では、空白は'+'に置き換えられるため、 "+"を"%20"にする追加の置換を、encodeURIComponentの後に行うと良いかもしれません。(翻訳に自信なし)

より厳格なRFC 3986 (!、'、(、)*を予約)に従うために、 これらの文字が正式なURIの区切りの用途を持たなくとも、次のように安全に使用することができます。

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

注意事項

下記の例は、UTF-8のContent-Dispositionと、 Linkサーバーのレスポンスヘッダーのパラメーターで必要とされる特別なエンコーディングを提供します。 (例えば、UTF-8のファイル名)

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''"
  + encodeRFC5987ValueChars(fileName);

console.log(header);
// "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
// をログ出力


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // RFC3986は"!"を予約しますが、RFC5987では予約しないため、
        // エスケープする必要はありません。
        replace(/['()]/g, escape). // %27 %28 %29
        replace(/\*/g, '%2A').
            // 下記のパーセントエンコーディング( | 、' 、^ )は、
            // RFC5987では要求されないため、
            // コードを読みやすくするために省略しても構いません。
            replace(/%(?:7C|60|5E)/g, unescape);
}

仕様

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

関連項目

• decodeURI
• encodeURI
• decodeURIComponent

 Back to top