javascript - remove - ¿Cómo decodificar entidades HTML utilizando jQuery?

removeattribute jquery

Question

¿Cómo uso jQuery para decodificar entidades HTML en una cadena?

Answer 1

Nota de seguridad: el uso de esta respuesta (conservada en su forma original a continuación) puede introducir una vulnerabilidad XSS en su aplicación. No debes usar esta respuesta. Lea la respuesta de lucascaro para obtener una explicación de las vulnerabilidades en esta respuesta, y use el enfoque de esa respuesta o de la respuesta de Mark Amery .

En realidad, prueba

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

Answer 2

Alternativamente, también hay una biblioteca para ello.

Aquí, https://cdnjs.com/libraries/he

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

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

El uso es el siguiente ...

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

aclamaciones.

Answer 3

Aquí todavía hay un problema: la cadena escapada no parece legible cuando se asigna al valor de entrada

npm install he                 //using node.js

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

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

Answer 4

Como dijo Mike Samuel, no uses jQuery.html (). Text () para decodificar entidades html porque no es seguro.

En su lugar, use un procesador de plantillas como Mustache.js o decodeEntities del comentario de @VyvIT.

Underscore.js utility-belt library viene con métodos de unescape y unescape , pero no son seguros para la entrada del usuario:

_.escape(string)

_.unescape(string)

Answer 5

Creo que eso es exactamente lo contrario de la solución elegida.

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

Answer 6

Creo que estás confundiendo el texto y los métodos HTML. Mire este ejemplo, si usa el HTML interno de un elemento como texto, obtendrá etiquetas HTML descodificadas (segundo botón). Pero si los usa como HTML, obtendrá la vista con formato HTML (primer botón).

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

El primer botón escribe: aquí hay un contenido HTML .

El segundo botón escribe: aquí hay un contenido de <B> HTML </B>.

Por cierto, puedes ver un complemento que encontré en el complemento jQuery: descodificación y codificación HTML que codifica y descodifica cadenas HTML.

Answer 7

Extiende una clase de String:

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

y uso como método:

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

Answer 8

La forma más sencilla es establecer un selector de clase para sus elementos y luego usar el siguiente código:

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

¡Nada más necesario!

Tuve este problema y encontré esta solución clara y funciona bien.

Answer 9

La pregunta está limitada por ''con jQuery'' pero podría ayudar a algunos saber que el código de jQuery que figura en la mejor respuesta aquí hace lo siguiente: esto funciona con o sin jQuery:

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

Answer 10

Para decodificar las Entidades HTML con jQuery, solo use esta función:

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

Cómo utilizar:

Javascript:

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

HTML:

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

Answer 11

Para usuarios de ExtJS, si ya tiene la cadena codificada, por ejemplo, cuando el valor devuelto de una función de biblioteca es el contenido internoHTML, considere esta función de ExtJS:

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

Answer 12

Puede usar la biblioteca he , disponible en https://github.com/mathiasbynens/he

Ejemplo:

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

Desafié al autor de la biblioteca sobre la cuestión de si había alguna razón para usar esta biblioteca en el código del lado del cliente a favor del hack <textarea> proporciona en otras respuestas aquí y en otros lugares. Proporcionó algunas justificaciones posibles:

• Si está utilizando node.js serverside, el uso de una biblioteca para la codificación / decodificación HTML le ofrece una solución única que funciona tanto en el lado del cliente como en el lado del servidor.

• Los algoritmos de descodificación de entidades de algunos navegadores tienen errores o faltan soporte para algunas referencias de caracteres con nombre . Por ejemplo, Internet Explorer decodificará y generará espacios no fragmentados (   ) correctamente, pero los informará como espacios ordinarios en lugar de espacios no fragmentados a través de la propiedad innerText un elemento DOM, rompiendo el hack <textarea> (aunque solo sea en una pequeña camino). Además, IE 8 y 9 simplemente no admiten ninguna de las nuevas referencias de caracteres con nombre agregadas en HTML 5. El autor de él también presenta una prueba de compatibilidad de referencias de caracteres con nombre en http://mathias.html5.org/tests/html/named-character-references/ . En IE 8, reporta más de mil errores.

  Si desea estar aislado de los errores del navegador relacionados con la decodificación de entidades y / o poder manejar la gama completa de referencias de caracteres nombrados, no puede salirse con la piratería <textarea> ; necesitarás una biblioteca como él .

• Él simplemente siente que hacer las cosas de esta manera es menos intrépido.

Answer 13

Sin ninguna jQuery:

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

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

Esto funciona de manera similar a la respuesta aceptada , pero es seguro de usar con entradas de usuarios no confiables.

Problemas de seguridad en enfoques similares

Como señaló Mike Samuel , hacer esto con una <div> lugar de una <textarea> con una entrada de usuario no confiable es una vulnerabilidad de XSS, incluso si <div> nunca se agrega al 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)">'')

Sin embargo, este ataque no es posible contra un <textarea> porque no hay elementos HTML que estén permitidos para el contenido de un <textarea> . En consecuencia, cualquier etiqueta HTML que aún esté presente en la cadena ''codificada'' será automáticamente codificada por la entidad por el navegador.

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

Advertencia : Hacer esto utilizando los métodos .html() y .val() jQuery''s en lugar de usar .innerHTML y .value también es inseguro * para algunas versiones de jQuery, incluso cuando se usa un área de textarea . Esto se debe a que las versiones anteriores de jQuery evaluarían de manera deliberada y explícita los scripts contenidos en la cadena pasada a .html() . Por lo tanto, un código como este muestra una alerta en jQuery 1.8:

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

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

_{* Gracias a Eru Penkman por atrapar esta vulnerabilidad.}

Answer 14

Solo tenía que tener una entidad HTML (⇓) como valor para un botón HTML. El código HTML se ve bien desde el principio en el navegador:

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

Ahora estaba agregando un interruptor que también debería mostrar el personaje. Esta es mi solucion

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

Esto muestra ⇓ de nuevo en el botón. Espero que esto pueda ayudar a alguien.

Answer 15

Supongamos que tienes debajo de String.

Nuestras cabañas Deluxe son cálidas, acogedoras y amp; cómodo

Ext.util.Format.htmlDecode(innerHtmlContent)

Str y asignar de nuevo a

etiqueta.

Eso es.

Answer 16

Tienes que hacer una función personalizada para las entidades html:

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

Answer 17

Utilizar

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

Es más fácil hacerlo en el lado del servidor porque, aparentemente, JavaScript no tiene una biblioteca nativa para manejar entidades, ni encontré ninguno cerca de la parte superior de los resultados de búsqueda para los distintos marcos que extienden JavaScript.

Busque "entidades HTML de JavaScript" y puede encontrar algunas bibliotecas solo para ese propósito, pero probablemente todas se basarán en la lógica anterior: reemplazar, entidad por entidad.

Answer 18

codificar:

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

descodificar:

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