在Angular中如何将换行符"/n"转换为换行符"<br>"？

Question

我有一个包含换行符/n的字符串。尝试显示该字符串。但是它并不把/n作为新的一行，而是将其作为文本显示。

   $scope.myOutput = " Hello /n"

    {{ myOutput | textFormat }}

必填项 -> 你好（在html页面上）

尝试过：

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

尝试过像 white-space: pre; 这样的 CSS 样式；

- Rk R Bairi

---

这个回答是否解决了你的问题？ angular - 如何在HTML中创建新行 - Vega

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>

- Tim Schoch

Answer 2

在 Angular 中，你可以通过这样输入来轻松将文本转换为原始格式：

组件：

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

HTML：

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

- Maurice Buiten

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'

- Vadim Shashkov