如何让我解析的 html 显示为 html 而不是纯文本？答案

【问题标题】：How can I get my parsed html to appear as html instead of plain text?如何让我解析的 html 显示为 html 而不是纯文本？
【发布时间】：2015-07-10 20:15:48
【问题描述】：

jsFiddle 解释了一切

我的代码分隔了主题标签，例如 #riots = <span class="hashtags">#riots</span>，但它被打印为纯文本而不是 html。我做错了什么？

function formCtrl($scope){
    $scope.$watch(function() {
        $scope.description = "Wow, it's crazy over here! #baltimore #riots";
      $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);   
      $scope.desc = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hashtag'>$2</span>");
    })
}

#description {
    width: 300px;
    height: 3em;
}
.hashtag {
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
    <textarea ng-model="description" id="description"></textarea>
    <br />
vidTags: {{vidTags}}
    <br />
desc: {{desc}}
    <br />

</div>

【问题讨论】：

可能是骗子？ stackoverflow.com/questions/14761724/…
读取 $sce 和 $santize docs.angularjs.org/api/ng/service/$sce
感谢您的评论@RenaissanceProgrammer。答案没有帮助，但它下面的第一条评论有帮助！现在，我只想让它工作。稍后，我会尝试让 $sce 或 $sanatize 工作
更正：'ng-bind-html-unsafe' 仅适用于 Angularjs 1.1 或更早版本。

标签： javascript regex angularjs hashtag

【解决方案1】：

您现在必须使用 $sce 通过过滤器运行您的输出，该过滤器您可以指定允许 HTML。

我们可以使用 $sce.trustAsHtml() 通过添加过滤器来实现这一点 [the] 代码（在控制器之外）。这个自定义过滤器将使确保 [the] HTML 不会被 AngularJS 1.2/AngularJS 过滤掉 1.3 或更高版本

来源：

http://creative-punch.net/2014/04/preserve-html-text-output-angularjs/ https://docs.angularjs.org/api/ng/service/$sce

【讨论】：

【解决方案2】：

这是一个 Plunker，它显示了一个使用 $sce 的工作示例。

http://plnkr.co/edit/sZliFJjOTiRyFxe7Bdts?p=preview

<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="formCtrl">
    <textarea ng-model="description" id="description"></textarea>
    <br />vidTags: {{vidTags}}
    <br /><div ng-bind-html="desc"></div>
    <br />
  </div>
  <script>
    var app = angular.module('myApp', []); 
    app.controller('formCtrl', function formCtrl($scope, $sce) {

      $scope.$watch(function() {
        $scope.description = "Wow, it's crazy over here! #baltimore #riots";
        $scope.vidTags = $scope.description.match(/(^|\s)(#[a-z\d-]+)/ig);
        var message = $scope.description.replace(/(^|\s)(#[a-z\d-]+)/ig, '$1<span class="hashtag">$2</span>');
        $scope.desc = $sce.trustAsHtml(message); 
      })
    })
  </script>
</body>

</html>

【讨论】：

@jake 在可能的情况下尝试在您的响应中包含答案代码而不是第三方位置，这样如果您的代码在未来几年从 plnkr 中删除，堆栈溢出用户仍然可以从中受益你的答案。