JavaScript:如何向HTML文本区域添加换行符?

I'm editing a textarea with JavaScript. The problem is that when I make line breaks in it, they won't display. How can I do this?

我正在用JavaScript编辑一个文本区域。问题是，当我在里面换行的时候，它们不会显示出来。我该怎么做呢?

I'm getting the value to write a function, but it won't give line breaks.

我得到了写一个函数的值，但是它不会给出换行符。

9 个解决方案

#1

237

Problem comes from the fact that line breaks (\n\r?) are not the same as HTML   tags

问题来自于断行(\n\r?)与HTML
标签不一样

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

#2

if you use general java script and you need to assign string to text area value then

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

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

you need to replace \n or   to \\\n

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

otherwise it gives Uncaught SyntaxError: Unexpected token ILLEGAL on all browsers.

否则，它将给出未捕获的SyntaxError:在所有浏览器中不合法的意外令牌。

#3

Maybe someone find this useful:

也许有人觉得这个有用:

I had problem with line breaks which were passed from server variable to javascript variable, and then javascript was writing them to textarea (using knockout.js value bindings).

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

the solution was double escaping new lines:

解决办法是双重转义新线路:

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

on the server side, because with just single escape chars javascript was not parsing.

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

#4

You need to use \n for linebreaks inside textarea

您需要在textarea中使用\n进行换行

#5

A new line is just whitespace to the browser and won't be treated any different to a normal space (" "). To get a new line, you must insert   elements.

新行只是浏览器的空白，不会被处理到与普通空间(“”)不同的地方。要获得新的行，必须插入
元素。

Another attempt to solve the problem: Type the text into the textarea and then add some JavaScript behind a button to convert the invisible characters to something readable and dump the result to a DIV. That will tell you what your browser wants.

另一种解决方法是:将文本输入到textarea中，然后在按钮后面添加一些JavaScript，将不可见的字符转换为可读的内容，并将结果转储到DIV中。

#6

I have a textarea with id is #infoartist follow:

我有一个id为#infoartist follow的文本区域:

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

In javascript code, i'll get value of textarea and replace escaping new line (\n\r) by   tag, such as:

在javascript代码中，我将获取textarea的值，并将转义新行(\n\r)替换为
标记，例如:

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

So if you are using jquery (like me):

所以如果你使用jquery(像我一样):

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

Hope it helped you. :-)

希望能帮助你。:-)

#7

If you just need to send the value of the testarea to server with line breaks use nl2br

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

#8

here is the thing i did for the same trouble i had.

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

when I'm passing the text to the next page in jsp, i'm reading it as a textarea instead of reading something like

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

so the output came as you wanted. and for other properties, you can use as below.

输出是你想要的。对于其他属性，可以如下所示。

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

#9

If you want to display text inside your own page, you can use the <pre> tag.

如果希望在自己的页面中显示文本，可以使用

标记。

<pre>
The
new line will
be respected
</pre>

#1

237