Comment décoder des entités HTML en utilisant jQuery?

sans aucun jQuery:

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

console.log(decodeEntities('1 & 2')); // '1 & 2'

cela fonctionne de la même manière que la réponse acceptée , mais est sûr à utiliser avec l'entrée utilisateur non fiable.

les problèmes de Sécurité dans des approches similaires

Comme , a indiqué Mike Samuel , de le faire avec un <div> au lieu de <textarea> non approuvées saisie de l'utilisateur est d'une vulnérabilité XSS, même si l' <div> n'est jamais ajouté au DOM:

function decodeEntities(encodedString) {
    var div = document.createElement('div');
    div.innerHTML = encodedString;
    return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

cependant, cette attaque n'est pas possible contre un <textarea> parce qu'il n'y a pas D'éléments HTML qui sont autorisés <textarea> . Par conséquent, toute balise HTML encore présente dans la chaîne de caractères 'encoded' sera automatiquement encodée en entity par le navigateur.

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

faisant cela en utilisant jQuery .html() et .val() méthodes au lieu d'utiliser .innerHTML et .value est également peu sûr* pour certaines versions de jQuery, même en utilisant un textarea . Cela est dû au fait que les versions plus anciennes de jQuery évaluent délibérément et explicitement les scripts contenus dans la chaîne passée à .html() . Par conséquent, un code comme celui-ci affiche une alerte en jQuery 1.8:

// Shows alert
$('<textarea>').html('<script>alert(1337)</script>').text()

_{* Grâce à Eru Penkman pour la capture de cette vulnérabilité.}

comme disait Mike Samuel, n'utilisez pas jQuery.HTML.)(texte() pour décoder les entités html que c'est dangereux.

à la place, utilisez un modèle de renderer comme Moustache.js ou decodeEntities de @VyvIT commentaire.

trait de Soulignement.js utility-belt library est livré avec escape et unescape méthodes, mais ils ne sont pas sûrs pour l'entrée de l'utilisateur:

_.d'échappement(string)

_.ne pas encoder(string)

je pense que vous confondez le texte et les méthodes HTML. Regardez cet exemple, si vous utilisez le HTML interne d'un élément comme texte, vous obtiendrez les balises HTML décodées (deuxième bouton). Mais si vous les utilisez comme HTML, vous obtiendrez la vue formatée HTML (premier bouton).

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

Premier bouton écrit : voici une HTML du contenu.

Second bouton écrit: voici un < B>HTML< / B> contenu.

soit dit en passant, vous pouvez voir un plug-in que j'ai trouvé dans jQuery plugin - HTML decode and encode qui code et décode les chaînes HTML.

la question est limitée par "avec jQuery" mais cela pourrait aider certains à savoir que le code jQuery donné dans la meilleure réponse ici fait la suivante ci-dessous...cela fonctionne avec ou sans jQuery:

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}

vous pouvez utiliser la il bibliothèque, disponible à partir de https://github.com/mathiasbynens/he

exemple:

console.log(he.decode("Jörg &amp Jürgen rocked to & fro "));
// Logs "Jörg & Jürgen rocked to & fro"

I a contesté l'auteur de la bibliothèque sur la question de savoir s'il y avait une raison d'utiliser cette bibliothèque dans le code client en faveur de la <textarea> hack fourni dans autres réponses ici et ailleurs. Il a fourni quelques justifications possibles:

• si vous utilisez node.js serverside, en utilisant une bibliothèque pour encodage/décodage HTML vous donne une solution unique qui fonctionne à la fois clientside et serverside.

