How do i decode HTML entity in text using angular JS.
I have the string
""12.10 On-Going Submission of ""Made Up"" Samples.""
I need a way to decode this using Angular JS. I found a way to do that using javascript here but I am sure thats wont work for Angular. Need to get back the original string on the UI which would look like
""12.10 On-Going Submission of ""Made Up"" Samples.""
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
angular.min.js:123 TypeError: angular.element(...).html(...).text is not a function at b.$scope.renderHTML (app.js:24) at fn (eval at compile (angular.min.js:239), <anonymous>:4:284) at angular.min.js:129 at m.$digest (angular.min.js:146) at m.$apply (angular.min.js:149) at angular.min.js:21 at Object.invoke (angular.min.js:44) at c (angular.min.js:21) at Sc (angular.min.js:22) at ue (angular.min.js:20)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>