jQueryでブログ貼り付け用にHTMLコードをエスケープする

Pocket

ブログに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

以下はデモ。
上のテキストエリアにコードを入力して「エスケープ」ボタンをクリックする。


関連記事

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です