少しのコードでWordPressのプラグインを
使わずにリアルタイムコメントプレビュー
機能を加える方法です。殆ど使わない、と
思いますが、他でも応用できるコードなの
で個人的にメモしておきたい。実装には
jQueryを使用します。

コメント欄にコメントを書いていて、長くなってくると確認するのが結構面倒だったりします。長いコメントが入るコンテンツならコメントのプレビュー機能があると親切かもしれません。

コード

こんなの↑

コメントを書いてるとプレビューにも反映される、という仕組みです。

<script type="text/javascript">
jQuery(document).ready(function(){

	//プレビュー欄をコメント欄下部に追加。
	jQuery("").add("<h3 id='preview-title'>コメントプレビュー欄</h3><div id='comment-preview'></div>").appendTo(document.body);
	jQuery("#comment-preview, #preview-title").insertAfter("#comment");

	//テキストボックスで叩かれた文字を表示する
	var $comment = '';
	jQuery('#comment').keyup(function() {
		$comment = jQuery(this).val();
		$comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
		jQuery('#comment-preview').html( $comment );
	});
});
</script>

jQuery本体は読み込まれてるの前提で。こんな感じのコードを書くだけ。セレクタとかHTMLは必要に応じて便宜変更してください。

プレビュー欄は手動でマークアップしてもいいかもですね・・・keyup()でキーボード操作によるイベントを発生させ、replace()で打たれた文字を先に追加してあったdiv内に表示させます。replace()と正規表現に関してはwebopixelさんの解説が凄く分かりやすかったです。

あとはちょろっとcss

#comment-preview {
	border: 1px solid #ccc;
	padding: 5px 15px 15px 15px;
	}
h3#preview-title {
	margin-bottom: 5px
	}

コメント欄として書きましたけど、コードそのものは工夫次第で地味にいろいろなシーンで応用できるんじゃ無いかなと思います。

以下を参考にしました。デモもあるのでぜひ触ってみてください。

How to Add Live Comment Preview to Comment Textarea without Plugin