パーセントエンコーディングとURLエンコード

Tweet

Pocket

URLで使用すべきでない文字を%xx(xxは16進数)を使い符号化することをパーセントエンコーディングという。パーセントエンコーディングはURLエンコードとも言う。ただフォームデータをポストする際の符号化(application/x-www-form-urlencoded)もURLエンコードと言うので本記事ではURLの符号化はパーセントエンコード、フォームデータの符号化はURLエンコードと書く。パーセントエンコーディングとURLエンコードは半角スペースの処理が異なる。パーセントエンコーディングは%20に符号化する。URLエンコードは+に符号化する。

» パーセントエンコーディング – Wikipedia

具体的な符号化
» Percent-encoding – Wikipedia, the free encyclopedia

// パーセントエンコーディング
// encodeURIComponent
var string1 = encodeURIComponent(' '); // 半角スペースをパーセントエンコーディング(UTF-8)
string1 === '%20'; // true
var string2 = encodeURIComponent('あ'); // 「あ」をパーセントエンコーディング(UTF-8)
string2 === '%E3%81%82'; // true

URLエンコード(application/x-www-form-urlencoded)は半角スペースを%20ではなく+へ符号化する。URLエンコード用のカスタム関数。
» XMLHttpRequestによるPOSTリクエスト

// ■ www-form-urlencodedのURLエンコーディング
function formURLEncoded(obj) {
    var params = [];
    for (var key in obj) {
        var value = obj[key];
        // パーセントエンコーディングしてからさらに半角スペース%20を+へ置換
        var param = encodeURIComponent(key).replace(/%20/g, '+')
                  + '='
                  + encodeURIComponent(value).replace(/%20/g, '+');
        params.push(param);
    }
    return params.join('&');
}
var data = {
    key1: 'テスト',
    key2: ' ' // 半角スペース
}
formURLEncoded(data); // key1=%E3%83%86%E3%82%B9%E3%83%88&key2=+