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.

score 12 · Accepted Answer · answered Jun 01 '11 at 15:19

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

score 4 · Answer 2 · answered Jun 01 '11 at 15:19

4

http://jsfiddle.net/omnosis/8XL7n/

replace the '\n' to '<br />'

answered Jun 01 '11 at 15:19

Gergely Fehérvári

7,811
6
47
74

Your fiddle only replaces the first \n – James Montagne Jun 01 '11 at 15:23
thanks for the guidance. this only works on the first instance of the \n – superUntitled Jun 01 '11 at 15:25

score 0 · Answer 3 · answered Jun 01 '11 at 15:19

0

Why don't You just do replace on keyed value and replace it?

Here You have example - section Convert carrage returns

http://lawrence.ecorp.net/inet/samples/regexp-format.php

answered Jun 01 '11 at 15:19

Piotr Perak

10,718
9
49
86

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

3 Answers3