js用\\ n替换\\ n <br> 并显示

Question

I have textarea for input and show-div to show the input:

<textarea id="inputtext" style="height:100px"></textarea>

<button id="show">show in div</button>

<div id="showtext">

</div>

and my js:

$(function(){
 $('#show').on('click',function(){
    var text = $.trim($('#inputtext').val());
    text = text.replace(/\r?\n/g, "<br />").replace(/<br\s*[\/]?>/gi, "\n");
    $('#showtext').text(text);
 });
});

What I want is, if you give:
a
b
c

it should also show in this form. but it is showing now: abc .

here is my fiddle: http://jsfiddle.net/5gkak/

what am I doing wrong?

Answer 1

You need to change your fiddle to match this: http://jsfiddle.net/5gkak/1/

$(function(){
    $('#show').on('click',function(){
        var text = $.trim($('#inputtext').val());
        text = text.replace(/\r?\n/g, "<br />");
        $('#showtext').html(text);
    });
});

What you had was replacing the \\n with <br /> and then doing the same in reverse so <br /> was getting replaced with \\n . Also you needed to set the html of #showtext . Check out the difference of .text and .html in the jQuery docs.

There are also other options (these are from the comment sections of the question):

• CSS-only (for the formatting): http://jsfiddle.net/5gkak/2/ ( this is coolest solution IMO )
• Html-only (for the formatting): http://jsfiddle.net/5gkak/3/ (this one doesn't work for all text!)