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

当前回答

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

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

这对我很管用。

其他回答

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

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

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

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

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

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

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

不管系统如何:

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

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

str.replace(new RegExp('\r?\n','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'