angularjs newline filter with no other html

Question

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:

Answer 1

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

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>

Answer 2

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

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

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

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

Here, a jsFiddle example.

Answer 3

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

Answer 4

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

The filter:

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

and in the html:

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

Answer 5

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

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

Answer 6

I'm not aware if Angular has a service to strip html, but it seems you need to remove html before passing your newlines custom filter. The way I would do it is through a custom no-html directive, which would be passed a scope property and the name of a filter to apply after removing the 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 text variable. Here I create an intermediate DOM element and append it the HTML using the html method and then retrieve only the text with the text method. Both methods are provided by Angular's lite version of jQuery.

The following part is applying the newline filter, which is done using the $filter service.

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