Unescape HTML encje w Javascript?

Mam kod JavaScript, który komunikuje się z zapleczem XML-RPC. XML-RPC zwraca ciągi w postaci:

<img src='myimage.jpg'>

Jednak kiedy używam JavaScript do wstawiania ciągów do HTML, renderują się one dosłownie. Nie widzę obrazu, dosłownie widzę ciąg:

<img src='myimage.jpg'>

Domyślam się, że kod HTML jest usuwany przez kanał XML-RPC.

Jak mogę usunąć ciąg znaków w Javascript? Wypróbowałem techniki na tej stronie, bezskutecznie: http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

Jakie są inne sposoby zdiagnozowania problemu?

EDYCJA: Powinieneś używać DOMParser API, jak sugeruje Wladimir. Edytowałem moją poprzednią odpowiedź, ponieważ opublikowana funkcja wprowadziła lukę w zabezpieczeniach.

Poniższy fragment to kod starej odpowiedzi z niewielką modyfikacją: użycie a textareazamiast a divzmniejsza podatność na XSS, ale nadal jest problematyczne w IE9 i 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'>"

Zasadniczo tworzę programowo element DOM, przypisuję zakodowany kod HTML do jego innerHTML i pobieram wartość nodeValue z węzła tekstowego utworzonego przy wstawieniu innerHTML. Ponieważ po prostu tworzy element, ale nigdy go nie dodaje, żaden kod HTML witryny nie jest modyfikowany.

Będzie działać na różnych przeglądarkach (w tym starszych przeglądarkach) i akceptować wszystkie jednostki znaków HTML .

EDYCJA: Stara wersja tego kodu nie działała w IE z pustymi danymi wejściowymi, jak pokazano tutaj na jsFiddle (widok w IE). Powyższa wersja działa ze wszystkimi wejściami.

AKTUALIZACJA: wygląda na to, że nie działa to z dużym ciągiem znaków, a także wprowadza lukę w zabezpieczeniach , patrz komentarze.

Większość udzielonych tutaj odpowiedzi ma ogromną wadę: jeśli ciąg, który próbujesz przekonwertować, nie jest zaufany, otrzymasz lukę w zabezpieczeniach Cross-Site Scripting (XSS) . W przypadku funkcji w zaakceptowanej odpowiedzi rozważ następujące kwestie:

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

Łańcuch zawiera tutaj znacznik HTML bez zmiany znaczenia, więc zamiast dekodowania czegokolwiek htmlDecodefunkcja w rzeczywistości uruchomi kod JavaScript określony w ciągu.

Można tego uniknąć, używając DOMParser, który jest obsługiwany we wszystkich nowoczesnych przeglądarkach :

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/)'>")  )  
// ""

Ta funkcja gwarantuje, że jako efekt uboczny nie uruchomi się żadnego kodu JavaScript. Wszelkie tagi HTML zostaną zignorowane, zwrócona zostanie tylko treść tekstowa.

Uwaga dotycząca zgodności : parsowanie HTML z DOMParserwymaga co najmniej Chrome 30, Firefox 12, Opera 17, Internet Explorer 10, Safari 7.1 lub Microsoft Edge. Tak więc wszystkie przeglądarki bez wsparcia są daleko poza ich EOL, a od 2017 roku jedynymi, które wciąż można zobaczyć na wolności, są starsze wersje Internet Explorera i Safari (zwykle nie są one wystarczająco liczne, aby przeszkadzać).

Jeśli używasz jQuery:

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

W przeciwnym razie użyj obiektu enkodera Strictly Software , który ma doskonałą htmlDecode()funkcję.

Sztuczka polega na wykorzystaniu mocy przeglądarki do dekodowania specjalnych znaków HTML, ale nie pozwala przeglądarce na wykonanie wyników tak, jakby to był rzeczywisty html ... Ta funkcja używa wyrażenia regularnego do identyfikacji i zamiany zakodowanych znaków HTML, jeden znak na czas.

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

Odpowiedź CMS działa dobrze, chyba że kod HTML, który chcesz usunąć, jest bardzo długi, dłuższy niż 65536 znaków. Ponieważ wtedy w Chrome wewnętrzny kod HTML zostaje podzielony na wiele węzłów podrzędnych, z których każdy ma maksymalnie 65536 długości i trzeba je połączyć. Ta funkcja działa również dla bardzo długich ciągów:

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

Zobacz tę odpowiedź na temat innerHTMLmaksymalnej długości, aby uzyskać więcej informacji: https://stackoverflow.com/a/27545633/694469

Nie jest to bezpośrednia odpowiedź na twoje pytanie, ale czy nie byłoby lepiej, gdyby RPC zwrócił jakąś strukturę (czy to XML, JSON czy cokolwiek innego) z tymi danymi obrazu (adresy URL w twoim przykładzie) wewnątrz tej struktury?

Następnie możesz po prostu przeanalizować go w swoim javascript i zbudować za <img>pomocą samego javascript.

Struktura otrzymana od RPC może wyglądać następująco:

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

Myślę, że tak jest lepiej, ponieważ wstrzyknięcie kodu pochodzącego z zewnętrznego źródła na twoją stronę nie wygląda na zbyt bezpieczne. Wyobrażanie sobie kogoś, kto porywa twój skrypt XML-RPC i umieszcza w nim coś, czego nie chcesz (nawet javascript ...)

Odpowiedź Chrisa jest ładna i elegancka, ale zawodzi, jeśli wartość jest nieokreślona . Wystarczy prosta poprawa, aby było solidne:

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

Nie ma za co ... po prostu posłaniec ... pełne uznanie trafia do ourcodeworld.com, link poniżej.

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

Pełny kredyt: https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript

To najbardziej kompleksowe rozwiązanie, jakie do tej pory wypróbowałem:

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

Byłem na tyle szalony, aby przejść przez tę funkcję, która powinna być ładna, jeśli nie całkowicie, wyczerpująca:

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, "\"");
}

Używane tak:

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

Wydruki: Ich Heiße David

PS to zajęło półtorej godziny.

Aby usunąć elementy HTML * w JavaScript, możesz użyć małej biblioteki html-escaper :npm install html-escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

Lub działajunescape z Lodash lub Underscore , jeśli go używasz.

*) Należy pamiętać, że funkcje te nie obejmują wszystkie podmioty HTML, ale tylko najbardziej popularne, czyli &, <, >, ', ". O przywróceniu znaczenia wszystkie podmioty HTML można użyć he bibliotekę.

Używam tego w moim projekcie: zainspirowany innymi odpowiedziami, ale z dodatkowym bezpiecznym parametrem, może być przydatny, gdy masz do czynienia z dekorowanymi postaciami

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

I to jest użyteczne jak:

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

Wszystkie inne odpowiedzi tutaj mają problemy.

Metody document.createElement ('div') (w tym te używające jQuery) wykonują każdy przekazany do nich kod javascript (kwestia bezpieczeństwa), a metoda DOMParser.parseFromString () przycina białe znaki. Oto czyste rozwiązanie javascript, które nie ma żadnego problemu:

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 jest używana specjalnie w celu uniknięcia wykonywania kodu js. Przechodzi te:

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

Istnieje wariant, który w 80% jest tak produktywny, jak odpowiedzi na samej górze.

Zobacz test porównawczy: 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;
}

Jeśli chcesz zostawić tagi, usuń dwa .replace(...)wywołania (możesz zostawić pierwsze, jeśli nie potrzebujesz skryptów).