Html 文本区域中的新行

New line in text area

提问by discky

<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>

<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

I tried both but new line is not reflecting while rendering the html file. How can I do that?

我尝试了两者，但在呈现 html 文件时没有反映新行。我怎样才能做到这一点？

回答by Bakudan

Try this one:

试试这个：

    <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>


Line Feed and 
Carriage Return are HTML entities^wikipedia. This way you are actually parsing the new line ("\n") rather than displaying it as text.


Line Feed 和
Carriage Return 是HTML 实体^wikipedia。这样您实际上是在解析新行 ("\n") 而不是将其显示为文本。

回答by Trott

<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

Fiddle showing that it works: http://jsfiddle.net/trott/5vu28/.

小提琴表明它有效：http: //jsfiddle.net/trott/5vu28/。

If you really want this to be on a single line in the source file, you could insert the HTML character references for a line feed and a carriage return as shown in the answer from @Bakudan:

如果您真的希望它位于源文件中的单行上，您可以插入换行符和回车符的 HTML 字符引用，如@Bakudan 的回答所示：

  <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

回答by Daniel Flippance

I've found String.fromCharCode(13, 10)helpful when using view engines. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

我发现String.fromCharCode(13, 10)在使用视图引擎时很有帮助。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

This creates a string with the actual newline characters in it and so forces the view engine to output a newline rather than an escaped version. Eg: Using NodeJS EJS view engine - This is a simple example in which any \n should be replaced:

这将创建一个包含实际换行符的字符串，因此强制视图引擎输出换行符而不是转义版本。例如：使用 NodeJS EJS 视图引擎 - 这是一个简单的例子，其中任何 \n 都应该被替换：

viewHelper.js

视图助手.js

exports.replaceNewline = function(input) {
    var newline = String.fromCharCode(13, 10);
    return input.replaceAll('\n', newline);
}

EJS

EJS

<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>

Renders

渲染

<textarea>Blah
blah
blah</textarea>

---

---

replaceAll:

全部替换：

String.prototype.replaceAll = function (find, replace) {
    var result = this;
    do {
        var split = result.split(find);
        result = split.join(replace);
    } while (split.length > 1);
    return result;
};

回答by Old Geezer

I think you are confusing the syntax of different languages.

我认为您混淆了不同语言的语法。

• 
is (the HtmlEncoded value of ASCII 10 or) the linefeed character literal in a HTMLstring. But the line feed character does NOTrender as a line break in HTML (see notes at bottom).

• \nis the linefeed character literal (ASCII 10) in a Javascriptstring.

• <br/>is a line break in HTML. Many other elements, eg <p>, <div>, etc also render line breaks unless overridden with some styles.

• 
是（ASCII 10 的 HtmlEncoded 值或）HTML字符串中的换行字符文字。但是换行符不会不呈现在HTML（见注在底部）换行。

• \n是Javascript字符串中的换行字符文字 (ASCII 10) 。

• <br/>是 HTML 中的换行符。许多其他元素，例如<p>，<div>等也会渲染换行符，除非被某些样式覆盖。

Hopefully the following illustrationwill make it clearer:

希望下图能让大家看得更清楚：

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>

A few points to note about Html:

关于Html的几点注意事项：

• The innerHTMLvalue of the TEXTAREAelement does not render Html. Try the following: <textarea>A <a href='x'>link</a>.</textarea>to see.
• The Pelement renders all contiguous white spaces (including new lines) as one space.
• The LF character does not render to a new line or line break in HTML.
• The TEXTAREArenders LF as a new line inside the text area box.

• 元素的innerHTML值TEXTAREA不呈现 Html。请尝试以下操作：<textarea>A <a href='x'>link</a>.</textarea>查看。
• 该P元素将所有连续的空格（包括新行）渲染为一个空格。
• LF 字符不会呈现为 HTML 中的新行或换行符。
• 该TEXTAREA呈现LF作为文本区域箱内的新线。

回答by Suraj Kumar Maurya

Break enter Keyword line in Textarea using CSS:

使用 CSS 在 Textarea 中中断输入关键字行：

white-space: pre-wrap;

回答by Jukka K. Korpela

To get a new line inside text-area, put an actual line-break there:

要在文本区域内获得新行，请在那里放置一个实际的换行符：

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>

回答by Salt Hareket

try this.. it works:

试试这个..它的工作原理：

<textarea id="test" cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea>

replacing for
tags:

替换
标签：

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

回答by Zar

You might want to use \ninstead of /n.

您可能想要使用\n代替/n.

回答by Harry Sarshogh

After lots of tests, following code works for me in Typescreipt

经过大量测试，以下代码在 Typescreept 中对我有用

 export function ReplaceNewline(input: string) {
    var newline = String.fromCharCode(13, 10);
    return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

回答by Brunno Vodola Martins

My .replace()function using the patterns described on the other answers did not work. The pattern that worked for my case was:

我.replace()使用其他答案中描述的模式的功能不起作用。适用于我的案例的模式是：

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'
');

// str: "Test

Test
Test"