HTML textarea到javascript并保持换行符答案

【问题标题】：HTML textarea to javascript and keep line breakHTML textarea到javascript并保持换行符
【发布时间】：2019-03-30 04:18:58
【问题描述】：

我正在尝试通过 JavaScript 传递 HTML <textarea>，并希望保留换行符。前我写的时候：

Line a
Line b

结果如下：

Line a Line b

我的代码：

function textwrite(){
  thetext = document.getElementById("text_change").value;    
  document.getElementById("demo").innerHTML = thetext;
}

<textarea id='text_change' oninput='textwrite()'></textarea>
    
<p id="demo"></p>

而且我不想使用<pre> 标签。

【问题讨论】：

JavaScript: How to add line breaks to an HTML textarea?的可能重复
Preserve line breaks in textarea的可能重复

标签： javascript textarea line-breaks

【解决方案1】：

使用white-space:

white-space CSS 属性设置如何处理元素内的空白。

值pre-wrap在哪里

保留空白序列。在换行符、<br> 处换行，并根据需要填充行框。

function textwrite(){
  thetext = document.getElementById("text_change").value;    
  document.getElementById("demo").innerHTML = thetext;
}

#demo { white-space: pre-wrap; }

<textarea id='text_change' oninput='textwrite()'></textarea>
    
<p id="demo"></p>

【讨论】：

想要添加一些 cmets 来解释为什么这样可以解决问题？
@RyanWilson，用一些文档更新了答案......希望现在更有意义......谢谢
谢谢，这样好多了。来自我的 +1。
这是正确的答案，字符串会自己保存那些换行符，但是你必须指定CSS来显示它，谢谢！

【解决方案2】：

在java脚本中用</br>替换\n,\r,\n\r：

var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");

function textwrite(){
    	thetext = document.getElementById("text_change").value;  
      var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");

    	document.getElementById("demo").innerHTML = myLineBreak;
    }

<textarea id='text_change' oninput='textwrite()'></textarea>
    
    <p id="demo"></p>

【讨论】：

【解决方案3】：

为此，首先将 textBox 的 multiline 属性设置为 true，然后在每行的末尾添加："\r\n"

【讨论】：