web-dev-qa-db-ja.com

AngularJs：HTMLでHTMLエンティティをデコードする方法は？

状況：

コンテンツがjson形式でデータを返すAPIを呼び出して取得されるWebページを構築しています。

問題は、htmlタグがHTMLエンティティとして指定されているため、デコードする必要があることです。

例：

これは私が扱っているjsonの例です：

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

ATTEMPT：

私はそれを研究することに時間を費やしていて、思ったより難しいようです。グーグルと同様に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);
    };
}])

angularビューのNg-bind-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...

しかし、私が見る必要があるのは適切にフォーマットされたテキストです：

ここにありますIS A BOLD TEXTここにいくつかの通常のテキスト...

質問：

AngularJsでHTMLエンティティを適切にフォーマットされたHTMLにデコードするにはどうすればよいですか？

javascripthtmljsonangularjshtml-entities
10
FrancescoMussi

$sceに渡す前に、もう1つの「デコード」ステップを実行する必要があると思います。たとえば、次のようになります。

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

13
dfsq

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は回避できると思います。以下の例を参照してください。

例

7
K.Toress