替换换行符以使它们与 jquery 一起使用答案

【问题标题】：replace linebreaks to get them working with jquery替换换行符以使它们与 jquery 一起使用
【发布时间】：2012-04-15 07:55:14
【问题描述】：

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

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

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

但是如果我输入带有换行符的文本，它会忽略它们并将它们全部写在一行中。如何替换换行符以使其正确显示？

【问题讨论】：

标签： jquery html line-breaks

【解决方案1】：

我假设您正在使用文本区域进行输入。有 \n 用作换行符，在 HTML 中没有影响。所以你必须用 br-tags 替换它们：

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

【讨论】：

这将只替换第一次出现的换行符，替换所有出现的你应该使用 /\n/g

【解决方案2】：

这与 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

【讨论】：

【解决方案3】：

你好在这里演示： http://jsfiddle.net/STnhV/1/

希望这会有所帮助！干杯！

Jquery 代码：

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

【讨论】：

【解决方案4】：

在渲染数据库的输出时，将换行符替换为 html 中断标记。

【讨论】：