Преобразовать новую строку /n в разрыв строки в угловых

Question

У меня есть строка, которая содержит символ новой строки /n. Попытка отобразить

строка. Вместо того, чтобы брать / n как новую строку, он отображает '/n' как текст.

   $scope.myOutput = " Hello /n"

    {{ myOutput | textFormat }}

Обязательно -> Здравствуйте (на html странице)

Пытался:

 app.filter('textFormat', function() {
    return function(x) {
      return x.replace(/\\n/g, '<br/>');
   }

Пробовал стили CSS, такие как пробел: pre;

Answer 1

Это не заменяет его, но вы можете использовать атрибут CSS white-space: pre-line; для рендеринга \n в браузере: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

div {
  white-space: pre-line;
}

<div>Foo
   Bar
       Baz     Foo
     Bar
 


     
  Baz
</div>

Answer 2

в Angular вы можете легко преобразовать текст в исходный формат, введя его так:

составная часть:

      this.myText = 'This is line one\nThis is line 2\nAnd here is 3'

html:

      <div [innerText]='myText'></div>

Answer 3

1 - переписать свой фильтр следующим образом:

.filter('textFormat', function() {
    return function (x) {
      return x.replace(new RegExp('\/n', 'g'), '<br/>');
    }
 })

2 - в вашем html вы должны использовать следующий синтаксис:

<span ng-bind-html="myOutput | textFormat"></span>

куда myOutput является $scope.myOutput = ' Hello /n'