如何在HTML文本区域添加换行符？

我正在<textarea>用JavaScript 编辑。问题是当我在其中换行时，它们不会显示。我怎样才能做到这一点？

我正在获取编写函数的值，但不会产生换行符。

问题来自以下事实：换行符（\n\r？）与HTML <br/>标签不同

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

更新

由于许多评论和我自己的经验告诉我，该<br> 解决方案无法按预期工作，因此这里是一个如何在textarea使用'\ r \ n' 追加新行的示例

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

我决定对此进行编辑，而不是作为一个新问题进行编辑，因为这是一个非常普遍的答案，以至于错误或不完整。

如果您使用常规的Java脚本，并且需要将字符串分配给文本区域值，则

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

您需要更换\n或< br >以\\\n

否则，它将Uncaught SyntaxError: Unexpected token ILLEGAL在所有浏览器上显示。

也许有人觉得这很有用：

我遇到了从服务器变量传递到javascript变量的换行符的问题，然后javascript将它们写入textarea（使用基因敲除（knockout.js）值绑定）。

解决方案是两次转义新行：

orginal.Replace("\r\n", "\\r\\n")

在服务器端，因为只有一个转义字符，无法解析javascript。

您需要\n用于linebreaks内部textarea

如果要在自己的页面内显示文本，则可以使用<pre>标记。

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

换行符只是浏览器的空白，不会与普通空格（“”）区别对待。要换行，必须插入<BR />元素。

解决该问题的另一种尝试：在textarea中键入文本，然后在按钮后面添加一些JavaScript，以将不可见的字符转换为可读的字符并将结果转储为DIV。这将告诉您浏览器的需求。

我有一个ID为#infoartist的textarea，请遵循：

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

在javascript代码中，我将获得textarea的值，并用<br />标记替换转义的新行（\ n \ r），例如：

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

因此，如果您使用的是jquery（例如我）：

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

希望对您有帮助。:-)

如果只需要通过换行符将testarea的值发送到服务器，请使用nl2br

这是我为遇到的同样麻烦所做的事情。

当我将文本传递到jsp的下一页时，我将其作为textarea读取，而不是像

因此输出就如您所愿。对于其他属性，可以如下使用。

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>