在Angular JS中解码HTML实体

Question

How do i decode HTML entity in text using angular JS. 如何使用angular JS在文本中解码HTML实体。

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. 我需要一种使用Angular JS解码的方法。 I found a way to do that using javascript here but I am sure thats wont work for Angular. 我在这里找到了一种使用javascript的方法，但我相信它不适用于Angular。 Need to get back the original string on the UI which would look like 需要在UI上找回原始字符串

""12.10 On-Going Submission of ""Made Up"" Samples.""

Answer 1

You can use the ng-bind-html directive to display it as an html content with all the html entities decoded. 您可以使用ng-bind-html指令将其显示为html内容，并解码所有html实体。 Just make sure to include the ngSanitize dependency in your application. 只需确保在应用程序中包含ngSanitize依赖项。

DEMO DEMO

JAVASCRIPT 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 HTML

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

Answer 2

If you don't want to use ngSanitize, you can do it this way: 如果您不想使用ngSanitize，可以这样做：

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 只需确保在控制器中注入$ sce

Answer 3

I have similar issue, but don't need to use result value on UI. 我有类似的问题，但不需要在UI上使用结果值。 This issue was resolved by code from angular ngSanitize module: 此问题已通过角度ngSanitize模块中的代码解决：

 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>

在Angular JS中解码HTML实体

问题描述

3 个解决方案

解决方案1
43 已采纳 2014-09-26 16:55:00

解决方案2
22 2015-04-07 13:59:22

解决方案3
1 2015-08-19 14:05:52

在Angular JS中解码HTML实体

问题描述

3 个解决方案

解决方案1 43 已采纳 2014-09-26 16:55:00

解决方案2 22 2015-04-07 13:59:22

解决方案3 1 2015-08-19 14:05:52

解决方案1
43 已采纳 2014-09-26 16:55:00

解决方案2
22 2015-04-07 13:59:22

解决方案3
1 2015-08-19 14:05:52