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

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

这会将所有退货转换为HTML

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

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

如果您只想显示换行符，则可以使用CSS来实现。

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

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

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

没有正则表达式：

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

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

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

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

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

它为我工作。

不论系统如何：

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

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

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

当值来自TextBox时，这对我有用：

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

对于那些只想允许最高 <br>连续2 个，您可以使用以下命令：

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

第一行：在其中至少有两个连续的位置搜索\nOR 。然后将其替换为2\r\n\n\n\n\nbr

第二行：搜索所有单个\r\n或，\n然后将其替换为<br>

如果您是从PHP发送变量，则可以在发送之前通过以下方式获取它：

$string=nl2br($string);

它将所有新行替换为break

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

如果要用单个中断线替换所有新行

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

了解有关Regex的更多信息：https : //dl.icewarp.com/online_help/203030104.htm 这将每次都为您提供帮助。

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

如果您有PHP的输出要使用JavaScript呈现在网页上（也许是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>';

尝试

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>