AngularJs:如何解码HTML中的HTML实体

AngularJs: How to decode HTML entities in HTML?

本文关键字：HTML 中的 实体 解码 何解码 AngularJs      更新时间：2023-09-26

情况：

我正在构建一个网页，其中的内容是通过调用API获取的，该API以json格式返回数据。

问题是html标记是作为html实体给出的，必须对其进行解码。

示例：

这是我正在处理的json示例：

<p align="justify"><strong>15<sup>th</sup> HERE THERE IS A BOLD TEXT </strong> HERE SOME NORMAL TEXT...

尝试：

我花时间研究它，它似乎比我想象的要难。在谷歌和类似的SO问题，一个可能的解决方案是使用ng bing html

Api呼叫：

$http.get('http://API/page_content').then(function(resp) 
{
    $scope.content_test = resp.data[0].content; 
}

过滤器：

.filter('trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}])

Ng绑定角度视图中的html：

<div ng-bind-html=" content_test  | trusted"></div>

输出：

这是视图中的输出(正如您所看到的(：

<p align="justify"><strong>15<sup>th<'/sup> HERE THERE IS A BOLD TEXT<'/strong> HERE SOME NORMAL TEXT...

但我需要看到的是正确格式化的文本：

此处有粗体文本此处为一些普通文本。。。

问题：

如何在AngularJs中以正确格式的HTML解码HTML实体？

我认为在将其传递给$sce之前，还需要执行一个"解码"步骤。例如：

app.filter('trusted', ['$sce', function($sce) {
    var div = document.createElement('div');
    return function(text) {
        div.innerHTML = text;
        return $sce.trustAsHtml(div.textContent);
    };
}]);

演示：http://plnkr.co/edit/LrT4tgYtTu4CPrOAidra?p=preview

添加angular.sanitize.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js"></script>

将依赖项添加为，

var app = angular.module('plunker', ['ngSanitize']);

NOW解码html字符串并将其传递给ng-bind-html。

$http.get('http://API/page_content').then(function(resp) 
{
    var html = resp.data[0].content; 
    var txt = document.createElement("textarea");
    txt.innerHTML = html;

    $scope.content_test = txt.value;
    //if you use jquery then use below
    //$scope.content_test = $('<textarea />').html(html).text();        
}
<div ng-bind-html="content_test"></div>

我认为您可以避免filter，请参阅下面的示例。

示例

相关文章：