Javascript 带换行符的AngularJS字符串，显示时不带中断

在数据库中，我保存了一个文本区域的输入，您可以在其中添加分隔符。但是如何从一个角度显示它们呢？对于PHP，这是

nl2br（）

---

与

{{item.foobar}}

类似，显示的断点与数据库中保存的断点相同

谷歌搜索angularjs nl2br得出以下结果：

---

即最后一个答案，它演示了如何使用过滤器将新行替换为

。将其与ng bind html结合使用，因为不安全的版本目前可能不可用。在将换行符插入数据库时，您可能应该将其转换为

（对我来说更有意义）。

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

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 />');
    }
});

app.filter（'nl2br'，function（）{
var span=document.createElement（'span'）；
返回函数（输入）{
如果（！input）返回输入；
变量行=input.split（'\n'）；
对于（变量i=0；i”）；
}
});

然后在视图中使用它，如下所示：

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

在这种情况下，结果字符串中唯一的HTML标记是

。将转义所有其他标记。
不要忘记加载

ngSanitize

模块（

angular sanitize.js

script）

---

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

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

我发现使用样式规则更容易

空白：行前

例如

另见：

最佳解决方案：

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

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

{{item.foobar}
.multi_line_text{空白：行前；}

---

ng绑定html-这是一种不安全的方式，在控制台中显示错误。
您不只是执行类似于

返回（输入| | |“”）的操作的任何特定原因。替换（/\n/g，
）

？@CWSpear的想法是使

someVar

显示为简单文本，而不呈现HTML标记（换行符上的
除外）。您可以比较这两种jsFiddles:和@CWSpear-my方法，下面是更正后的jsFiddles:和。（StackOverflow不允许在发布评论后5分钟后编辑评论）行前！你是老大。这一款的浏览器兼容性如何？太棒了！非常好，简单，干净。这是正确的答案，比包含html代码要好！我认为，使用样式

空白：行前
是最简单的解决方案。这也可以用于询问/回答关于换行符（\n）的相同问题，而不仅仅是html换行符（
）。