• les algorithmes de décodage d'entités de certains navigateurs comportent des bogues ou manquent la prise en charge de certains références de caractères nommées . Exemple, Internet Explorer va décoder et rendre correctement les espaces non-cassants (   ) mais les signaler comme des espaces ordinaires au lieu de ceux non-cassants via la propriété innerText D'un élément DOM, cassant le hack <textarea> (bien que de manière mineure). En outre, IE 8 et 9 simplement ne supporte pas l'une des nouvelles références de caractères nommées ajoutées dans HTML 5. L'auteur de he héberge également un test du support de référence de caractère nommé à http://mathias.html5.org/tests/html/named-character-references / . Dans IE 8, il rapporte plus d'un millier d'erreurs.

  si vous voulez être isolé des bugs de navigateur liés au décodage d'entité et/ou être en mesure de gérer la gamme complète des références de caractères nommés, vous ne pouvez pas vous en tirer avec le hack <textarea> ; vous aurez besoin d'une bibliothèque comme il .

• il se sent comme faire les choses de cette façon est moins hacky.

code:

$("<textarea/>").html('<a>').html();      // return '&lt;a&gt'

décoder:

$("<textarea/>").html('&lt;a&gt').val()   // return '<a>'

Utiliser

myString = myString.replace( /\&/g, '&' );

il est plus facile de le faire du côté du serveur car apparemment JavaScript n'a pas de bibliothèque native pour gérer les entités, et je n'en ai pas trouvé non plus près du haut des résultats de recherche pour les différents cadres qui étendent JavaScript.

recherche de "entités HTML JavaScript", et vous pourriez trouver quelques bibliothèques à cette fin, mais ils seront probablement tous construits autour de la logique ci - dessus-remplacer, entité par entité.

vous devez faire fonction personnalisée pour les entités html:

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

j'ai juste eu à avoir un charater entité HTML (Pons) comme valeur pour un bouton HTML. Le code HTML semble bon dès le début dans le navigateur:

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

maintenant j'ajoutais une bascule qui devrait aussi afficher le charater. C'est ma solution

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

cette option affiche encore une fois "aton" dans le bouton. J'espère que cela peut aider quelqu'un.

Suppose que vous avez la chaîne ci-dessous.

nos cabines de luxe sont chaudes, confortables et confortables

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

str et attribuer retour à la

tag.

c'est ça.

pour les utilisateurs ExtJS, si vous avez déjà la chaîne encodée, par exemple lorsque la valeur retournée d'une fonction de Bibliothèque est le contenu innerHTML, considérez cette fonction ExtJS:

Ext.util.Format.htmlDecode(innerHtmlContent)

étendre une classe de chaîne de caractères:

String::decode = ->
  $('<textarea />').html(this).text()

et utiliser comme méthode:

"<img src='myimage.jpg'>".decode()

Voici encore un problème: La chaîne échappée ne semble pas lisible lorsqu'elle est assignée à la valeur d'entrée

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

Exapmle: https://jsfiddle.net/kjpdwmqa/3 /

alternativement, il y a aussi une bibliothèque pour elle..

ici, https://cdnjs.com/libraries/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

l'usage est le suivant...

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('© Ande & Nonso® Company Limited 2018');

santé.

la façon la plus simple est de définir un sélecteur de classe à vos éléments et d'utiliser ensuite le code suivant:

$(function(){
    $('.classSelector').each(function(a, b){
        $(b).html($(b).text());
    });
});

Rien de plus besoin!

j'ai eu ce problème et j'ai trouvé cette solution claire et ça marche très bien.

pour décoder les entités HTML avec jQuery, utilisez simplement cette fonction:

function html_entity_decode(txt){
    var randomID = Math.floor((Math.random()*100000)+1);
    $('body').append('<div id="random'+randomID+'"></div>');
    $('#random'+randomID).html(txt);
    var entity_decoded = $('#random'+randomID).html();
    $('#random'+randomID).remove();
    return entity_decoded;
}

comment utiliser:

Javascript:

var txtEncoded = "á é í ó ú";
$('#some-id').val(html_entity_decode(txtEncoded));

HTML:

<input id="some-id" type="text" />

je pense que c'est exactement le contraire de la solution choisie.

var decoded = $("<div/>").text(encodedStr).html();