Javascript ネタです。

ユーザーがテキストボックスに入力した文字を、そのままその画面上に表示するような処理を、Javascriptで作成する際に、エスケープする処理が必要な場合があります。

AJAX でサーバー側から取得した値を表示する場合もそうですね。

今回は、そんなときのエスケープする処理を jQuery を使ってプラグイン形式で紹介したいと思います。

知ってる人は知ってると思いますが、そもそもなぜエスケープする必要があるのか？というところから説明します。

PHPやPerlなどのプログラムを勉強された方はよく知ってると思いますが、ユーザーがテキストボックスに入力した文字をそのまま表示する場合、もしその中にHTMLタグが入っていたとします。

そうすると、（あたりまえですが）ブラウザはその文字をちゃんとしたHTMLタグだと認識してしまうからです。

たとえば、h1タグやdivタグだと特に見た目以外の影響はないですが、Javascriptを実行するようなscriptタグが入っていた場合、それを表示する際に実行されてしまいます。

最近騒がれているセキュリティ的な問題になってしまいますね。

僕が作っているWEBアプリケーションでもうっかりそれを忘れてしまい、ユーザーが入力した marquee タグ（文字が流れるタグ）がそのまま実行されてしまうということがありました。

ウザくてしかたありません。

なので、ブラウザがタグだと認識せずに文字だと認識するようにエスケープする処理が必要になってきます。

前置きはこのくらいにして、早速エスケープしてみたいと思います。

ちなみに、プラグイン形式(?)にしたのは、どうせ jQuery を利用するんだったらこの形式の方がいいかなと思っただけなので、実際に使う場合は、ただの関数でもいいです。

これだけです。

3行目の return の部分が実際の処理で、他の部分は jQuery のプラグインとしている部分です。

わかる人にはわかりますが、実はこれ、エスケープ処理なんてしていません。

じゃあ何なんだ？という感じですが、簡単に説明すると

1. div エレメントを作成
2. その中に、テキスト要素として文字列を挿入
3. 作成した div エレメントの中の要素を取得

という状態になってます。

意味わかんないですね。

２のテキスト要素として文字列を挿入という部分が、実はエスケープ処理にもなっていて、$.text() 関数を使うとブラウザが勝手にエスケープ処理を行ってくれます。

こうすることで、わざわざ正規表現で置換したりしなくても簡単にエスケープができるということです。

実際に使う場合は、

var text = 'エスケープするタグ';
text = $.escapeHTML(text);

とすると、エスケープされた文字が text へ代入されます。

テキストボックスに入力した文字がエスケープされて下に表示されます。