在Angular JS中解码HTML实体

问题描述：

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

我有串

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

我需要一种方法来此采用了棱角分明的JS解码。我找到了一种方法来使用javascript here，但我确定这不会适用于Angular。需要找回的UI原始字符串这看起来像

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

答

可以使用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>

+14

但是如果你不会不来呈现为HTML，您如何处理呢？ – 2015-12-11 13:14:34

答

如果你不想使用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

This works but but I 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），：4：284） at angular.min.js：129 at m。$ digest（angular .min.js：146）在m $申请（angular.min.js：149）在angular.min.js：21 在Object.invoke（angular.min.js：44）在C（角.min.js：21） at Sc（angular.min.js：22） at ue（angular.min.js：20）' – Flash 2017-09-01 13:52:44

答

我有类似的问题，但不需要在UI上使用结果值。此问题是由代码的角度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实体

相关推荐