如何在字符串中使用 br 以使用 html 标签正确显示我的字符串？答案

【问题标题】：how can i use br in a string to show my string correctly with the html tag?如何在字符串中使用 br 以使用 html 标签正确显示我的字符串？
【发布时间】：2016-11-29 05:39:18
【问题描述】：

我的字符串是：

$scope.lyrics = 'blablablalba\nblablabla\nblablabla';

然后我将'\n' 替换为<br> 标签

我的字符串现在是：

$scope.lyrics = 'blablablalba<br>blablabla<br>blablabla';

当我的字符串在 html 中时：

<p> {{ lyrics }} </p>

我的结果是

blablablalba <br> blablabla <br> blablabla

我能为我的结果做些什么：

lablablalba 

blablabla 

blablabla

【问题讨论】：

您是否尝试过使用 coule od

而不是仅使用一个？
我猜 Angular 正在转义/清理标签。
是的，结果是一样的
研究使用$sce.trustAsHtml()

标签： javascript html angularjs string replace

【解决方案1】：

你必须清理 HTML 标签。

$scope.lyrics = 'blablablalba<br>blablabla<br>blablabla';

<p ng-bind-html-unsafe="lyrics">

输出将是：

blablablalba
blablabla
blablabla

看看这个：http://jsfiddle.net/5DMjt/7670/

【讨论】：

【解决方案2】：

Angular 将字符串作为文本插入以确保安全，您需要指定以安全地允许绕过无菌内容。

Angular Docs:

ngBindHtml - 模块 ng 中的指令

计算表达式并将生成的 HTML 插入元素以安全的方式。默认情况下，生成的 HTML 内容将使用 $sanitize 服务进行消毒。要利用这个功能，确保 $sanitize 可用，

工作示例：

var app = angular.module('myApp', ['ngSanitize']);
app.controller('myCtrl', function($scope) {
  $scope.lyrics = 'blablablalba<br>blablabla<br>blablabla';
});

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="https://rawgit.com/angular/bower-angular-sanitize/master/angular-sanitize.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <p ng-bind-html="lyrics"></p>
</body>

</html>

【讨论】：