我如何替换字符串中的所有换行符<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."
609903 次浏览
小开
最佳答案

这将把所有返回值转换为HTML

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

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

小开

不正则表达式:

str = str.split("\n").join("<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'));
}
}
}
小开

如果公认的答案不适合你，那么你可以尝试一下。

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

这对我很管用。

小开

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

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

不管系统如何:

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

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

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

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

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

Jsfiddle: # EYZ0

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

小开

对于那些只允许max的人。2 <br>在一行，你可以使用这个:

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

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

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

小开

如果你从PHP中发送变量，你可以在发送之前通过这个获取它:

$string=nl2br($string);
小开

它将用break替换所有新的行

# EYZ0

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

# EYZ0

阅读更多关于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>';
小开

最短的代码支持最常见的EOL风格 \r， \n， \r\n和使用HTML5 <br>:

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

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

示例:PHP Config

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

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

  • previousValue(上次调用的结果值 李callbackfn) < / >
  • 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字符串中调用它。

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'

提交答案