在文本区域的 div 中设置 html 时保留换行符 - Jquery答案

【问题标题】：Preserve newlines when setting html in a div from a textarea - Jquery在文本区域的 div 中设置 html 时保留换行符 - Jquery
【发布时间】：2013-05-19 00:40:42
【问题描述】：

我得到了这个小 html -:

<div id="viewOne"></div>
<textarea id="viewTwo"></textarea>
<button id="copyToDiv" value="Copy to Div"></button>

这是我的 Jquery sn-p-:

$("#copyToDiv").on("click",function(){ $("#viewOne").html( $("#viewTwo").val() ) });

但它从 textarea 的 val 中删除了 new line characters，而我得到的是去掉了新行的字符串。设置 div 的 html 时如何保留换行符。非常感谢您的帮助:)

【问题讨论】：

标签： jquery newline

【解决方案1】：

新行会被保留，但不会转换为 HTML 新行 (<BR/>)，因此会被忽略。

您可以使用.replace 将它们转换为<BR/>：

$("#copyToDiv").on("click",function(){ $("#viewOne").html( $("#viewTwo").val().replace("\n","<br/>") ) });

【讨论】：

非常感谢 Tasos Bitsios。

【解决方案2】：

<div id="viewOne" style="white-space: pre-wrap;"></div>
<textarea id="viewTwo"></textarea>
<button id="copyToDiv" value="Copy to Div"></button>

white-space: pre-wrap; 告诉元素保留换行符和其他空白字符，实际上回答了这个老问题。

【讨论】：