Unescape HTML entités en Javascript?

J'ai du code Javascript qui communique avec un backend XML-RPC. Le XML-RPC renvoie des chaînes de la forme:

<img src='myimage.jpg'>

Cependant, lorsque j'utilise le Javascript pour insérer les chaînes dans HTML, elles sont rendues littéralement. Je ne vois pas d'image, je vois littéralement la chaîne:

<img src='myimage.jpg'>

Je suppose que le HTML est échappé via le canal XML-RPC.

Comment puis-je échapper à la chaîne en Javascript? J'ai essayé les techniques de cette page, sans succès: http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

Quels sont les autres moyens de diagnostiquer le problème?

EDIT: Vous devriez utiliser l'API DOMParser comme le suggère Wladimir , j'ai édité ma réponse précédente car la fonction publiée a introduit une faille de sécurité.

L'extrait suivant est l'ancien code de la réponse avec une petite modification: l'utilisation de a textareaau lieu de a divréduit la vulnérabilité XSS, mais elle est toujours problématique dans IE9 et Firefox.

function htmlDecode(input){
  var e = document.createElement('textarea');
  e.innerHTML = input;
  // handle case of empty input
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

htmlDecode("<img src='myimage.jpg'>"); 
// returns "<img src='myimage.jpg'>"

Fondamentalement, je crée un élément DOM par programme, assigne le HTML encodé à son innerHTML et récupère le nodeValue à partir du nœud de texte créé lors de l'insertion innerHTML. Puisqu'il crée simplement un élément mais ne l'ajoute jamais, aucun code HTML de site n'est modifié.

Il fonctionnera sur plusieurs navigateurs (y compris les anciens navigateurs) et acceptera toutes les entités de caractères HTML .

EDIT: L'ancienne version de ce code ne fonctionnait pas sur IE avec des entrées vides, comme en témoigne ici jsFiddle (vue dans IE). La version ci-dessus fonctionne avec toutes les entrées.

MISE À JOUR: semble que cela ne fonctionne pas avec une grande chaîne, et cela introduit également une vulnérabilité de sécurité , voir les commentaires.

La plupart des réponses données ici ont un énorme inconvénient: si la chaîne que vous essayez de convertir n'est pas fiable, vous vous retrouverez avec une vulnérabilité de Cross-Site Scripting (XSS) . Pour la fonction dans la réponse acceptée, tenez compte de ce qui suit:

htmlDecode("<img src='dummy' onerror='alert(/xss/)'>");

La chaîne ici contient une balise HTML sans échappement, donc au lieu de décoder quoi que ce soit, la htmlDecodefonction exécutera en fait le code JavaScript spécifié dans la chaîne.

Cela peut être évité en utilisant DOMParser qui est pris en charge dans tous les navigateurs modernes :

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(  htmlDecode("<img src='myimage.jpg'>")  )    
// "<img src='myimage.jpg'>"

console.log(  htmlDecode("<img src='dummy' onerror='alert(/xss/)'>")  )  
// ""

Il est garanti que cette fonction n'exécute aucun code JavaScript comme effet secondaire. Toutes les balises HTML seront ignorées, seul le contenu textuel sera renvoyé.

Note de compatibilité : L'analyse HTML avec DOMParsernécessite au moins Chrome 30, Firefox 12, Opera 17, Internet Explorer 10, Safari 7.1 ou Microsoft Edge. Ainsi, tous les navigateurs sans support ont bien dépassé leur fin de vie et à partir de 2017, les seuls qui peuvent encore être vus dans la nature sont les anciennes versions d'Internet Explorer et de Safari (généralement, elles ne sont toujours pas assez nombreuses pour déranger).

Si vous utilisez jQuery:

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

Sinon, utilisez l'objet Encoder de Strictly Software , qui a une excellente htmlDecode()fonction.

L'astuce consiste à utiliser la puissance du navigateur pour décoder les caractères HTML spéciaux, mais pas à permettre au navigateur d'exécuter les résultats comme s'il s'agissait de véritables html ... Cette fonction utilise une expression régulière pour identifier et remplacer les caractères HTML encodés, un caractère à la fois.

function unescapeHtml(html) {
    var el = document.createElement('div');
    return html.replace(/\&[#0-9a-z]+;/gi, function (enc) {
        el.innerHTML = enc;
        return el.innerText
    });
}

La réponse de CMS fonctionne bien, à moins que le code HTML que vous voulez ne pas échapper soit très long, plus de 65 536 caractères. Parce que dans Chrome, le HTML interne est divisé en plusieurs nœuds enfants, chacun d'au plus 65536 de long, et vous devez les concaténer. Cette fonction fonctionne également pour les très longues chaînes:

function unencodeHtmlContent(escapedHtml) {
  var elem = document.createElement('div');
  elem.innerHTML = escapedHtml;
  var result = '';
  // Chrome splits innerHTML into many child nodes, each one at most 65536.
  // Whereas FF creates just one single huge child node.
  for (var i = 0; i < elem.childNodes.length; ++i) {
    result = result + elem.childNodes[i].nodeValue;
  }
  return result;
}

Voir cette réponse sur innerHTMLla longueur maximale pour plus d'informations: https://stackoverflow.com/a/27545633/694469

Pas une réponse directe à votre question, mais ne serait-il pas préférable que votre RPC renvoie une structure (que ce soit XML ou JSON ou autre) avec ces données d'image (URL dans votre exemple) à l'intérieur de cette structure?

Ensuite, vous pouvez simplement l'analyser dans votre javascript et créer le <img>javascript lui-même.

La structure que vous recevez de RPC pourrait ressembler à:

{"img" : ["myimage.jpg", "myimage2.jpg"]}

Je pense que c'est mieux ainsi, car l'injection d'un code provenant d'une source externe dans votre page ne semble pas très sécurisée. Créer une image de quelqu'un qui pirate votre script XML-RPC et y mettre quelque chose que vous ne voudriez pas (même du javascript ...)

La réponse de Chris est belle et élégante mais elle échoue si la valeur n'est pas définie . Une simple amélioration le rend solide:

function htmlDecode(value) {
   return (typeof value === 'undefined') ? '' : $('<div/>').html(value).text();
}

Vous êtes le bienvenu ... juste un messager ... tout le mérite revient à ourcodeworld.com, lien ci-dessous.

window.htmlentities = {
        /**
         * Converts a string to its html characters completely.
         *
         * @param {String} str String with unescaped HTML characters
         **/
        encode : function(str) {
            var buf = [];

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

            return buf.join('');
        },
        /**
         * Converts an html characterSet into its original character.
         *
         * @param {String} str htmlSet entities
         **/
        decode : function(str) {
            return str.replace(/&#(\d+);/g, function(match, dec) {
                return String.fromCharCode(dec);
            });
        }
    };

