jQuery: keyup(): Update div with content from text area... line breaks?

Question

I have posted a working version here: http://jsfiddle.net/JV2qW/2/

I have a textarea that updates (on keyup()) a div with the text that is being entered. Everything is working as it should, except the line breaks are not being recognized.

the html:

<p>enter text</p>
<textarea id='text'></textarea>
<div id='target'></div>

and the jquery:

$('#text').keyup(function(){
      var keyed = $(this).val();
      $("#target").html(keyed);
 });

Any thoughts on how to get the \n translated to <br/> or <p> tags?

many thanks.

Answer 1

You can replace any newlines with <br/>

$('#text').keyup(function() {
    var keyed = $(this).val().replace(/\n/g, '<br/>');
    $("#target").html(keyed);
});

You can look into the MDC article about RegEx if you want to replace other things.

https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions