Javascript で HTMLエスケープを行うPHP関数、htmlspecialchars を実装で紹介されているjavascriptを試してみた。

htmlspecialcharsは下記のような変換をおこなってくれる。

• '&' (アンパサンド) は '&' になります。
• ENT_NOQUOTESが設定されていない場合、'"' (ダブルクォート) は '"'になります。
• ENT_NOQUOTESが設定されている場合のみ、''' (シングルクオート) は '''になります。
• '<' (小なり) は '&lt;' になります。
• '>' (大なり) は '&gt;' になります。

javascriptサンプル

<script language="javascript" type="text/javascript">
function Esc(){
　var ch = document.getElementById("htmlspecialchars").innerHTML;
　var eschtml = htmlspecialchars(ch);
　document.getElementById("echo").innerHTML = eschtml;
　alert(eschtml);
}
function htmlspecialchars(ch) {
　ch = ch.replace(/&/g,"&amp;") ;
　ch = ch.replace(/"/g,"&quot;") ;
　ch = ch.replace(/'/g,"&#039;") ;
　ch = ch.replace(/</g,"&lt;") ;
　ch = ch.replace(/>/g,"&gt;") ;
　return ch ;
}
</script>

htmlサンプル

<div id="htmlspecialchars">
<h4 id="&hsc&">htmlspecialchars</h4>
<p class='test'>ここをエスケープします。</p>
</div>
<p><a href="javascript:;" onclick="Esc()">エスケープ</a></p>
<div id="echo">
</div>

実効結果

IE7だとシングルクォートとダブルクォートが表示されないが で見るとしっかり変換されているようだ。でも書き出すとなんか変な気がする。なんで&だけ&amp;で出るのだろう・・・相変わらずjavascriptの挙動がよくわからない・・・