将新行 /n 转换为 angular 中的换行符

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 风格，如白色-space: pre;

Answer 1

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'

Answer 2

这不会替换它，但您可以使用 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 3

在 Angular 中，您可以像这样输入文本，轻松将其转换为原始格式：

组件：

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

html:

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

convert new line /n to a line break in angular