0

I have a string that looks like this (lots of whitespace, this is just how it comes out on my server):

 var care_description = "MATERIAL\r\n    \r\n  56% Acrylic, 24% Rayon, 20% Polyester\r\n \r\n  CARE\r\n  \r\n  Machine Wash, Gentle Or Delicate"

I'm using the new Angular 1.2.0 ngBindHtml and processing it in my controller like so:

    $scope.care = $sce.trustAsHtml(care_description);

(the $scope.records[i].accordions array is just a wrapper for Angular-Bootstrap's Accordions module).

When I put this into my view (via a simple <p ng-bind-html="care"></p>)it gets rendered like so:

 MATERIAL 56% Acrylic, 24% Rayon, 20% Polyester CARE Machine Wash, Gentle Or Delicate

When it should be:

MATERIAL

56% Acrylic, 24% Rayon, 20% Polyester 

CARE 

Machine Wash, Gentle Or Delicate

Is the only solution here for me to do a regex replace to find all instances of \r\n and replace them with <br />?

Edit: I should have mentioned, while there are no HTML tags in the example above, often there will be so I need to use ngBindHtml here rather than <pre> tags.

JVG
  • 20,198
  • 47
  • 132
  • 210

2 Answers2

6

All ngBindHtml does is not escape tags. You have no tags here. You could replace all \r\n with <br/>. Or you could write a directive to do it for you. Or just use <pre> tags.

Karolis Juodelė
  • 3,708
  • 1
  • 19
  • 32
4

What you have there is not HTML, but plain text. So you shouldn't use ng-bind-html and trustAsHtml. Just display the value inside a <pre> block:

<pre>{{ care }}</pre>
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • Sorry, see edit above - while in this example there are no HTML tags present, often there will be some there so I have to use `ngBindHtml` – JVG Nov 03 '13 at 09:40
  • 1
    Then it seems like you have a design problem: either the value is HTML, and the line breaks should also be in HTML, or it's plain text and it shouldn't contain HTML. I would fix the data, and the process producing this data, rather than to have to deal with this inconsistency everywhere. – JB Nizet Nov 03 '13 at 09:43
  • The data is scraped from a website using `Cheerio` (node's equivalent of jQuery) to simply grab an element and get the `.html()`. So would you suggest doing a search an replace at the data-gathering stage that converts the `/r/n` into line break HTML elements so it's all consistent? – JVG Nov 03 '13 at 09:47
  • 1
    Yes, that's what I would suggest. But I still wonder why Cheerio doesn't return `
    ` inside the data. Do they exist on the original, scraped site? If not, how does the scraped site display the data with line breaks?     – JB Nizet Nov 03 '13 at 09:50
  • Yeah interesting point, the original site is here: http://www.uniqlo.com/uk/store/goods/080564 and the code I'm using to grab it is `$('#prodDetail .spec').html()` - in Chrome's console this returns `
    ` and `
    ` tags, but in Cheerio it's not returning that at all.
     – JVG Nov 03 '13 at 09:56
  • 1
    So Cheerio's html function doesn't work as it should, if I understand correctly. I would fix that, or work around it to make sure that the data is correct from the beginning, instead of trying to handle the incorrectness every time the data must be displayed. – JB Nizet Nov 03 '13 at 10:04