在AngularJS指令中转义HTML文本

是否有一个angular JS命令可以对文本进行HTML转义？我正在处理一个自定义指令，需要转义它生成的一些输出

AngularJS Sanitizer在内部使用encodeEntities函数，但不公开它。我知道我可以复制这个函数，但似乎应该有一个标准的方法来实现

---

用例：我有一个自定义指令，它执行语言本地化。此指令使用数据文件中的键查找来查找语言文本。在某些情况下，允许此文本包含HTML，和/或指令生成HTML以改进生成的视觉格式。此外，该指令将角度表达式作为参数，并使用它们替换字符串中的标记。我需要对这些参数进行编码，因为它们可能不安全

---

该指令被称为属性，例如

i18n html='welcome\u text\u html，1+1，user.name'

。然后，该指令按照所述格式化字符串，并使用

element.html

更新DOM节点。

在AngularJS中有两种方法进行html清理。第一个是使用ngBindHtml指令，第二个是使用$sanitize服务

函数MyCtrl（$scope，$sanitize）{
$scope.rawHtml=“”；
$scope.sanitizedHmtl=$sanitize（$scope.rawHtml）；
}

那么这两者在功能上是等效的：

如果在指令中使用，如您的问题中所述，您只需插入经过消毒的HTML：

element.html（scope.sanitizedHtml）；

---

但在大多数情况下，在编写指令时，您可以将其放在模板中并使用ngBindHtml，如上所述。但它适用于特殊情况。

您可以在ngSanitize中使用encodeEntities（）函数来转义&<>等。

清理是一回事，但要显示所有字符而不是“执行”HTML代码，我使用了“text”函数来设置值

在指令中，要设置值，而不是写入：

element.html( scope.myValue );

写：

element.text( scope.myValue );

这个答案是关于转义，而不是清理HTML。有两种方法：

正如@maniekq所提到的，如果您可以使用DOM，请执行以下操作：

element.text( scope.myValue );

从中，您可以使用此选项，例如，创建角度过滤器：

angular.module('myModule').filter('escapeHtml', function () {

    var entityMap = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
    };

    return function(str) {
        return String(str).replace(/[&<>"'\/]/g, function (s) {
            return entityMap[s];
        });
    }
});

