Question

169

AngularJs: How to decode HTML entities in HTML?

rated 0 times [ 176] [ 7] / answers: 1 / hits: 23725 / 9 Years ago, wed, july 8, 2015, 12:00:00

THE SITUATION:

I am bulding a webpage which content is taken calling an API that returns the data in json format.

The problem is that the html tags are given as HTML entities, that has to be decoded.

EXAMPLE:

This is example of the json i am dealing with:

&#60;p align=&#34;justify&#34;&#62;&#60;strong&#62;15&#60;sup&#62;th&#60;/sup&#62; HERE THERE IS A BOLD TEXT &#60;/strong&#62; HERE SOME NORMAL TEXT...

ATTEMPT:

I have spend time research it and it seems harder than i thought. Looking in google and similar SO question, a possible solution is to use the ng-bing-html

Api call:

$http.get('http://API/page_content').then(function(resp) 

{

    $scope.content_test = resp.data[0].content; 

}

Filter:

.filter('trusted', ['$sce', function($sce){

    return function(text) {

        return $sce.trustAsHtml(text);

    };

}])

Ng-bind-html in the angular view:

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

OUTPUT:

This is the output in the view (exactly as you see it):

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

but what i need to see is the text properly formatted:

HERE THERE IS A BOLD TEXT HERE SOME NORMAL TEXT...

THE QUESTION:

How can i decode HTML entities in a proper formatted HTML in AngularJs?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anders

Add To Favorites

Follow

Total Points: 295

Total Questions: 106

Total Answers: 104

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

answered 9 Years ago blaisep · Accepted Answer

I think you need to perform one more decoding step before you pass it to $sce. For example like this:

app.filter('trusted', ['$sce', function($sce) {

    var div = document.createElement('div');

    return function(text) {

        div.innerHTML = text;

        return $sce.trustAsHtml(div.textContent);

    };

}]);

Demo: http://plnkr.co/edit/LrT4tgYtTu4CPrOAidra?p=preview