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

当前回答

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

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

其他回答

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

string.replace(/\n|\r\n|\r/g, '<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'));
        }
    }
}

没有回答具体的问题,但我相信这将有助于某人…

如果你有来自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>';

我在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'

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

$string=nl2br($string);