Javascript 在 Angular JS 中解码 HTML 实体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26064309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Decode HTML entity in Angular JS
提问by krs8785
How do i decode HTML entity in text using angular JS.
我如何使用 angular JS 解码文本中的 HTML 实体。
I have the string
我有字符串
""12.10 On-Going Submission of ""Made Up"" Samples.""
I need a way to decode this using Angular JS. I found a way to do that using javascript herebut I am sure thats wont work for Angular. Need to get back the original string on the UI which would look like
我需要一种使用 Angular JS 对其进行解码的方法。我在这里找到了一种使用 javascript 的方法，但我确信这不适用于 Angular。需要在 UI 上取回原始字符串，看起来像
""12.10 On-Going Submission of ""Made Up"" Samples.""
回答by ryeballar
You can use the ng-bind-htmldirective to display it as an html content with all the html entities decoded. Just make sure to include the ngSanitizedependency in your application.
您可以使用该ng-bind-html指令将其显示为 html 内容，其中所有 html 实体都已解码。只需确保ngSanitize在您的应用程序中包含依赖项即可。
JAVASCRIPT
爪哇脚本
angular.module('app', ['ngSanitize'])
.controller('Ctrl', function($scope) {
$scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."';
});
HTML
HTML
<body ng-controller="Ctrl">
<div ng-bind-html="html"></div>
</body>
回答by Frane Poljak
If you don't want to use ngSanitize, you can do it this way:
如果你不想使用 ngSanitize，你可以这样做：
in your controller:
在您的控制器中：
$scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'
$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
回答by sody
I have similar issue, but don't need to use result value on UI. This issue was resolved by code from angular ngSanitize module:
我有类似的问题，但不需要在 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,"<");
// 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 = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';
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>