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

Question

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

Answer 1

这会将所有返回转换为 HTML

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

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

Answer 2

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

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

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

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

Answer 3

没有正则表达式：

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

Answer 4

这适用于来自 textarea 的输入

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

Answer 5

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

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

它对我有用。

Answer 6

与系统无关：

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

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

Answer 8

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

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

Answer 9

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

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

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

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

Answer 10

如果您从 PHP 发送变量，您可以在发送之前使用它获取它：

$string=nl2br($string);

Answer 11

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

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

Answer 12

它将用 break 替换所有新行

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

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

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

阅读有关 Regex 的更多信息： https : //dl.icewarp.com/online_help/203030104.htm这将有助于您每次。

Answer 13

不回答具体问题，但我相信这会帮助某人......

如果您有想要使用 JavaScript 呈现在网页上的 PHP 输出（可能是 Ajax 请求的结果），并且您只想保留空格和换行符，请考虑将文本括在<pre></pre>块：

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

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

Answer 15

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

示例：PHP 配置

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

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

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

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

Answer 16

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