在字符串中使用新行（\n）并在 HTML 中呈现相同的内容答案

【问题标题】：Using new line(\n) in string and rendering the same in HTML在字符串中使用新行（\n）并在 HTML 中呈现相同的内容
【发布时间】：2012-01-24 07:47:27
【问题描述】：

我有一个字符串说

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

在 Jquery 中，我正在尝试使用

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

很明显，我希望我的 msg 显示为 2 行，但 \n 却显示在消息中。有什么快速解决办法吗？

谢谢，

【问题讨论】：

很清楚，答案就在你的问题中，你试图将div中的错误信息渲染为html，所以你可以使用<br />标签
期待两行并没有什么“非常清楚”的。相反，很明显换行符将呈现为纯空格，仅在需要时换行。 HTML 是这样工作的，当然.html 也是这样工作的。
我只是说我将字符串存储为“1st line text”和“2nd line text”的上下文，很明显我想要两行，而不是html工作:) 谢谢。
相关：stackoverflow.com/questions/9726970/…

标签： jquery html string newline

【解决方案1】：

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

white-space:pre-wrap;

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

body{ white-space:pre-wrap; }

【讨论】：

所以这不应该是公认的答案吗？ LE：我看到这仅在 IE 8+ 中受支持 link
这个答案比设置innerHTML要好得多，因为它不会导致XSS漏洞。
此外，您可以使用white-space:pre-line;，因为空白序列将折叠成单个空白。文本将在必要时换行，并在换行符处换行。更多信息：https://www.w3schools.com/cssref/pr_text_white-space.asp
此答案不会将文本中的 \n 转换为换行符
@ste_irl - 你是什么意思？ \n 表示应该打印一个新行并且它会打印它

【解决方案2】：

在 html 中使用<br /> 换行：

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

【讨论】：

出于某种原因，我必须将“\n”转义为“\\n”，否则它不起作用。（在 Chrome 46 中测试）。有什么原因吗？
请注意，这只会替换字符串中第一次出现的\n 字符。见MDN documentation
最好的.replace(/\n/g, "<br />") 是防止更多的换行符。
我认为@vsync 的答案应该是公认的。
完美运行。谢谢。

【解决方案3】：

您可以使用 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>

【讨论】：

【解决方案4】：

也许是.text 而不是.html？

【讨论】：

【解决方案5】：

我在从数据库中获取数据并希望显示包含\n 的字符串时遇到以下问题。上面的解决方案都不适合我，我终于想出了一个解决方案：https://stackoverflow.com/a/61484190/7251208

【讨论】：