ブログにHTMLコードを貼り付けるときpreタグでもエスケープしないとうまく表示されない。
JavaScriptでエスケープする方法を調べてみたら、手動で置換してたり一行にしか対応してなかったり、空白が全部 になったり、あまり思ったような物がなかった。
WordPressではビジュアルモードにコードを貼り付けた後、HTMLモードにすればエスケープしてくれるんだけど、jQueryでもHTMLをエスケープできるといいなと思い、ツールを作ってみた。
<script type="text/javascript">
function escapeTextArea(){
var pre = $('<pre/>').text($('#rawText').val());
$('#escapedText').val(pre.html()); // textareaに表示
$('#escapedText').after(pre.text(pre.html())); // preタグを追加して表示
}
</script>
<textarea id="rawText" cols="60" rows="10"></textarea><br>
<button onclick="escapeTextArea();">エスケープ</button><br>
<textarea id="escapedText" onclick="this.select();" cols="60" rows="10"></textarea>
textarea#rawTextに入力された生のHTMLを生成したjQueryオブジェクト(ここではpre要素)にtextメソッドで入力する。
textメソッドではHTMLとして解釈せずテキストとして表示されるように自動的にエスケープしてくれる。
textarea#escapedTextにエスケープされた内容をhtmlメソッドで取り出し入力する。
textareaではなくpreで表示したい場合は、ブラウザに解釈されてしまうので、そのままではダメで、さらにtextメソッドを通してエスケープされてから表示するようにする必要がある。
参考記事: jQuery を使ってHTMLタグをエスケープする – hiromitz @ blog for designing and development
以下はデモ。
上のテキストエリアにコードを入力して「エスケープ」ボタンをクリックする。