Crédit complet: https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript

C'est la solution la plus complète que j'ai essayée jusqu'à présent:

const STANDARD_HTML_ENTITIES = {
    nbsp: String.fromCharCode(160),
    amp: "&",
    quot: '"',
    lt: "<",
    gt: ">"
};

const replaceHtmlEntities = plainTextString => {
    return plainTextString
        .replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
        .replace(
            /&(nbsp|amp|quot|lt|gt);/g,
            (a, b) => STANDARD_HTML_ENTITIES[b]
        );
};

J'étais assez fou pour passer en revue et faire cette fonction qui devrait être jolie, sinon complètement, exhaustive:

function removeEncoding(string) {
    return string.replace(/&Agrave;/g, "À").replace(/&Aacute;/g, "Á").replace(/&Acirc;/g, "Â").replace(/&Atilde;/g, "Ã").replace(/&Auml;/g, "Ä").replace(/&Aring;/g, "Å").replace(/&agrave;/g, "à").replace(/&acirc;/g, "â").replace(/&atilde;/g, "ã").replace(/&auml;/g, "ä").replace(/&aring;/g, "å").replace(/&AElig;/g, "Æ").replace(/&aelig;/g, "æ").replace(/&szlig;/g, "ß").replace(/&Ccedil;/g, "Ç").replace(/&ccedil;/g, "ç").replace(/&Egrave;/g, "È").replace(/&Eacute;/g, "É").replace(/&Ecirc;/g, "Ê").replace(/&Euml;/g, "Ë").replace(/&egrave;/g, "è").replace(/&eacute;/g, "é").replace(/&ecirc;/g, "ê").replace(/&euml;/g, "ë").replace(/&#131;/g, "ƒ").replace(/&Igrave;/g, "Ì").replace(/&Iacute;/g, "Í").replace(/&Icirc;/g, "Î").replace(/&Iuml;/g, "Ï").replace(/&igrave;/g, "ì").replace(/&iacute;/g, "í").replace(/&icirc;/g, "î").replace(/&iuml;/g, "ï").replace(/&Ntilde;/g, "Ñ").replace(/&ntilde;/g, "ñ").replace(/&Ograve;/g, "Ò").replace(/&Oacute;/g, "Ó").replace(/&Ocirc;/g, "Ô").replace(/&Otilde;/g, "Õ").replace(/&Ouml;/g, "Ö").replace(/&ograve;/g, "ò").replace(/&oacute;/g, "ó").replace(/&ocirc;/g, "ô").replace(/&otilde;/g, "õ").replace(/&ouml;/g, "ö").replace(/&Oslash;/g, "Ø").replace(/&oslash;/g, "ø").replace(/&#140;/g, "Œ").replace(/&#156;/g, "œ").replace(/&#138;/g, "Š").replace(/&#154;/g, "š").replace(/&Ugrave;/g, "Ù").replace(/&Uacute;/g, "Ú").replace(/&Ucirc;/g, "Û").replace(/&Uuml;/g, "Ü").replace(/&ugrave;/g, "ù").replace(/&uacute;/g, "ú").replace(/&ucirc;/g, "û").replace(/&uuml;/g, "ü").replace(/&#181;/g, "µ").replace(/&#215;/g, "×").replace(/&Yacute;/g, "Ý").replace(/&#159;/g, "Ÿ").replace(/&yacute;/g, "ý").replace(/&yuml;/g, "ÿ").replace(/&#176;/g, "°").replace(/&#134;/g, "†").replace(/&#135;/g, "‡").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#177;/g, "±").replace(/&#171;/g, "«").replace(/&#187;/g, "»").replace(/&#191;/g, "¿").replace(/&#161;/g, "¡").replace(/&#183;/g, "·").replace(/&#149;/g, "•").replace(/&#153;/g, "™").replace(/&copy;/g, "©").replace(/&reg;/g, "®").replace(/&#167;/g, "§").replace(/&#182;/g, "¶").replace(/&Alpha;/g, "Α").replace(/&Beta;/g, "Β").replace(/&Gamma;/g, "Γ").replace(/&Delta;/g, "Δ").replace(/&Epsilon;/g, "Ε").replace(/&Zeta;/g, "Ζ").replace(/&Eta;/g, "Η").replace(/&Theta;/g, "Θ").replace(/&Iota;/g, "Ι").replace(/&Kappa;/g, "Κ").replace(/&Lambda;/g, "Λ").replace(/&Mu;/g, "Μ").replace(/&Nu;/g, "Ν").replace(/&Xi;/g, "Ξ").replace(/&Omicron;/g, "Ο").replace(/&Pi;/g, "Π").replace(/&Rho;/g, "Ρ").replace(/&Sigma;/g, "Σ").replace(/&Tau;/g, "Τ").replace(/&Upsilon;/g, "Υ").replace(/&Phi;/g, "Φ").replace(/&Chi;/g, "Χ").replace(/&Psi;/g, "Ψ").replace(/&Omega;/g, "Ω").replace(/&alpha;/g, "α").replace(/&beta;/g, "β").replace(/&gamma;/g, "γ").replace(/&delta;/g, "δ").replace(/&epsilon;/g, "ε").replace(/&zeta;/g, "ζ").replace(/&eta;/g, "η").replace(/&theta;/g, "θ").replace(/&iota;/g, "ι").replace(/&kappa;/g, "κ").replace(/&lambda;/g, "λ").replace(/&mu;/g, "μ").replace(/&nu;/g, "ν").replace(/&xi;/g, "ξ").replace(/&omicron;/g, "ο").replace(/&piρ;/g, "ρ").replace(/&rho;/g, "ς").replace(/&sigmaf;/g, "ς").replace(/&sigma;/g, "σ").replace(/&tau;/g, "τ").replace(/&phi;/g, "φ").replace(/&chi;/g, "χ").replace(/&psi;/g, "ψ").replace(/&omega;/g, "ω").replace(/&bull;/g, "•").replace(/&hellip;/g, "…").replace(/&prime;/g, "′").replace(/&Prime;/g, "″").replace(/&oline;/g, "‾").replace(/&frasl;/g, "⁄").replace(/&weierp;/g, "℘").replace(/&image;/g, "ℑ").replace(/&real;/g, "ℜ").replace(/&trade;/g, "™").replace(/&alefsym;/g, "ℵ").replace(/&larr;/g, "←").replace(/&uarr;/g, "↑").replace(/&rarr;/g, "→").replace(/&darr;/g, "↓").replace(/&barr;/g, "↔").replace(/&crarr;/g, "↵").replace(/&lArr;/g, "⇐").replace(/&uArr;/g, "⇑").replace(/&rArr;/g, "⇒").replace(/&dArr;/g, "⇓").replace(/&hArr;/g, "⇔").replace(/&forall;/g, "∀").replace(/&part;/g, "∂").replace(/&exist;/g, "∃").replace(/&empty;/g, "∅").replace(/&nabla;/g, "∇").replace(/&isin;/g, "∈").replace(/&notin;/g, "∉").replace(/&ni;/g, "∋").replace(/&prod;/g, "∏").replace(/&sum;/g, "∑").replace(/&minus;/g, "−").replace(/&lowast;/g, "∗").replace(/&radic;/g, "√").replace(/&prop;/g, "∝").replace(/&infin;/g, "∞").replace(/&OEig;/g, "Œ").replace(/&oelig;/g, "œ").replace(/&Yuml;/g, "Ÿ").replace(/&spades;/g, "♠").replace(/&clubs;/g, "♣").replace(/&hearts;/g, "♥").replace(/&diams;/g, "♦").replace(/&thetasym;/g, "ϑ").replace(/&upsih;/g, "ϒ").replace(/&piv;/g, "ϖ").replace(/&Scaron;/g, "Š").replace(/&scaron;/g, "š").replace(/&ang;/g, "∠").replace(/&and;/g, "∧").replace(/&or;/g, "∨").replace(/&cap;/g, "∩").replace(/&cup;/g, "∪").replace(/&int;/g, "∫").replace(/&there4;/g, "∴").replace(/&sim;/g, "∼").replace(/&cong;/g, "≅").replace(/&asymp;/g, "≈").replace(/&ne;/g, "≠").replace(/&equiv;/g, "≡").replace(/&le;/g, "≤").replace(/&ge;/g, "≥").replace(/&sub;/g, "⊂").replace(/&sup;/g, "⊃").replace(/&nsub;/g, "⊄").replace(/&sube;/g, "⊆").replace(/&supe;/g, "⊇").replace(/&oplus;/g, "⊕").replace(/&otimes;/g, "⊗").replace(/&perp;/g, "⊥").replace(/&sdot;/g, "⋅").replace(/&lcell;/g, "⌈").replace(/&rcell;/g, "⌉").replace(/&lfloor;/g, "⌊").replace(/&rfloor;/g, "⌋").replace(/&lang;/g, "⟨").replace(/&rang;/g, "⟩").replace(/&loz;/g, "◊").replace(/&#039;/g, "'").replace(/&amp;/g, "&").replace(/&quot;/g, "\"");
}

Utilisé comme ça:

let decodedText = removeEncoding("Ich heiße David");
console.log(decodedText);

Impressions: Ich Heiße David

PS cela a pris environ une heure et demie à faire.

Pour échapper aux entités HTML * en JavaScript, vous pouvez utiliser la petite bibliothèque html-escaper :npm install html-escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

Ou unescapefonction de Lodash ou Underscore , si vous l'utilisez.

*) S'il vous plaît noter que ces fonctions ne couvrent pas toutes les entités HTML, mais seulement, à savoir les plus communs &, <, >, ', ". Pour Unescape toutes les entités HTML , vous pouvez utiliser il bibliothèque.

