在字符串中使用新行(\n)并在HTML中呈现相同的行

Question

在字符串中使用新行(\n)并在HTML中呈现相同的行

我有一个字符串说

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

Run Code Online (Sandbox Code Playgroud)

在Jquery,我正在尝试使用

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

Run Code Online (Sandbox Code Playgroud)

非常清楚我期待我的msg以2行显示,而是在消息中显示\n.有什么快速解决方法吗？

谢谢,

Answer 1

vsy*_*ync 140

将表格单元格中的css设置为

white-space:pre-wrap;

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

body{ white-space:pre-wrap; }

Run Code Online (Sandbox Code Playgroud)

所以这不应该是公认的答案吗？LE:我看到,这只是在IE支持8+ [链接](http://www.w3schools.com/cssref/pr_text_white-space.asp) (4认同)
此外，您可以使用`white-space：pre-line;`，因为空白序列会折叠成一个空白。文本将在必要时自动换行，并在换行符上显示。有关更多信息，请访问：[https://www.w3schools.com/cssref/pr_text_white-space.asp](https://www.w3schools.com/cssref/pr_text_white-space.asp） (3认同)
这个答案比设置innerHTML更好，因为它不会引起XSS漏洞。 (2认同)
@ste_irl-你是什么意思？\ n表示应该打印新行，并且确实会打印 (2认同)

Answer 2

Sam*_*ich 67

使用<br />在HTML新行:

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

Run Code Online (Sandbox Code Playgroud)

我认为@vsync 的答案应该是公认的。 (4认同)
请注意,这只会替换字符串中第一个出现的`\n`字符.请参阅[MDN文档](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) (2认同)
最好的`.replace(/ \n/g,"<br />")`是防止更多新行. (2认同)

Answer 3

Fra*_*ald 5

您可以使用pre标签而不是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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，12 月前
查看次数：	182491 次
最近记录：	8 年，4 月前