web-dev-qa-db-fra.com

Décoder l'entité HTML en Angular JS

Comment décoder une entité HTML dans du texte en utilisant angular JS.

J'ai la ficelle

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

J'ai besoin d'un moyen de décoder cela en utilisant Angular JS. J'ai trouvé un moyen de le faire en utilisant javascript ici mais je suis sûr que cela ne fonctionnera pas pour Angular. Besoin d'obtenir sauvegarder la chaîne d'origine sur l'interface utilisateur qui ressemblerait à

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

Vous pouvez utiliser le ng-bind-html directive pour l'afficher en tant que contenu html avec toutes les entités html décodées. Assurez-vous simplement d'inclure la dépendance ngSanitize dans votre application.

DÉMO

[~ # ~] 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

Si vous ne voulez pas utiliser ngSanitize, vous pouvez le faire de cette façon:

dans votre contrôleur:

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

Et dans le modèle:

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

Assurez-vous simplement d'injecter $ sce dans votre contrôleur

22
Frane Poljak

J'ai un problème similaire, mais je n'ai pas besoin d'utiliser la valeur de résultat sur l'interface utilisateur. Ce problème a été résolu par le code de 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