Comment décoder des entités HTML à l'aide de jQuery?

Comment utiliser jQuery pour décoder des entités HTML dans une chaîne?

Note de sécurité: l' utilisation de cette réponse (conservée dans sa forme originale ci-dessous) peut introduire une vulnérabilité XSS dans votre application. Vous ne devez pas utiliser cette réponse. Lisez la réponse de lucascaro pour une explication des vulnérabilités de cette réponse et utilisez plutôt l'approche de cette réponse ou celle de Mark Amery .

En fait, essayez

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

Sans 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 manière similaire à la réponse acceptée , mais est sûr à utiliser avec des entrées utilisateur non fiables.

Problèmes de sécurité dans des approches similaires

Comme l'a noté Mike Samuel , faire cela avec une entrée utilisateur <div>au lieu d'une <textarea>entrée non approuvée est une vulnérabilité XSS, même si la <div>n'est jamais ajoutée 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 a <textarea>car aucun élément HTML n'est autorisé à contenir un <textarea>. Par conséquent, toutes les balises HTML encore présentes dans la chaîne «encodée» seront automatiquement encodées 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)">'))

Avertissement : cette opération à l'aide de jQuery .html()et de .val()méthodes au lieu d'utiliser .innerHTMLet .valuen'est pas sécurisée * pour certaines versions de jQuery, même lorsque vous utilisez atextarea . En effet, les anciennes versions de jQuery évalueraient 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 dans jQuery 1.8:

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

_{* Merci à Eru Penkman d' avoir rattrapé cette vulnérabilité.}

Comme Mike Samuel l'a dit, n'utilisez pas jQuery.html (). Text () pour décoder des entités html car cela n'est pas sûr.

Utilisez plutôt un rendu de modèle comme Mustache.js ou decodeEntities du commentaire de @ VyvIT.

La bibliothèque de ceinture utilitaire Underscore.js est livrée avec les méthodes escapeet unescape, mais elles ne sont pas sûres pour l'entrée utilisateur:

_.escape (chaîne)

_.unescape (chaîne)

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 des balises HTML décodées (deuxième bouton). Mais si vous les utilisez comme HTML, vous obtiendrez la vue au format 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 un contenu HTML .

Le deuxième bouton écrit: voici un contenu <B> HTML </B>.

À propos, vous pouvez voir un plug-in que j'ai trouvé dans le plug-in jQuery - décodage HTML et encodage qui encode 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 ce qui suit en 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 bibliothèque he , disponible sur 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"

J'ai défié 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 côté client en faveur du <textarea>hack fourni dans d' autres réponses ici et ailleurs. Il a fourni quelques justifications possibles:

• Si vous utilisez node.js côté serveur, l'utilisation d'une bibliothèque pour l'encodage / décodage HTML vous offre une solution unique qui fonctionne à la fois côté client et côté serveur.

• Certains algorithmes de décodage d'entités de certains navigateurs comportent des bogues ou ne prennent pas en charge certaines références de caractères nommées . Par exemple, Internet Explorer décode et restitue  correctement les espaces insécables ( ) mais les signale comme des espaces ordinaires au lieu d'espaces insécables via la innerTextpropriété d' un élément DOM , brisant le <textarea>hack (bien que de manière mineure). De plus, IE 8 et 9 ne prennent tout simplement en charge aucune des nouvelles références de caractères nommées ajoutées dans HTML 5. L'auteur de ce dernier héberge également un test de prise en charge des références de caractères nommées sur http://mathias.html5.org/tests/html / références-de-caractères-nommés / . Dans IE 8, il signale plus de mille erreurs.

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

• Il a vraiment bien l'impression que faire les choses de cette façon est moins hacky.

encoder:

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

décoder:

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

Utilisation

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

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

Recherchez "Entités HTML JavaScript", et vous trouverez peut-être quelques bibliothèques à cet effet, mais elles seront probablement toutes construites autour de la logique ci-dessus - remplacer, entité par entité.

Je devais juste avoir un caractère d'entité HTML (⇓) comme valeur pour un bouton HTML. Le code HTML semble bon depuis le début dans le navigateur:

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

Maintenant, j'ajoutais une bascule qui devrait également afficher le caractère. C'est ma solution

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

Cela affiche à nouveau ⇓ dans le bouton. J'espère que cela pourrait aider quelqu'un.

Vous devez créer une 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;');
}

Supposons que vous ayez sous String.

Nos cabines de luxe sont chaleureuses, confortables & amp; confortable

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 à nouveau

marque.

c'est tout.

Pour les utilisateurs ExtJS, si vous avez déjà la chaîne codé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)

Étendez une classe String:

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

et utiliser comme méthode:

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

Essaye ça :

var htmlEntities = "<script>alert('hello');</script>";
var htmlDecode =$.parseHTML(htmlEntities)[0]['wholeText'];
console.log(htmlDecode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

parseHTML est une fonction dans la bibliothèque Jquery et elle renverra un tableau qui inclut quelques détails sur la chaîne donnée.

dans certains cas, la chaîne est grande, de sorte que la fonction séparera le contenu de nombreux index.

et pour obtenir toutes les données d'index, vous devez aller dans n'importe quel index, puis accéder à l'index appelé "wholeText".

J'ai choisi l'index 0 car il fonctionnera dans tous les cas (petite chaîne ou grande chaîne).

Voici encore un problème: la chaîne échappée ne semble pas lisible lorsqu'elle est affecté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 existe également une bibliothèque pour cela.

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

npm install he                 //using node.js

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

L'utilisation est la suivante ...

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

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

à votre santé.

Pour décoder des 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" />

Le moyen le plus simple consiste à définir un sélecteur de classe sur vos éléments et à utiliser le code suivant:

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

Rien de plus nécessaire!

J'ai eu ce problème et j'ai trouvé cette solution claire et cela fonctionne bien.

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

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