Live comment previewing using the jQuery library

OK, I'll admit it, I'm like 2 years behind the bandwagon, but I'm totally addicted to jQuery right now. I can hack my away around Perl and PHP well enough, but I've never really done much with javascript other than tinkering with form elements here and there. I just recently, about two weeks ago, bought the book jQuery in Action from Amazon and I can't put it down.

jQuery makes everything so ridiculously easy, it keeps it clean and "unobtrusive", i.e. keeps the "behavior" out of the mark-up. So anyways, I realized that sNews needed a live comment preview, so I put this together, I've only tested this with jQuery 1.3.1, so if you don't already use jQuery, either download the library and serve it locally from your server, or use Google's Ajax libs... go ahead, it's encouraged.

Assuming you want to use Google, insert this code into the head of your index.php;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Then simply place this code below it, still within the head of your index.php file;

<script type="text/javascript">
$(document).ready(function() {
    $('#text').one('focus',function() {
        $('#text').parent().after('<div><label for="comment-preview">Comment Preview</label>:</div><div id="comment-preview"></div>');
    });
    var $comment = '';
    $('#text').keyup(function() {
        $comment = $(this).val();
        $comment = $comment.replace(/<\/?[^>]+>/g,"").replace(/\n\n+/gi, '<br /><br />'); // this strips tags and then replaces new lines with breaks
        $('#comment-preview').html( $comment );
    });
});
</script>

Add the styles below to your style sheet if you like, that's it, now you have a basic comment preview for your sNews, once I get some more jQuery skills under my belt, I'll try and work the gravatars into the preview.

#comment-preview {
  background:#fff;
  border:1px solid #ccc;
  padding:10px 5px;
  width:97%
}