Decode HTML entity in Angular JS
You can use the ng-bind-html directive to display it as an html content with all the html entities decoded. Just make sure to include the ngSanitize dependency in your application.
JAVASCRIPT
angular.module('app', ['ngSanitize']) .controller('Ctrl', function($scope) { $scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'; });HTML
<body ng-controller="Ctrl"> <div ng-bind-html="html"></div> </body>
If you don't want to use ngSanitize, you can do it this way:
in your controller:
$scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'$scope.renderHTML = function(html_code) { var decoded = angular.element('<textarea />').html(html_code).text(); return $sce.trustAsHtml(decoded); };And in the template:
<div ng-bind-html="renderHTML(html)"></div>Just make sure you inject $sce in your controller
I have similar issue, but don't need to use result value on UI. This issue was resolved by code from angular ngSanitize module:
var hiddenPre=document.createElement("pre");/*** decodes all entities into regular string* @param value* @returns {string} A string with decoded entities.*/function decodeEntities(value) { if (!value) { return ''; } hiddenPre.innerHTML = value.replace(/</g,"<"); // innerText depends on styling as it doesn't display hidden elements. // Therefore, it's better to use textContent not to cause unnecessary reflows. return hiddenPre.textContent;}var encoded = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';var decoded = decodeEntities(encoded);document.getElementById("encoded").innerText=encoded;document.getElementById("decoded").innerText=decoded;#encoded { color: green;}#decoded { color: red;}Encoded: <br/><div id="encoded"></div><br/><br/>Decoded: <br/><div id="decoded"></div>