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

Question

我有textarea输入和show-div来显示输入:

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

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

<div id="showtext">

</div>

和我的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);
 });
});

我想要的是,如果你给:
a
b
c

它也应该以这种形式显示.但它现在显示:a b c.

这是我的小提琴:http://jsfiddle.net/5gkak/

我究竟做错了什么？

Answer 1

你需要改变你的小提琴来匹配这个: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);
    });
});

你遇到了什么是替换\n用<br />,然后做反向所以同样<br />是越来越有取代\n.你还需要设置html #showtext.查看jQuery文档中的差异.text和内容.html.

还有其他选项(这些选项来自问题的评论部分):

• CSS-only(用于格式化):http://jsfiddle.net/5gkak/2/(这是最酷的解决方案IMO)
• 仅限Html(格式化):http://jsfiddle.net/5gkak/3/(这个不适用于所有文本!)