将新行 /n 转换为角度的换行符

Posted

技术标签:

【中文标题】将新行 /n 转换为角度的换行符【英文标题】:convert new line /n to a line break in angular 【发布时间】:2021-08-27 06:24:44 【问题描述】:

我有一个包含换行符 /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】:

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

组件:

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

html:

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

【讨论】:

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

【讨论】:

以上是关于将新行 /n 转换为角度的换行符的主要内容,如果未能解决你的问题,请参考以下文章

如何将列表转换为每行 N 项的 CSV 文件?

将列表转换为数据框时如何使用“换行”命令?

换行符在 textarea 中显示为 \r\n

Phpmyadmin 导出/导入问题与换行符

将制表符和换行符分隔的字符串转换为 pandas 数据框

C ++从多行字符串中删除新行