88

我正在尝试将换行符 ( \n) 转换为 html br。
根据Google Group 中的讨论，这就是我所得到的：

myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

那里的讨论还建议在视图中使用以下内容：

{{ dataFromModel | newline | html }}

这似乎使用了旧的html过滤器，而现在我们应该使用ng-bind-html属性。

无论如何，这会带来一个问题：我不希望将原始字符串 ( dataFromModel) 中的任何 HTML 呈现为 HTML；只有br's。

例如，给定以下字符串：

虽然 7 > 5
我仍然不想要 html 和这里的东西......

我希望它输出：

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

有没有办法做到这一点？

4

7 回答 7

281

也许您只能使用 html 来实现这一点，一种<preformated text>方式？它将避免使用过滤器或进行任何类型的处理。

您所要做的就是在具有此 CSS 的元素中显示文本：

<p style="white-space: pre;">{{ MyMultiLineText}}</p>

这会将 \n 解析并显示为新行。对我很有用。

在这里，一个jsFiddle 示例。

于 2013-07-31T20:50:50.230 回答
33

我决定只使用 2 个过滤器，而不是弄乱新指令：

App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

然后，在我看来，我将一个管道连接到另一个：

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
于 2012-12-20T19:39:57.490 回答
26

一个更简单的方法是创建一个过滤器，将每个文本拆分\n为一个列表，然后使用 `ng-repeat.

过滤器：

App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});

在html中：

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>
于 2013-11-06T02:11:28.350 回答
11

如果您不想用无尽的字符串破坏布局，请使用前行：

<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>
于 2018-04-30T15:09:43.707 回答
6

我不知道 Angular 是否有剥离 html 的服务，但似乎您需要在传递newlines自定义过滤器之前删除 html。我这样做的方式是通过一个自定义no-html指令，该指令将传递一个范围属性和过滤器的名称，以在删除html 

<div no-html="data" post-filter="newlines"></div>

这是实现

app.directive('noHtml', function($filter){
  return function(scope, element, attrs){
    var html = scope[attrs.noHtml];
    var text = angular.element("<div>").html(html).text();

    // post filter
    var filter = attrs.postFilter;
    var result = $filter(filter)(text);

    // apending html
    element.html(result);
  };
});

重要的一点是text变量。在这里，我创建了一个中间 DOM 元素并使用该方法将其附加到 HTML 中html，然后使用该方法仅检索文本text。这两种方法都由Angular 的精简版 jQuery提供。

以下部分是应用newline过滤器，这是使用$filter服务完成的。

在此处检查 plunker：http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p= preview

于 2012-12-20T05:24:15.087 回答
2

当前使用 ng-bind-html 对过滤器的更新是：

myApp.filter('newlines', function () {
  return function(text) {
    return text.replace(/(&#13;)?&#10;/g, '<br/>');
  }
});

并且不再需要 noHTML 过滤器。

空白解决方案的浏览器支持较低： http ://caniuse.com/#search=tab-size

于 2016-02-20T17:04:11.493 回答
0

在这方面有点晚了，但我建议对检查未定义/空字符串进行一些小改进。

就像是：

.filter('newlines', function () {
    return function(text) {
        return (text) ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

或者（更紧一点）

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})
于 2018-01-26T10:41:56.307 回答