2012-04-01 83 views
3

工作我有以下小腳本提交在數據庫中存儲之前預覽一些文字:換行符替換,讓他們與jquery

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

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

,但如果我換行鍵入文本卻忽視了他們,並寫入所有這些都在一行中。我如何更換換行符以便它們正確顯示?

回答

5

我假設你正在使用textarea作爲輸入。有\ n用作換行符,這對HTML沒有影響。所以,你必須與BR-標籤來替換它們:

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

這將取代斷行的第一次出現而已,代替你應該使用所有出現/ \ n/g的 – 2017-02-12 03:07:06

+1

你是完全正確的,已經更新了答案: - ) – 2017-02-13 06:10:11

5

這與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

0

從數據庫中呈現輸出時,將換行符替換爲html斷點標記。

3

你好演示在這裏:http://jsfiddle.net/STnhV/1/

希望這有助於!乾杯!

jQuery代碼:

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

​