angular.module（'myModule'）。filter（'escapeHtml'，function（）{
变量entityMap={
“&”：“&；”，
"": "",
'"': '"',
"'": ''',
“/”：“/；”
};
返回函数（str）{
返回字符串（str）.replace（/[&“\/]/g，函数）{
返回entityMap[s]；
});
}
});

---

转义HTML有两个不同的问题。第一个问题是需要对实体进行编码，第二个问题是需要信任结果，以便将数据用作HTML绑定。将以下代码添加到控制器中可以使用$sce服务解决这两个问题

咖啡脚本解决方案：

MyApp.controller('MyController', ['$scope','$sce',($scope,$sce) ->

  ###
  ...
  ###

  $scope.html5Entities = (value) ->
    value.replace(/[\u00A0-\u9999<>\&\'\"]/gim, (i) ->
      '&#' + i.charCodeAt(0) + ';'
    )

  $scope.trustAsHtml = (value) ->
    $sce.trustAsHtml(value)

  ###
  ...
  ###

])    

MyApp.controller('MyController', ['$scope','$sce', function($scope,$sce) {

  /* ... */

  $scope.html5Entities = function(value) {
    return value.replace(/[\u00A0-\u9999<>\&\'\"]/gim, function(i) {
          return '&#' + i.charCodeAt(0) + ';'
        })
  };

  $scope.trustAsHtml = function(value) {
     return $sce.trustAsHtml(value);
  };

  /* ... */

}]);

MyApp.controller（'MyController'，['$scope'，'$sce'，（$scope，$sce）->
###
...
###
$scope.html5实体=（值）->
值。替换（/[\u00A0-\u9999\&\'\“]/gim，（i）->
“&#”+i.charCodeAt（0）+”
)
$scope.trustAsHtml=（值）->
$sce.trustAsHtml（价值）
###
...
###
])    

Javascript解决方案：

MyApp.controller('MyController', ['$scope','$sce',($scope,$sce) ->

  ###
  ...
  ###

  $scope.html5Entities = (value) ->
    value.replace(/[\u00A0-\u9999<>\&\'\"]/gim, (i) ->
      '&#' + i.charCodeAt(0) + ';'
    )

  $scope.trustAsHtml = (value) ->
    $sce.trustAsHtml(value)

  ###
  ...
  ###

])    

MyApp.controller('MyController', ['$scope','$sce', function($scope,$sce) {

  /* ... */

  $scope.html5Entities = function(value) {
    return value.replace(/[\u00A0-\u9999<>\&\'\"]/gim, function(i) {
          return '&#' + i.charCodeAt(0) + ';'
        })
  };

  $scope.trustAsHtml = function(value) {
     return $sce.trustAsHtml(value);
  };

  /* ... */

}]);

MyApp.controller（'MyController'，['$scope'，'$sce'，函数（$scope，$sce）{
/* ... */
$scope.html5Entities=函数（值）{
返回值。替换（/[\u00A0-\u9999\&\'\“]/gim，函数（i）{
返回“&#”+i.charCodeAt（0）+”
})
};
$scope.trustAsHtml=函数（值）{
返回$sce.trustAsHtml（值）；
};
/* ... */
}]);

第一个函数html5Entities执行实际的实体编码，而第二个函数trustAsHtml将字符串标记为可以安全地用于HTML绑定。两个版本都要求控制器中包含$sce服务

用法示例：

<div ng-bind-html="trustAsHtml((html5Entities(product.title) | highlight: $select.search))"></div>

见相关问题：

---

此答案源自@mb21。唯一更改的是使用

$sce

。因此，您可以在

ng bind html

中使用此筛选器，而不会触发

错误：$sce:safe

angular
  .module('yourModule', [
    'ngSanitize'
  ])
  .filter('escapeHtml', function ($sce) {
    // Modified by Rockallite: Add $sce.trustAsHtml() to mute "Error: $sce:unsafe"
    // http://stackoverflow.com/a/32835368/2293304
    // http://stackoverflow.com/a/28537958/2293304
    // https://github.com/janl/mustache.js/blob/master/mustache.js#L82
    var entityMap = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
    };

    return function(str) {
      return $sce.trustAsHtml(String(str).replace(/[&<>"'\/]/g, function (s) {
          return entityMap[s];
      }));
    }
  });

angular
.module（'yourModule'[
“消毒”
])
.filter（'escapeHtml'，函数（$sce）{
//由Rockallite修改：添加$sce.trustAsHtml（）以禁用“错误：$sce:unsafe”
// http://stackoverflow.com/a/32835368/2293304
// http://stackoverflow.com/a/28537958/2293304
// https://github.com/janl/mustache.js/blob/master/mustache.js#L82
变量entityMap={
“&”：“&；”，
"": "",
'"': '"',
"'": ''',
“/”：“/；”
};
返回函数（str）{
返回$sce.trustAsHtml（字符串（str）.replace（/[&“\/]/g，函数）{
返回entityMap[s]；
}));
}
});

您可以实现如下过滤器：

app.filter('escape', escape);

 function escape() {
    return function (html) {
      return angular.element('<pre/>').text(html).html();
    };
  }

app.filter（'escape'，escape）；
函数escape（）{
返回函数（html）{
返回angular.element（“”）.text（html）.html（）；
};
}

这不是一个简单的解决方案，但是如果您深入研究角度清理代码，您可以找到function

encodeEntities

。很好，但是很私人。要查找它的用法，请转到

htmlSanitizeWriter

，然后转到

sanitizeText

。 它仍然是私有的，但用于公共过滤器

linky

您可以显式使用

linky

并希望找不到任何链接，也可以在您的服务中重新实现

sanitizeText

或

encodeEntities

。
在您的Angular应用程序中使用的HTML模板文件中使用[innerHtml]速记标记
我的示例如下所示，用于转义wordpress在从我的WP API检索的post_内容上生成的HTML，因此HTML标记不会显示在浏览器中：

<div [innerHtml]="post.post_content" *ngIf="post && post.post_content"></div>