如何用 <br /> 元素替换字符串中的所有换行符?

IT技术 javascript
2021-01-28 14:33:30

如何使用 JavaScript 从值中读取换行符并用<br />元素替换所有换行符

例子:

从 PHP 传递的变量如下:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

我希望我的结果在 JavaScript 转换后看起来像这样:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."
6个回答

这会将所有返回转换为 HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

如果您想知道 ?: 是什么意思。它被称为非捕获组。这意味着括号内的正则表达式组不会保存在内存中以供以后引用。您可以查看这些线程以获取更多信息:
https : //stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

仅附加说明:(str.replace("\n", '<br />')第一个参数是常规字符串)将仅替换第一次出现。
2021-03-19 14:33:30
@SergeS。感谢您的额外评论。刚刚为我节省了大量时间!提琴手
2021-03-21 14:33:30
@SergeS., 将String#replace其第一个参数强制String为转义RegExp实例,没有标志。str.replace('\n', '<br />');相当于str.replace(new RegExp('\n'), '<br />');
2021-03-31 14:33:30
另一个版本(替换多个换行符): str.replace(/(\n)+/g, '<br />');
2021-04-01 14:33:30
这是一个与str.split("\n").join("<br />") jsperf.com/split-join-vs-replace-regex相比的测试用例RegEx 似乎稍快
2021-04-05 14:33:30

如果您只关心显示换行符,您可以使用 CSS 来实现。

<div style="white-space: pre-line">Some test
with linebreaks</div>

jsfiddle:https ://jsfiddle.net/5bvtL6do/2/

注意:注意代码格式和缩进,因为white-space: pre-line将显示所有换行符(文本后的最后一个换行符除外,请参见 fiddle)。

我来这里寻找正则表达式并带着这个离开。在很多情况下,这正是人们所寻找的。我们对电子邮件使用换行符,有时需要在 html 中显示电子邮件的外观。完美。感谢您从不同的角度看待问题
2021-03-21 14:33:30
看起来不错,但是第一行之前的巨大空间呢?奇怪的
2021-03-30 14:33:30
而不是 white-space: pre-wrap;我更喜欢使用white-space: pre-line;(毕竟不添加最后的中断线)
2021-04-01 14:33:30
很好的答案......需要更多的上船!
2021-04-06 14:33:30
@jpmottin 我认为你的版本更接近作者正在寻找的问题,所以我也改变了我的答案white-space: pre-line谢谢!
2021-04-06 14:33:30

没有正则表达式:

str = str.split("\n").join("<br />");
@CrowderSoup 嗯?我刚刚尝试过,\\n但在新行上不匹配,因为它正在寻找backslash+ n
2021-03-12 14:33:30
@ACOMIT001 我想这取决于字符串是否有新行或黑斜线和 n?
2021-03-15 14:33:30
我发现除非斜线被转义,否则这个答案不起作用。例如: str = str.split("\n").join("<br />");
2021-03-18 14:33:30
如果您执行“\\n”,您将避免仅在“n”上拆分的问题。
2021-04-08 14:33:30
我做了一个测试用例。RegEx 稍微快一点,但请自行查看jsperf.com/split-join-vs-replace-regex
2021-04-09 14:33:30

这适用于来自 textarea 的输入

str.replace(new RegExp('\r?\n','g'), '<br />');
这对我来说是最好的答案,因为您没有忘记在某些系统上使用的 \r
2021-03-26 14:33:30
这是这个问题的最佳答案。但我只会选择 <br> 而不是 <br />。看到这个stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br
2021-03-29 14:33:30

如果接受的答案不适合您,那么您可以尝试。

str.replace(new RegExp('\n','g'), '<br />')

它对我有用。

啊,这里也一样......但我的错误是试图指定/\n/g为一个字符串!
2021-03-17 14:33:30
new RegExp('\n', 'g')/\n/g(除了一些关于使用原始文字与其构造函数的细节)相同。
2021-03-28 14:33:30
不管是什么原因,这对我有用,但接受的答案没有
2021-03-30 14:33:30