Question

我提交了一些小脚本来预览一些文本，然后再将其提交到数据库中存储：

jQuery(function($) {
    var input = $('#contents'),
    preview = $('#previewaccordion div.viewcontents');

    input.keyup(function(e) {
        preview.html(input.val());
    });
});

但是如果我用换行符键入文本，它会忽略它们并将它们全部写入一行。我怎样才能更换换行符以便它们正确显示？

Answer 1

它与jQuery无关：HTML中的换行符并不重要，它们只是空格（如空格和制表符）。

要在HTML中强制换行，请使用<br>标记。所以你可以改变

preview.html(input.val());

到

preview.html(input.val().replace(/\r?\n/g, '<br>'));

请注意，您也没有转义HTML特殊字符（例如<或&），因此如果您输入它们，您的输出可能不正确。所以你可以选择：

preview.html(input.val().replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\r?\n/g, '<br>'));

最后，我会挂钩keypress以及keyup，因此您会看到通过键重复创建的字符（触发keypress，而不是keyup）。

Live example | source

Answer 2

我假设您使用textarea作为输入。有\ n用作换行符，对HTML没有影响。所以你必须用br-tags替换它们：

input.val().replace(/\n/g, "<br />");

Answer 3

Hiya 演示： http://jsfiddle.net/STnhV/1/

希望这有帮助！干杯！

Jquery代码：

$(document).ready(function() {
    $('#inputfoo').keyup(function() {
       $('#outputbar').html($(this).val().replace(/\n/g,'<br/>')); 
    });
});

Answer 4

从数据库中呈现输出时，将换行符替换为html break标记。

替换换行符以使它们使用jquery

4 个答案: