AngularJS字符串换行，没有分隔符显示

Question

在数据库中，我保存了文本区域的输入内容，其中你可以添加换行符。但是如何在Angular视图中显示它们？对于PHP来说，这个问题可以通过使用nl2br()函数解决。

像这样<div>{{ item.foobar }}</div>，将保存在数据库中的带有换行符的内容以换行符形式展示。

- user1469734

---

这也可以用于询问/回答关于换行符(\n)而不仅仅是HTML换行符(<br>)的同样的问题。 - discodane

Answer 1

将HTML绑定似乎有点不安全。CuriousGuy建议的指令需要额外的工程处理才能正确转义HTML。

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

示例请见JSFiddle。

另请参阅：

• Mozilla Developer Network关于white-space的文档
• Internet Explorer关于white-space的文档
• W3关于white-space的文档

- Thiago Negri

---

pre-line! 你就是老板。 - Luis Masuelli

这个在浏览器兼容性方面怎么样？ - Eduard Luca

太棒了！非常好，简单而干净。 - Al-Mothafar

这是正确的答案，比包含HTML代码更好！ - Ben

使用样式 white-space: pre-line 是我认为最简单的解决方案。 - Harrison O

Answer 2

最佳解决方案：

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

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

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

- Sergii Semesko

Answer 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脚本）。

你可以在jsFiddle上找到完整的工作示例。

- Oleg

---

你为什么不直接这样做呢：return (input || '').replace(/\n/g, '<br>');？ - CWSpear

@CWSpear 这个想法是让 someVar 以纯文本的形式显示，而不渲染 HTML 标签（除了换行符 <br>）。你可以对比这两个 jsFiddles：第一个 和 第二个。 - Oleg

@CWSpear 抱歉，这里是已经更正的 jsFiddles 链接：第一个 和 第二个。（StackOverflow在发布后5分钟内不允许编辑评论） - Oleg

Answer 4

在谷歌搜索AngularJS nl2br后，得到了以下结果：

AngularJS - Remove \n from data

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

- Erti-Chris Eelmaa