将新行 /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 转换为角度的换行符的主要内容,如果未能解决你的问题,请参考以下文章