我有输入的文本区域和显示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/
我做错什么了?

最佳答案

你需要改变你的小提琴来匹配这个: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替换了。还需要设置#showtext的html。查看jQuery文档中.text.html的差异。
还有其他选项(这些选项来自问题的评论部分):
仅限CSS(用于格式化):http://jsfiddle.net/5gkak/2/(这是IMO最酷的解决方案)
仅Html(用于格式化):http://jsfiddle.net/5gkak/3/(此项不适用于所有文本!)

关于javascript - js将\n替换为<br>并显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24295348/

10-08 22:40
查看更多