Question

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

我尝试了两种方法但渲染html文件时新行没有反映出来。我怎么能这样做？

Answer 1

试试这个：

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


换行和回车符HTML entities^wikipedia。这样，您实际上是在解析新行（“\ n”）而不是将其显示为文本。

Answer 2

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

This is my statement2</textarea>

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

如果你真的想让它在源文件的一行上，你可以插入换行符和回车符的HTML字符引用，如@Bakudan的答案所示：

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

Answer 3

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

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

viewHelper.js

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

EJS

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

呈现

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

Answer 4

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


是（ASCII 10的HtmlEncoded值或） HTML 字符串中的换行符字符。但是换行符字符 NOT 呈现为HTML中的换行符（请参阅底部的注释）。
\n是 Javascript 字符串中的换行字符文字（ASCII 10）。
<br/>是HTML中的换行符。许多其他元素，例如<p>，<div>等也会渲染换行符，除非被某些样式覆盖。

希望以下illustration能更明确：

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>

关于Html的几点注意事项：

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

Answer 5

试试这个..它有效：

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

替换
标签：

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

Answer 6

要在文本区域内获取新行，请在其中放置实际的换行符：

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

Answer 7

您可能希望使用\n代替/n。

Answer 8

经过大量测试后，以下代码在Typescreipt中适用于我

 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);
}

Answer 9

使用其他答案中描述的模式的.replace()函数无法正常工作。适合我案例的模式是：

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

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"

Answer 10

T.innerText =“ LF的位置：” + t.value.indexOf（“ \ n”）;

p3.innerText = t.value.replace("\n", "");

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

<p id='p3'></p>

Answer 11

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

white-space: pre-wrap;

Answer 12

如果您使用的是 react

函数内部

Answer 13

只需使用<br>
例如：

<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf 
</textarea>

结果：
blablablabla
kakakakakak
fafafafafaf

文本区域中的新行

13 个答案: