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

Tam*_*ara 3 html jquery line-breaks

我有以下小脚本预览一些文本,然后将其提交到数据库中存储:

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

    input.keyup(function(e) {
        preview.html(input.val());
    });
});
Run Code Online (Sandbox Code Playgroud)

但如果我用换行符键入文本,它会忽略它们并将它们全部写入一行.我怎么能更换换行符以便它们正确显示?

T.J*_*der 5

它与jQuery无关:HTML中的Linebreaks并不重要,它们只是空格(如空格和制表符).

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

preview.html(input.val());
Run Code Online (Sandbox Code Playgroud)

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

请注意,您也没有转义HTML特殊字符(如<&),因此如果您键入它们,您的输出可能不正确.所以你可以选择:

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

最后,我想钩keypress以及keyup,所以你看,通过按键重复创建字符(火灾keypress,但没有keyup).

实例 | 资源


Dan*_*ter 5

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

input.val().replace(/\n/g, "<br />");
Run Code Online (Sandbox Code Playgroud)