J'utilise ceci dans mon projet: inspiré par d' autres réponses mais avec un paramètre supplémentaire sécurisé, peut être utile lorsque vous traitez avec des personnages décorés

var decodeEntities=(function(){

    var el=document.createElement('div');
    return function(str, safeEscape){

        if(str && typeof str === 'string'){

            str=str.replace(/\</g, '&lt;');

            el.innerHTML=str;
            if(el.innerText){

                str=el.innerText;
                el.innerText='';
            }
            else if(el.textContent){

                str=el.textContent;
                el.textContent='';
            }

            if(safeEscape)
                str=str.replace(/\</g, '&lt;');
        }
        return str;
    }
})();

Et c'est utilisable comme:

var label='safe <b> character &eacute;ntity</b>';
var safehtml='<div title="'+decodeEntities(label)+'">'+decodeEntities(label, true)+'</div>';

Toutes les autres réponses ici ont des problèmes.

Les méthodes document.createElement ('div') (y compris celles utilisant jQuery) exécutent tout javascript qui y est passé (un problème de sécurité) et la méthode DOMParser.parseFromString () supprime les espaces. Voici une solution javascript pure qui n'a aucun problème:

function htmlDecode(html) {
    var textarea = document.createElement("textarea");
    html= html.replace(/\r/g, String.fromCharCode(0xe000)); // Replace "\r" with reserved unicode character.
    textarea.innerHTML = html;
    var result = textarea.value;
    return result.replace(new RegExp(String.fromCharCode(0xe000), 'g'), '\r');
}

TextArea est utilisé spécifiquement pour éviter d'exécuter le code js. Il passe ceux-ci:

htmlDecode('&lt;&amp;&nbsp;&gt;'); // returns "<& >" with non-breaking space.
htmlDecode('  '); // returns "  "
htmlDecode('<img src="dummy" onerror="alert(\'xss\')">'); // Does not execute alert()
htmlDecode('\r\n') // returns "\r\n", doesn't lose the \r like other solutions.

var encodedStr = 'hello & world';

var parser = new DOMParser;
var dom = parser.parseFromString(
    '<!doctype html><body>' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;

console.log(decodedString);

Il existe une variante 80% aussi productive que les réponses tout en haut.

Voir le benchmark: https://jsperf.com/decode-html12345678/1

console.log(decodeEntities('test: &gt'));

function decodeEntities(str) {
  // this prevents any overhead from creating the object each time
  const el = decodeEntities.element || document.createElement('textarea')

  // strip script/html tags
  el.innerHTML = str
    .replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
    .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');

  return el.value;
}

Si vous devez laisser des balises, supprimez les deux .replace(...)appels (vous pouvez laisser le premier si vous n'avez pas besoin de scripts).