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

【问题标题】：How to add line breaks to an HTML textarea?如何在 HTML 文本区域中添加换行符？
【发布时间】：2010-10-26 05:08:01
【问题描述】：

我正在使用 JavaScript 编辑<textarea>。问题是当我在其中换行时，它们不会显示。我该怎么做？

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

【问题讨论】：

Codepen 演示与正则表达式和<pre></pre> 解决方案在这里公开：codepen.io/a-guerrero/pen/grgVBo

标签： javascript html textarea line-breaks

【解决方案1】：

问题在于换行符 (\n\r?) 与 HTML   标签不同

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

更新

由于许多 cmets 和我自己的经验告诉我，  解决方案没有按预期工作这里是如何使用 '\r\n' 将新行附加到 textarea 的示例

function log(text) {
    var txtArea ;

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

我决定对此进行编辑，而不是作为一个新问题，因为这是一个太受欢迎的答案，不会是错误的或不完整的。

【讨论】：

这也适用于我。在 jQuery 中，你可以这样做： $('#caption').html($('#caption').text().replace(/\n\r?/g, '
')) ;
换行正则表达式应该是/(\r\n|\n|\r)/gmtextfixer.com/tutorials/javascript-line-breaks.php
正确的正则表达式是/\r\n?|\n/g，没有捕获，没有多行。
怀疑  是错误的。对于文本区域中的通用换行符，您需要\r\n。例如，UC 浏览器会忽略 textareas 中的
和 \n。见Add a linebreak in an HTML text area。
在文本区域内使用
不起作用。至少不是在我测试过的 Chrome 中。使用 \n 似乎工作。如果您打算将文本作为纯 html 插入，请使用
，即在任何输入元素之外。

【解决方案2】：

如果您使用通用 java 脚本并且需要将字符串分配给文本区域值，那么

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

您需要将\n 或  替换为\\\n

否则它会在所有浏览器上提供Uncaught SyntaxError: Unexpected token ILLEGAL。

【讨论】：

【解决方案3】：

也许有人觉得这很有用：

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

解决方案是双重转义新行：

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

在服务器端，因为只有单个转义字符 javascript 没有被解析。

【讨论】：

在 Windows 中使用 "\\n" 对我有用，我认为它在 Linux 系统中可以正常工作。

【解决方案4】：

您需要在textarea 中使用\n 来表示linebreaks

【讨论】：

在 Firefox v71 中工作。谢谢！

【解决方案5】：

如果您想在自己的页面中显示文本，可以使用<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>

【讨论】：

【解决方案6】：

我有一个 ID 为 #infoartist 的文本区域，请关注：

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

在javascript代码中，我将获取textarea的值并将转义的新行（\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 />');

希望对您有所帮助。 :-)

【讨论】：

【解决方案7】：

新行只是浏览器的空白，不会被视为与普通空格（“”）有任何不同。要换行，必须插入  元素。

解决问题的另一个尝试：在文本区域中键入文本，然后在按钮后面添加一些 JavaScript 以将不可见字符转换为可读的内容并将结果转储到 DIV。这会告诉你你的浏览器想要什么。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

当我在 jsp 中将文本传递到下一页时，我将其作为文本区域阅读，而不是阅读类似的内容

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

<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>

【讨论】：