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

Posted 2023-02-16

【中文标题】将新行 /n 转换为 angular 中的换行符

【英文标题】：convert new line /n to a line break in angular

【发布时间】：2018-05-22 02:52:52

【问题描述】：

我有一个包含换行符 /n 的字符串。尝试显示

字符串。它没有将 /n 作为新行，而是将 '/n' 显示为文本。

   $scope.myOutput = " Hello /n"

     myOutput | textFormat 

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

试过了：

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

尝试过 css 样式，例如 white-space: pre;

【参考方案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>

【参考方案2】：

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'

【参考方案3】：

在 Angular 中，您可以通过如下方式轻松地将文本转换为原始格式：

组件：

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

html:

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