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

Posted 2023-05-09

【中文标题】如何用 <br /> 元素替换字符串中的所有换行符？

【英文标题】：How do I replace all line breaks in a string with <br /> elements?

【发布时间】：2010-10-21 12:52:37

【问题描述】：

如何使用 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."

【问题讨论】：

您原来的问题有问题吗？ ***.com/questions/784313/…

您也可以在 PHP 中执行 nl2br($string)，然后再将其发送到 JavaScript。

我将投票结束之前的问题，因为这有一个更好的例子。

他应该编辑最初的问题

我来到这里是因为对 .text() 发生了什么的误解。如果您也这样做，请参阅***.com/q/35238362/1467396

【参考方案1】：

这会将所有返回值转换为 html

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

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

【讨论】：

只是附加说明：str.replace("\n", '<br />')（第一个参数是常规字符串）将仅替换第一次出现。

另一个版本（替换多个换行符）：str.replace(/(\n)+/g, '');

@SergeS。感谢您的额外评论。刚刚为我节省了大量时间！ jsfiddle

@SergeS., String#replace 将其第一个参数从 String 强制转换为转义的 RegExp 实例，没有任何标志。 str.replace('\n', '<br />'); 等价于 str.replace(new RegExp('\n'), '<br />');

这是一个测试用例，与str.split("\n").join("<br />") jsperf.com/split-join-vs-replace-regex RegEx 相比似乎稍快一些

【参考方案2】：

如果您关心的只是显示换行符，您可以使用 CSS。

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

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

注意：注意代码格式和缩进，因为white-space: pre-line会显示所有个换行符（除了文本后面的最后一个换行符，见fiddle）。

【讨论】：

很好的答案...需要更多的上船！

我来到这里寻找正则表达式并留下了这个。在很多情况下，这就是人们正在寻找的东西。我们对电子邮件使用换行符，有时需要在 html 中显示电子邮件的外观。完美。感谢您从不同的角度看待问题

我更喜欢使用white-space: pre-line; 而不是white-space: pre-wrap;（毕竟不添加最后的断线）

看起来不错，但是在第一行之前有一个巨大的空间呢？奇怪

@jpmottin 我认为您的版本更接近作者所寻找的问题，因此我也将答案更改为white-space: pre-line。谢谢！

【参考方案3】：

没有正则表达式：

str = str.split("\n").join("<br />");

【讨论】：

如果你使用 "\\n"，你将避免只在 "n" 上拆分的问题。

@CrowderSoup 嗯？我刚试了一下，\\n 在新行上不匹配，因为它正在寻找 backslash + n。

我做了一个测试用例。 RegEx 稍快一些，但请自行检查jsperf.com/split-join-vs-replace-regex

我发现这个答案不起作用，除非斜线被转义。例如：str = str.split("\n").join("");

@ACOMIT001 我想这取决于字符串是否有新行或黑斜线和 n？

【参考方案4】：

这适用于来自文本区域的输入

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

【讨论】：

这对我来说是最好的答案，因为您没有忘记在某些系统上使用的 \r

这是这个问题的最佳答案。但我只会选择 而不是 。看到这个***.com/questions/1946426/html-5-is-it-br-br-or-br

【参考方案5】：

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

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

它对我有用。

【讨论】：

new RegExp('\n', 'g') 与 /\n/g 相同（除了一些关于使用原始文字与其构造函数的细节）。

不管是什么原因，这对我有用，但接受的答案没有

啊，这里也一样...但我的错误是试图将/\n/g 指定为字符串！

【参考方案6】：

不管是什么系统：

my_multiline_text.replace(/$/mg,'<br>');

【讨论】：

警告：这会将一个''标签附加到任何字符串中，无论其中是否有'\n'。

您可以通过在第一次替换后添加以下内容来修复@mkoeller 提到的错误：.replace(/\<br\>$, '')，这将删除最后一个<br>（“搜索触及字符串末尾的<br> ($)，并将其替换为空字符串 ('')")

【参考方案7】：

对文本的其余部分进行编码以防止可能的脚本注入攻击也很重要

function insertTextWithLineBreaks(text, targetElement) 
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) 
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) 
            targetElement.appendChild(document.createElement('br'));
        
    

【讨论】：

喜欢，但我没有或不想要目标元素。这可以在返回值为字符串的情况下完成吗？

【参考方案8】：

支持最常见的EOL styles\r、\n、\r\n和使用HTML5的最短代码<br>：

s.replace(/\r?\n|\r/g, '<br>')

【参考方案9】：

当值来自文本框时，这对我有用：

string.replace(/\n|\r\n|\r/g, '<br/>');

【参考方案10】：

对于那些只想允许最大值的人。连续2个<br>，你可以用这个：

let text = text.replace(/(\r?\n)2,/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

第一行：搜索 \n 或 \r\n，其中至少有 2 个在一行中，例如\n\n\n\n。然后将其替换为 2 br

第二行：搜索所有单个\r\n 或\n 并将它们替换为<br>

【参考方案11】：

如果你从 PHP 发送变量，你可以在发送前用这个获取它：

$string=nl2br($string);

【讨论】：

这应该是选择的答案感谢简单直接的答案。

【参考方案12】：

它将用break替换所有新行

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

如果你想用单个换行符替换所有新行

str = str.replace(/\n*\n/g, '<br>')

阅读更多关于正则表达式的信息：https://dl.icewarp.com/online_help/203030104.htm 这对您每次都有帮助。

【讨论】：

第二种情况也可以使用像str = str.replace(/\n+/g, '<br>')这样的正则表达式

【参考方案13】：

没有回答具体问题，但我相信这会对某人有所帮助...

如果您希望使用 JavaScript 在网页上呈现来自 PHP 的输出（可能是 Ajax 请求的结果），并且您只想保留空格和换行符，请考虑将文本包含在 @ 987654321@块：

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';

【参考方案14】：

试试

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");

<div id="msg"></div>

【参考方案15】：

我有一个从控制器传入的 PHP 配置。 (Laravel)

示例：PHP 配置

'TEXT_MESSAGE' => 'From:Us\nUser: Call (1800) 999-9999\nuserID: %s'

然后在javascript中使用es6 reduce。注意我必须有两个\\ 否则输出没有被正确替换。以下是与reduce函数相关的参数

previousValue（上一次调用产生的值 回调fn) currentValue（当前元素的值） currentIndex 可选 array（要遍历的数组）可选

//p is previousVal
//c is currentVal
String.prototype.newLineReplace = function()
    return [...arguments].reduce((p,c) => p.replace(/\\n/g,c), this);

这是我在脚本中使用它的方式。

<script type="text/javascript">var config = @json($config);</script>

config.TEXT_MESSAGE.newLineReplace("<br />")

当然，你可以在 javascript sring 上调用它，比如...

let a = 'From:Us\nUser: Call (1800) 999-9999\nuserID: %s'
var newA = a.newLineReplace("<br />")

//output
'From:Us<br />User: Call (1800) 999-9999<br />userID: %s'

【参考方案16】：

string2 = string2.replace(/(?:\\n)/g, '')

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

1.这会删除\n（反斜杠+n），而不是换行符。 2.问题没有要求删除。