web-dev-qa-db-ja.com

Angular JSでHTMLエンティティをデコード

angular JS。を使用してテキスト内のHTMLエンティティをデコードするにはどうすればよいですか？.

私は文字列を持っています

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

Angular JSを使用してこれをデコードする方法が必要です。javascript here を使用してこれを実行する方法を見つけましたが、Angularでは動作しません。 UIの元の文字列を返します

""12.10 On-Going Submission of ""Made Up"" Samples.""
javascripthtmlangularjshtml-entitiesutf8-decode
25
krs8785

ng-bind-htmlすべてのHTMLエンティティがデコードされたHTMLコンテンツとして表示するディレクティブ。アプリケーションにngSanitize依存関係を含めるようにしてください。

[〜＃〜] demo [〜＃〜]

[〜＃〜] javascript [〜＃〜]

angular.module('app', ['ngSanitize'])

  .controller('Ctrl', function($scope) {
    $scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."';
  });

[〜＃〜] html [〜＃〜]

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

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を注入してください。

22
Frane Poljak

同様の問題がありますが、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>
1
sody