如何用 元素替换字符串中的所有换行符？答案

【问题标题】：How do I replace all line breaks in a string with elements?如何用 元素替换字符串中的所有换行符？
【发布时间】：2010-10-21 12:52:37
【问题描述】：

如何使用 JavaScript 从值中读取换行符并将所有换行符替换为   元素？

例子：

从 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."

【问题讨论】：

您原来的问题有问题吗？ stackoverflow.com/questions/784313/…
您也可以在 PHP 中执行 nl2br($string)，然后再将其发送到 JavaScript。
我将投票结束之前的问题，因为这有一个更好的例子。
他应该编辑最初的问题
我来到这里是因为对 .text() 发生了什么的误解。如果您也这样做，请参阅stackoverflow.com/q/35238362/1467396

标签： javascript

【解决方案1】：

这会将所有返回值转换为 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", ' ')（第一个参数是常规字符串）将仅替换第一次出现。
另一个版本（替换多个换行符）：str.replace(/(\n)+/g, '
');
@SergeS。感谢您的额外评论。刚刚为我节省了大量时间！ jsfiddle
@SergeS., String#replace 将其第一个参数从 String 强制转换为转义的 RegExp 实例，没有任何标志。 str.replace('\n', ' '); 等价于 str.replace(new RegExp('\n'), ' ');
这是一个测试用例，与str.split("\n").join(" ") 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
这是这个问题的最佳答案。但我只会选择
而不是
。看到这个stackoverflow.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\>$, '')，这将删除最后一个 （“搜索触及字符串末尾的  ($)，并将其替换为空字符串 ('')")

【解决方案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的最短代码 ：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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 并将它们替换为 

【讨论】：

【解决方案11】：

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

$string=nl2br($string);

【讨论】：

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

【解决方案12】：

它将用break替换所有新行

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

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

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

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

【讨论】：

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

【解决方案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 />");

&lt;div id="msg"&gt;&lt;/div&gt;

【讨论】：

【解决方案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.问题没有要求删除。