web-dev-qa-db-fra.com

Quelle est la bonne façon de décoder une chaîne contenant des entités HTML spéciales?

Supposons que je récupère du JSON à partir d'une demande de service qui ressemble à ceci:

{
    "message": "We're unable to complete your request at this time."
}

Je ne suis pas sûr pourquoi que l'apostraphe est codé comme ça ('); tout ce que je sais, c'est que je veux le décoder.

Voici une approche utilisant jQuery qui m’est venue à l’esprit:

function decodeHtml(html) {
    return $('<div>').html(html).text();
}

Cela semble (très) hacky, cependant. Quel est le meilleur moyen? Y a-t-il un "bon" chemin?

javascriptjqueryhtml-entities
175
Dan Tao

C'est ma manière préférée de décoder les caractères HTML. L'avantage d'utiliser ce code est que les balises sont également préservées.

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

Exemple: http://jsfiddle.net/k65s3/

Contribution:

Entity:&nbsp;Bad attempt at XSS:<script>alert('new\nline?')</script><br>

Sortie:

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>
344
Rob W

N'utilisez pas le DOM pour ce faire. L'utilisation du DOM pour décoder des entités HTML (comme suggéré dans la réponse actuellement acceptée) conduit à différences dans les résultats inter-navigateurs .

Pour une solution robuste et déterministe qui décode les références de caractères conformément à l'algorithme du standard HTML, utilisez la bibliothèque il . De son fichier README:

he (pour “entités HTML”) est un encodeur/décodeur d'entité HTML robuste écrit en JavaScript. Il prend en charge toutes les références normalisées de caractères nommés selon HTML , gère esperluettes ambiguës et autres cas Edge comme le ferait un navigateur , dispose d'une suite de tests complète et - contrairement à beaucoup d'autres solutions JavaScript - il gère parfaitement les symboles Unicode astraux. ne démo en ligne est disponible.

Voici comment vous l'utiliseriez:

he.decode("We&#39;re unable to complete your request at this time.");
→ "We're unable to complete your request at this time."

Disclaimer: Je suis l'auteur de la bibliothèque he .

Voir cette réponse de débordement de pile pour plus d’informations.

86
Mathias Bynens

Si vous ne voulez pas utiliser html/dom, vous pouvez utiliser regex. Je n'ai pas testé cela mais quelque chose comme:

function parseHtmlEntities(str) {
    return str.replace(/&#([0-9]{1,3});/gi, function(match, numStr) {
        var num = parseInt(numStr, 10); // read num as normal number
        return String.fromCharCode(num);
    });
}

[Modifier]

Remarque: cela ne fonctionnerait que pour les entités HTML numériques, et non pas comme & oring ;.

[Modifier 2]

Correction de la fonction (quelques fautes de frappe), testez ici: http://jsfiddle.net/Be2Bd/1/

29
Alxandr

jQuery va encoder et décoder pour vous.

function htmlDecode(value) {
  return $("<textarea/>").html(value).text();
}

function htmlEncode(value) {
  return $('<textarea/>').text(value).html();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#encoded")
  .text(htmlEncode("<img src onerror='alert(0)'>"));
   $("#decoded")
  .text(htmlDecode("&lt;img src onerror='alert(0)'&gt;"));
});
</script>

<span>htmlEncode() result:</span><br/>
<div id="encoded"></div>
<br/>
<span>htmlDecode() result:</span><br/>
<div id="decoded"></div>
25
Jason Williams

Il y a une fonction JS à traiter avec & # xxxx entités stylées:
fonction sur GitHub

// encode(decode) html text into html entity
var decodeHtmlEntity = function(str) {
  return str.replace(/&#(\d+);/g, function(match, dec) {
    return String.fromCharCode(dec);
  });
};

var encodeHtmlEntity = function(str) {
  var buf = [];
  for (var i=str.length-1;i>=0;i--) {
    buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
  }
  return buf.join('');
};

var entity = '&#39640;&#32423;&#31243;&#24207;&#35774;&#35745;';
var str = '高级程序设计';
console.log(decodeHtmlEntity(entity) === str);
console.log(encodeHtmlEntity(str) === entity);
// output:
// true
// true
20
hypers

_.unescape fait ce que vous cherchez

https://lodash.com/docs/#unescape

7
tldr

C'est une si bonne réponse. Vous pouvez utiliser ceci avec angular comme ceci:

 moduleDefinitions.filter('sanitize', ['$sce', function($sce) {
    return function(htmlCode) {
        var txt = document.createElement("textarea");
        txt.innerHTML = htmlCode;
        return $sce.trustAsHtml(txt.value);
    }
}]);
0
kodmanyagha