Decode HTML entity in Angular JS

Asked 26/9, 2014 at 16:38 Answered 19/8, 2015 at 14:5

Solved javascript html angularjs html-entities utf8-decode

How do i decode HTML entity in text using angular JS.

I have the string

"&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;"

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.""

Dollarbird answered 26/9, 2014 at 16:38 Comment(0)

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.

DEMO

JAVASCRIPT

angular.module('app', ['ngSanitize'])

  .controller('Ctrl', function($scope) {
    $scope.html = '&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;';
  });

HTML

  <body ng-controller="Ctrl">
    <div ng-bind-html="html"></div>
  </body>

Omidyar answered 26/9, 2014 at 16:55 Comment(1)

but if you dont wont to rendered it as html , how you can deal with it ? – Recalescence 11/12, 2015 at 13:14

If you don't want to use ngSanitize, you can do it this way:

in your controller:

$scope.html = '&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;'
$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

Hackett answered 7/4, 2015 at 13:59 Comment(1)

This works but I get this error in the console:

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)

– Larghetto 1/9, 2017 at 13:52

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,"&lt;");
  // 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 = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
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>

Syzygy answered 19/8, 2015 at 14:5 Comment(0)

Recommended topics

Hot tags