使用字符串新行（\ n）和渲染相同的HTML

我有一個字符串說使用字符串新行（ n）和渲染相同的HTML

string display_txt = "1st line text" +"\n" + "2nd line text";

jQuery中

，我試圖用

('#somediv').html(display_txt).css("color", "green")

很清楚我期待我的消息將顯示在兩行中，但是\ n正在消息中顯示。任何快速修復？

感謝，

來源

2011-12-20 KeenUser

使用
，而不是\ n – jantimon 2011-12-20 10:18:30

很清楚，答案就在你的問題，你想在DIV的HTML渲染錯誤信息，所以你可以使用'
'標籤 – Murtaza 2011-12-20 10:21:03

沒有什麼「非常清楚「期待兩行。相反，非常清楚的是，換行符將被渲染爲普通空間，如果需要的話只包裝行。它是HTML如何工作的，當然這也是'.html'的工作原理。 – 2011-12-20 10:24:10

使用<br />新行HTML：

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

來源

2011-12-20 10:19:18 Samich

出於某種原因，我必須將「\ n」轉義爲「\\ n」，否則它不起作用。（在Chrome 46中測試）。任何理由？ – 2015-12-17 19:05:06

請注意，這將只會替換字符串中的'\ n'字符的第一次出現。請參閱[MDN文檔]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace） – 2016-06-14 17:59:58

best'.replace（/ \ n/g，「
」）'是防止更多的換行符。 – KingRider 2016-08-05 16:36:11

的也許.text代替.html？

來源

2011-12-20 10:21:46

對我來說.html工作;） – Faizan 2016-03-10 12:44:11

設置表單元格中的CSS來

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

來源

2014-04-06 16:11:01 vsync

所以這不應該被接受的答案？ LE：我發現這隻支持IE 8+ [link]（http://www.w3schools.com/cssref/pr_text_white-space.asp） – gciochina 2016-03-17 09:04:00

這個答案比設置innerHTML要好，因爲它沒有'導致XSS漏洞。 – RobinLinus 2016-03-29 21:53:51

另外，你可以使用'white-space：pre-line;'作爲空白序列將會合併成一個空格。文字將在必要時換行，並換行。更多信息：[https://www.w3schools.com/cssref/pr_text_white-space.asp](https://www.w3schools.com/cssref/pr_text_white-space.asp） – JiaHao 2017-07-17 01:56:22

你可以使用，而不是一個div預先標記。這會自動以正確的方式顯示您的\ n。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
     var display_txt = "1st line text" +"\n" + "2nd line text"; 
     $('#somediv').html(display_txt).css("color", "green"); 
}); 
</script> 
</head> 
<body> 

<pre> 
<p id="somediv"></p> 
</pre> 

</body> 
</html>

來源

2015-07-22 08:05:09

使用字符串新行（\ n）和渲染相同的HTML

回答

相關問題