我想在文本区添加换行符。我尝试了\n和<br/>标签,但不工作。你可以看到上面的HTML代码。你能帮我在文本区插入换行符吗?
<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>
我想在文本区添加换行符。我尝试了\n和<br/>标签,但不工作。你可以看到上面的HTML代码。你能帮我在文本区插入换行符吗?
<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>
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
提琴显示它的工作:http://jsfiddle.net/trott/5vu28/。
如果你真的想让它在源文件中的单行上,你可以插入HTML字符引用,用于换行和回车,如@Bakudan的回答所示:
这是我的语句1。这是我的语句2</textarea>
试试这个。工作原理:
<textarea id="test" cols='60' rows='8'>This is my statement one. This is my statement2</textarea>
替换<br>标签:
$("textarea#test").val(replace($("textarea#test").val(), "<br>", " ")));
试试这个:
这是我的语句1。这是我的语句2</textarea>
& # 10;换行和 回车都是HTML实体。通过这种方式,您实际上是在解析新行(“\n”),而不是将其显示为文本。
要在文本区域内获得一个新行,在那里放一个实际的换行符:
<textarea cols='60' rows='8'> 这是我的statement2</textarea>
我发现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;
};
经过大量的测试,下面的代码在typescript中为我工作
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);
}
我认为你混淆了不同语言的语法。
& # 10;是HTML字符串中的换行字符文字(HtmlEncoded值为ASCII 10或)。但是换行字符在HTML中不会显示为换行符(见底部注释)。 \n是Javascript字符串中的换行字符文字(ASCII 10)。 <br/>是HTML中的换行符。许多其他元素,如<p>, <div>等也呈现换行符,除非被某些样式覆盖。
希望下面的插图能让你更清楚:
T.innerText = "Position of LF: " + t.value.indexOf("\n"); p1。innerHTML = t.value; p2。innerHTML = t.value。取代(“\ n”、“< br / >”); p3。innerText = t.value。取代(“\ n”、“< br / >”); </textarea> . <textarea id="t">第一行
 < p id = ' T ' > < / p > < p id =“p1”> < / p > < p id =“p2”> < / p > < p id =“p3”> < / p >
关于Html有几点需要注意:
TEXTAREA元素的innerHTML值不呈现Html。请尝试以下方法:<textarea>A < A href='x'>link</ A >。</textarea>查看。 P元素将所有连续的空格(包括新行)呈现为一个空格。 LF字符不会呈现为HTML中的新行或换行符。 TEXTAREA将LF渲染为文本区域框中的新行。
我的.replace()函数使用其他答案中描述的模式无法工作。在我的案例中起作用的模式是:
var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,' ');
// str: "Test Test Test"
T.innerText = "Position of LF: " + t.value.indexOf("\n");
p3.innerText = t.value.replace("\n", "");
<textarea id="t">Line 1 Line 2</textarea>
<p id='p3'></p>
只需使用<br> 例:
<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf
</textarea>
论点: blablablabla是fafafaf的哥哥
如果你使用react
函数内部
const handleChange=(e)=>{
const name = e.target.name;
let value = e.target.value;
value = value.split('\n').map(str => <span>{str}<br/></span>);
SetFileds({ ...fileds, [name]: value });
}
你还应该检查元素的css空白属性(mdn docs),确保它被设置为一个不抑制换行的值,例如:
white-space: pre-line;
你会对这3个值感兴趣:
精准医疗 保留了空白的序列。线路只有在 源和<br>元素中的换行符。 pre-wrap 保留了空白的序列。线路断在 换行符,在<br>处,以及必要时填充行框。 行前空白序列被折叠。线路断在 换行符,在<br>处,以及必要时填充行框。
一个简单自然的解决方案,不涉及CSS样式或数字字符引用,如 将使用&换行符;字符实体引用:
The cardinal directions are:
- North
- East
- South
- West
注意:因为它被简单地定义为LF(换行,或U+000A Unicode码位)字符,所以不能100%确定它是否适合需要整个CR + LF(回车+换行)序列的情况。但后来,它在我在Windows 10上进行的Chrome、Edge和WebView2测试中都能运行,所以应该可以使用。