带有换行符的 AngularJS 字符串，显示时没有中断答案

【问题标题】：AngularJS String with newlines, shown without breaks带有换行符的 AngularJS 字符串，显示时没有中断
【发布时间】：2014-02-16 16:18:42
【问题描述】：

在数据库中，我保存了来自文本区域的输入，您可以在其中添加中断。但是如何在 Angular 视图中显示它们呢？对于 PHP，这是nl2br()。

如<div>{{ item.foobar }}</div>，显示的中断以类似的方式保存在数据库中。

【问题讨论】：

这也可以用来询问/回答关于换行符(\n) 而不仅仅是 html 换行符(
) 的相同问题。

标签： javascript angularjs

【解决方案1】：

绑定 HTML 似乎有点不安全。 CuriousGuy 建议的指令有一些额外的工程来正确转义 HTML。

我发现使用样式规则white-space: pre-line 更容易。

JSFiddle 的示例。

另见：

【讨论】：

预上线！你是老板。
这个浏览器的兼容性如何？
超级！非常好，简单干净。
这是正确答案，比包含html代码更好！
我认为使用white-space: pre-line 样式是最简单的解决方案。

【解决方案2】：

最佳解决方案：

<div class="multi_lines_text">{{ item.foobar }}</div>

<style>
.multi_lines_text { white-space: pre-line; }
</style>

ng-bind-html - 这是不安全的方式，并在控制台中显示错误。

【讨论】：

【解决方案3】：

如果您只想添加换行符并且所有其余文本按原样显示，您可以使用以下过滤器：

app.filter('nl2br', function() {
    var span = document.createElement('span');
    return function(input) {
        if (!input) return input;
        var lines = input.split('\n');

        for (var i = 0; i < lines.length; i++) {
            span.innerText = lines[i];
            span.textContent = lines[i];  //for Firefox
            lines[i] = span.innerHTML;
        }
        return lines.join('<br />');
    }
});

然后像这样在视图中使用它：

<div ng-bind-html="someVar | nl2br"></div>

在这种情况下，结果字符串中出现的唯一 HTML 标记是 <br />。所有其他标签都将被转义。
并且不要忘记加载ngSanitize 模块（angular-sanitize.js 脚本）。

您可以找到on jsFiddle 的完整工作示例。

【讨论】：

有什么特殊原因你不只是做类似return (input || '').replace(/\n/g, '<br>'); 的事情吗？
@CWSpear 这个想法是让someVar 显示为简单的文本，而不呈现HTML 标签（除了换行符上的<br>）。您可以比较这两个 jsFiddles：first 和 second
@CWSpear 我的道歉，这里是更正的 jsFiddles：first 和 second。（StackOverflow 不允许在发布 5 分钟后编辑 cmets）

【解决方案4】：

谷歌搜索 angularjs nl2br 产生了这个结果：

AngularJS - Remove \n from data

即最后一个答案，它演示了如何使用过滤器将新行替换为<br />。将它与 ng-bind-html 结合起来，因为不安全的版本目前可能不可用。将换行符插入数据库时，您可能应该将换行符转换为<br />（对我来说更有意义）。

【讨论】：