jQuery將換行符轉換爲br（nl2br等效）

我讓jQuery帶一些textarea內容並將其插入到li中。jQuery將換行符轉換爲br（nl2br等效）

我希望它在視覺上保留換行符。

必須有一個非常簡單的方法來做到這一點...

2010-05-27 gbhall

XSS注意：如果你這樣做，這聽起來像你直接混合用戶輸入和
's，這意味着你要麼顯示換行符或
，因此*可能*開放給XSS攻擊，這如果您的輸入來自網站上的任何其他用戶。 – user420667 2017-01-31 03:08:48

145

演示：http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) { 
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';  
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2'); 
}

http://phpjs.org/functions/nl2br:480

來源

2010-05-27 07:56:54

謝謝你完美的作品。奇怪這不是jQuery的官方功能。 – gbhall 2010-05-27 08:03:30

原因jQuery並不是要替換原生javascript函數，而是替換，它專注於CSS選擇器鏈接和輕鬆訪問！也許在未來的版本;-) – 2010-05-27 08:08:56

太棒了。幫助我解決了IE7不支持空格的問題：pre-wrap – 2010-11-10 22:45:20

，你可以簡單地做：

textAreaContent=textAreaContent.replace(/\n/g,"<br>");

來源

2010-05-27 07:54:17 mck89

乾杯，這種工作，除了它將多行換行視爲單行換行。 – gbhall 2010-05-27 08:02:50

我已更新它，現在它使用正則表達式，因此如果您想將多個換行符視爲單個br，請使用以下命令更改正則表達式：/ \ n +/g – mck89 2010-05-27 08:05:46

謝謝。希望有人會發現你的答案有用，但下面的函數也適用。我覺得有點不好，你正在做更多的努力，但一個功能是更可取的。 – gbhall 2010-05-27 08:09:29

（最好是在一般的JS函數庫）將這個在你的代碼：

String.prototype.nl2br = function() 
{ 
    return this.replace(/\n/g, "<br />"); 
}

用法：

var myString = "test\ntest2"; 

myString.nl2br();

創建一個字符串原型功能允許您在任何字符串上使用它。

來源

2012-03-27 23:22:07 jnl

我想知道這是否有效？ – jackkorbin 2014-08-22 11:38:27

是的，這對我很好。很簡單的解決方案 – 2014-10-31 15:31:31

這太神奇了！ – 2015-10-27 00:11:48

解決方案

使用此代碼

jQuery.nl2br = function(varTest){ 
    return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>"); 
};

來源

2014-11-26 07:43:43

在改變渲染而不是改變內容的精神，以下CSS 使得每個新行更像一個<br>：

white-space: pre; 
white-space: pre-line;

爲什麼兩條規則：pre-line隻影響換行（感謝線索@KevinPauli）。 IE6-7和其他舊瀏覽器回落到更極端的pre其中還包括nowrap並呈現多個空間。這些和其他設置（pre-wrap）在mozilla和css-tricks（謝謝@Sablefoste）的詳細信息。

雖然我通常不喜歡S.O.偏好second-guessing the question而不是回答它，在這種情況下用<br>標記替換換行符可能會增加易受攻擊注入攻擊與未清洗的用戶輸入。當您發現自己將.text()呼叫更改爲.html()時，您正在穿越明亮的紅線，這是字面問題意味着必須完成的。（感謝@AlexS突出顯示了這一點。）即使您當時排除了安全風險，未來的更改也可能無意中引入了它。相反，這個CSS允許你在沒有標記的情況下使用更安全的.text()來獲得強大的換行符。

來源

2016-09-09 15:43:31

根據具體情況，這是最簡單的解決方案，並且最能真正回答問題。你也可以考慮任何其他的'white-space：'選項，比如'pre-wrap'。見https://css-tricks.com/almanac/properties/w/whitespace/ – Sablefoste 2016-10-28 14:16:16

這真的是最好的答案 - 字符串替換解決方案意味着需要使用'.html（）'來設置內容，然後依次將允許用戶插入任意的HTML，除非事先過濾出來。 – 2017-07-01 20:19:26

關於''的好處。html（）'危險@AlexS，試圖合併。 – 2017-07-02 17:15:23

改善@Luca Filosofi的接受的答案，

如果需要的話，改變這個正則表達式的開始子句是/([^>[\s]?\r\n]?)還將則會忽略，而不只是一個標籤，其中新行來標記和一些空白後的情況下，緊接着一個換行符

來源

2017-05-19 19:41:25 phlare

另一種插入從DOM中的文本區域保持換行符文本使用Node.innerText屬性，它代表一個節點及其後代的呈現文本內容。

作爲一種吸氣劑，它近似於用戶在用光標高亮顯示元素內容然後複製到剪貼板時會得到的文本。

該屬性在2016年成爲標準，並得到現代瀏覽器的大力支持。 Can I Use：97％全球覆蓋當我發佈這個答案。

來源

2017-08-31 08:34:56 Volo

jQuery將換行符轉換爲br（nl2br等效）

回答

相關問題