在 Angular JS 中解码 HTML 实体答案

【问题标题】：Decode HTML entity in Angular JS在 Angular JS 中解码 HTML 实体
【发布时间】：2015-08-19 22:17:32
【问题描述】：

如何使用 Angular JS 解码文本中的 HTML 实体。

我有字符串

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

我需要一种方法来使用 Angular JS 对此进行解码。我找到了一种使用 javascript here 的方法，但我确信这不适用于 Angular。需要在 UI 上取回看起来像

的原始字符串

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

【问题讨论】：

标签： javascript html angularjs html-entities utf8-decode

【解决方案1】：

您可以使用 ng-bind-html 指令将其显示为 html 内容，并解码所有 html 实体。只需确保在您的应用程序中包含 ngSanitize 依赖项即可。

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>

【讨论】：

但是如果你不习惯将它呈现为 html ，你该如何处理呢？

【解决方案2】：

如果你不想使用 ngSanitize，你可以这样做：

在您的控制器中：

$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);
        };

在模板中：

<div ng-bind-html="renderHTML(html)"></div>

只要确保在控制器中注入 $sce

【讨论】：

这可行，但我在控制台中收到此错误：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)

【解决方案3】：

我有类似的问题，但不需要在 UI 上使用结果值。 Angular 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>

【讨论】：