Javascript 没有其他html的angularjs换行符过滤器

angularjs newline filter with no other html

提问by MegaHit

I'm trying to convert newline characters (\n) to html br's.
As per this discussion in the Google Group, here's what I've got:

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

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

The discussion there also advises to use the following in the view:

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

{{ dataFromModel | newline | html }}

This seems to be using the old htmlfilter, whereas now we're supposed to use the ng-bind-htmlattribute.

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

---

---

Regardless, this poses a problem: I don't want any HTML from the original string (dataFromModel) to be rendered as HTML; only the br's.

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

For example, given the following string:

例如，给定以下字符串：

While 7 > 5
I still don't want html & stuff in here...

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

I'd want it to output:

我希望它输出：

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

Is there any way to accomplish this?

有什么办法可以做到这一点吗？

采纳答案by MegaHit

Instead of messing with new directives, I decided to just use 2 filters:

而不是搞乱新指令，我决定只使用 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;');
    }
});

Then, in my view, I pipe one into the other:

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

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>

回答by Devin Spikowski

Maybe you can achieve this only with html, a <preformated text>way ? It will avoid from using filters or do any kind of processing.

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

All you have to do is display the text within an element that has this CSS:

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

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

This will parse and display \n as new lines. Works great for me.

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

Here, a jsFiddle example.

在这里，一个jsFiddle 示例。

回答by JJW5432

A simpler way to do this is to make a filter that splits the text at each \ninto a list, and then to use `ng-repeat.

一个更简单的方法是制作一个过滤器，将每个文本\n分成一个列表，然后使用`ng-repeat。

The filter:

过滤器：

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

and in the html:

并在 html 中：

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>

回答by Sebastian Viereck

If you do not want to destroy the layout with endless strings, use pre-line:

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

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

回答by jaime

I'm not aware if Angular has a service to strip html, but it seems you need to remove html before passing your newlinescustom filter. The way I would do it is through a custom no-htmldirective, which would be passed a scope property and the name of a filter to apply after removing the html

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

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

Here's the implementation

这是实现

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

The important bit is the textvariable. Here I create an intermediate DOM element and append it the HTML using the htmlmethod and then retrieve only the text with the textmethod. Both methods are provided by Angular's lite version of jQuery.

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

The following part is applying the newlinefilter, which is done using the $filterservice.

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

Check the plunker here: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

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

回答by Alex Mounir

An update to the filter with ng-bind-html currently would be:

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

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

and the noHTML filter is no longer required.

并且不再需要 noHTML 过滤器。

white-space solution is having low browser support: http://caniuse.com/#search=tab-size

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

回答by Ben Edge

Bit late to the party on this but I would suggest a small improvement to check for undefined / null strings.

有点晚了，但我建议做一个小的改进来检查未定义的/空字符串。

Something like:

就像是：

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

Or (bit tighter)

或者（更紧一点）

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})