Question

71

angularjs newline filter with no other html

rated 0 times [ 78] [ 7] / answers: 1 / hits: 79897 / 12 Years ago, thu, december 20, 2012, 12:00:00

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:

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 html filter, whereas now we're supposed to use the ng-bind-html attribute.

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.

For example, given the following string:

While 7 > 5

I still don't want html & stuff in here...

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 12 Years ago cindyanyssam · Accepted Answer

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>