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

來源

2014-09-26 krs8785

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

來源

2014-09-26 16:55:00 ryeballar

+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

來源

2015-04-07 13:59:22

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>

來源

2015-08-19 14:05:52 sody

在Angular JS中解碼HTML實體

回答

相關問題