decodeURIComponent はプラス文字をデコードしない

decodeURIComponent はプラス文字をデコードしない というのをすぐに忘れてしまい、何度も何度も同じバグを作り込んでしまうのです。なので、エントリとして言語化して、ちゃんと記憶に定着させようといったところです。

次のコードを実行しても、プラス文字がデコードされず "新宿区+歌舞伎町" のままとなります。

// 新宿区+歌舞伎町
var query = '%E6%96%B0%E5%AE%BF%E5%8C%BA+%E6%AD%8C%E8%88%9E%E4%BC%8E%E7%94%BA'; 
alert(decodeURIComponent(query));

ですので、次のように、プラス文字を %20 に置換してからデコードするようにします。

// 新宿区+歌舞伎町
var query = '%E6%96%B0%E5%AE%BF%E5%8C%BA+%E6%AD%8C%E8%88%9E%E4%BC%8E%E7%94%BA';
alert(decodeURIComponent(query.replace(/\+/g, '%20')));

ただし、この対応の良し悪しは見解が分かれるところですので、この曖昧？な対応が気になるなら、(結局どうすればよいのかさらに迷ってしまうかもしれませんが)ネットでの解説などを読んでみてください。

少し話題がそれますが、String.replace で、複数マッチして繰り返し置換したいときは、スラッシュ表記の正規表現を使って g (グローバルマッチ) を指定するしかないと思い込んでいましたが、

次のように、第3引数に g (グローバルマッチ) を指定しても Firefox では同じ振る舞いになる とのことです。

// 新宿区+歌舞伎町
var query = '%E6%96%B0%E5%AE%BF%E5%8C%BA+%E6%AD%8C%E8%88%9E%E4%BC%8E%E7%94%BA';
alert(decodeURIComponent(query.replace('+', '%20', 'g')));

知らなかったなぁ。(雑学)