online - Unescape entidades HTML en Javascript?

unescape ampersand javascript

Question

Tengo un código Javascript que se comunica con un back-end XML-RPC. El XML-RPC devuelve cadenas del formulario:

<img src=''myimage.jpg''>

Sin embargo, cuando uso Javascript para insertar las cadenas en HTML, se representan literalmente. No veo una imagen, literalmente veo la cadena:

<img src=''myimage.jpg''>

Creo que el HTML se está escapando en el canal XML-RPC.

¿Cómo puedo deshacer la cadena en Javascript? Probé las técnicas en esta página, sin éxito: http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

¿Cuáles son otras formas de diagnosticar el problema?

Answer 1

El truco es usar la potencia del navegador para decodificar los caracteres HTML especiales, pero no permitir que el navegador ejecute los resultados como si fuera html real ... Esta función usa una expresión regular para identificar y reemplazar caracteres HTML codificados, un carácter a la vez

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

Answer 2

Este es un mejor:

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

utilizar:

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

from: HTML Entity Decode

Answer 3

La mayoría de las respuestas dadas aquí tienen una gran desventaja: si la cadena que está tratando de convertir no es de confianza, terminará con una vulnerabilidad de CrossSit Scripting (XSS) . Para la función en la respuesta aceptada , considere lo siguiente:

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

La cadena aquí contiene una etiqueta HTML sin htmlDecode , por lo que en lugar de decodificar nada, la función htmlDecode realmente ejecutará el código JavaScript especificado dentro de la cadena.

Esto se puede evitar utilizando DOMParser que es compatible con todos los navegadores modernos :

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

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

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

Se garantiza que esta función no ejecutará ningún código JavaScript como efecto secundario. Se ignorarán todas las etiquetas HTML, solo se devolverá el contenido de texto.

Nota de compatibilidad : DOMParser HTML con DOMParser requiere al menos Chrome 30, Firefox 12, Opera 17, Internet Explorer 10, Safari 7.1 o Microsoft Edge. Por lo tanto, todos los navegadores sin soporte han superado su EOL y, a partir de 2017, los únicos que todavía se pueden ver en la naturaleza son ocasionalmente versiones anteriores de Internet Explorer y Safari (por lo general, estas aún no son lo suficientemente numerosas para molestar).

Answer 4

La respuesta de CMS funciona bien, a menos que el HTML que desee desmontar sea muy largo, más largo que 65536 caracteres. Porque entonces, en Chrome, el HTML interno se divide en muchos nodos secundarios, cada uno a lo sumo 65536 de largo, y necesita concatenarlos. Esta función también funciona para cadenas muy largas:

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

Consulte esta respuesta sobre innerHTML max length para obtener más información: https://.com/a/27545633/694469

Answer 5

La respuesta de Chris es agradable y elegante, pero falla si el valor no está definido . La simple mejora lo hace sólido:

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

Answer 6

Lo uso en mi proyecto: inspirado en otras respuestas pero con un parámetro adicional seguro, puede ser útil cuando se trata de personajes decorados

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

Y es utilizable como:

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

Answer 7

No es una respuesta directa a su pregunta, pero ¿no sería mejor para su RPC devolver alguna estructura (ya sea XML o JSON o lo que sea) con esos datos de imagen (urls en su ejemplo) dentro de esa estructura?

Entonces podrías analizarlo en tu javascript y compilar el <img> usando javascript.

La estructura que reciba de RPC podría verse así:

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

Creo que es mejor de esta manera, ya que inyectar un código que proviene de una fuente externa en su página no parece muy seguro. Imagine que alguien secuestra su secuencia de comandos XML-RPC y coloca algo que no le gustaría tener allí (incluso algunos javascript ...)

Answer 8

Si estás usando jQuery:

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

De lo contrario, utilice el Objeto Encoder de Strictly Software , que tiene una excelente función htmlDecode() .

Answer 9

Todas las otras respuestas aquí tienen problemas.

Los métodos document.createElement (''div'') (incluidos los que utilizan jQuery) ejecutan cualquier javascript pasado (un problema de seguridad) y el método DOMParser.parseFromString () recorta el espacio en blanco. Aquí hay una solución pura de javascript que no tiene ningún problema:

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 se usa específicamente para evitar el código js de ejecución. Pasa estos:

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.

Answer 10

Yo uso el siguiente método:

function htmlDecode(input){
  var e = document.createElement(''div'');
  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''>"

Básicamente, creo un elemento DOM mediante programación, asigno el HTML codificado a su innerHTML y recupero nodeValue del nodo de texto creado en la inserción innerHTML. Como solo crea un elemento pero nunca lo agrega, no se modifica el sitio HTML.

Funcionará en todos los navegadores (incluidos los navegadores antiguos) y aceptará todas las entidades de caracteres HTML .

EDITAR: La versión anterior de este código no funcionaba en IE con entradas en blanco, como se evidencia aquí en jsFiddle (ver en IE). La versión anterior funciona con todas las entradas.

ACTUALIZACIÓN: parece que esto no funciona con cadenas grandes, y también presenta una vulnerabilidad de seguridad , ver comentarios.