HTML textarea到javascript并保持换行符

Posted 2023-05-07

【中文标题】HTML textarea到javascript并保持换行符

【英文标题】：HTML textarea to javascript and keep line break

【发布时间】：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的可能重复

【参考方案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"