javascript - example - jquery innertext

Decodificación de la entidad HTML (18)

Aquí hay otra versión:

function convertHTMLEntity(text){ const span = document.createElement(''span''); return text .replace(/&[#A-Za-z0-9]+;/gi, (entity,position,text)=> { span.innerHTML = entity; return span.innerText; }); } console.log(convertHTMLEntity(''Large < £ 500''));

Esta pregunta ya tiene una respuesta aquí:

¿Desea escapar las entidades HTML en Javascript? 10 respuestas

¿Cómo puedo codificar y decodificar entidades HTML utilizando JavaScript o JQuery?

var varTitle = "Chris' corner";

Quiero que sea

var varTitle = "Chris'' corner";

Aquí hay un método rápido que no requiere la creación de un div, y decodifica los caracteres escapados HTML "más comunes":

function decodeHTMLEntities(text) { var entities = [ [''amp'', ''&''], [''apos'', ''/'''], [''#x27'', ''/'''], [''#x2F'', ''/''], [''#39'', ''/'''], [''#47'', ''/''], [''lt'', ''<''], [''gt'', ''>''], [''nbsp'', '' ''], [''quot'', ''"''] ]; for (var i = 0, max = entities.length; i < max; ++i) text = text.replace(new RegExp(''&''+entities[i][0]+'';'', ''g''), entities[i][1]); return text; }

Aquí hay una versión completa.

Uso

htmldecode("∑ >€");

Como @Robert K y @mattcasey tienen un buen código, pensé que contribuiría aquí con una versión de CoffeeScript, en caso de que alguien en el futuro pudiera usarlo:

String::unescape = (strict = false) -> ### # Take escaped text, and return the unescaped version # # @param string str | String to be used # @param bool strict | Stict mode will remove all HTML # # Test it here: # https://jsfiddle.net/tigerhawkvok/t9pn1dn5/ # # Code: https://gist.github.com/tigerhawkvok/285b8631ed6ebef4446d ### # Create a dummy element element = document.createElement("div") decodeHTMLEntities = (str) -> if str? and typeof str is "string" unless strict is true # escape HTML tags str = escape(str).replace(/%26/g,''&'').replace(/%23/g,''#'').replace(/%3B/g,'';'') else str = str.replace(/<script[^>]*>([/S/s]*?)<//script>/gmi, '''') str = str.replace(/<//?/w(?:[^"''>]|"[^"]*"|''[^'']*'')*>/gmi, '''') element.innerHTML = str if element.innerText # Do we support innerText? str = element.innerText element.innerText = "" else # Firefox str = element.textContent element.textContent = "" unescape(str) # Remove encoded or double-encoded tags fixHtmlEncodings = (string) -> string = string.replace(//&#/mg, ''&#'') # The rest, for double-encodings string = string.replace(//"/mg, ''"'') string = string.replace(//&quote;/mg, ''"'') string = string.replace(//_/mg, ''_'') string = string.replace(//'/mg, "''") string = string.replace(//"/mg, ''"'') string = string.replace(//>/mg, ''>'') string = string.replace(//</mg, ''<'') string # Run it tmp = fixHtmlEncodings(this) decodeHTMLEntities(tmp)

Ver https://jsfiddle.net/tigerhawkvok/t9pn1dn5/7/ o https://gist.github.com/tigerhawkvok/285b8631ed6ebef4446d (incluye JS compilado y probablemente se actualice en comparación con esta respuesta)

Como dijo Robert K, no use jQuery.html (). Text () para decodificar entidades html porque no es seguro porque las entradas del usuario nunca deben tener acceso al DOM. Lea acerca de XSS por qué esto no es seguro.

En su lugar, intente la biblioteca de Underscore.js utilidad Underscore.js que viene con los métodos de unescape y unescape :

escape

Escapa de una cadena para insertarla en HTML, reemplazando los caracteres & , < , > , " , ` y '' .

_.escape(''Curly, Larry & Moe''); => "Curly, Larry & Moe"

unescape

Lo contrario de escape, reemplaza & , < , > , " , ` y ' Con sus homólogos sin escaparse.

_.unescape(''Curly, Larry & Moe''); => "Curly, Larry & Moe"

Para admitir la decodificación de más caracteres, simplemente copie el método de subrayado unescape y agregue más caracteres al mapa.

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

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

Intentalo :)

Esta es mi forma favorita de decodificar caracteres HTML. La ventaja de usar este código es que las etiquetas también se conservan.

function decodeHtml(html) { var txt = document.createElement("textarea"); txt.innerHTML = html; return txt.value; }

Ejemplo: http://jsfiddle.net/k65s3/

Entrada:

Entity: Bad attempt at XSS:<script>alert(''new/nline?'')</script><br>

Salida:

Entity: Bad attempt at XSS:<script>alert(''new/nline?'')</script><br>

Inspirada en la solución de Robert K., esta versión no elimina las etiquetas HTML y es igual de segura.

Inspirado por la solución de Robert K, elimina las etiquetas html y evita la ejecución de scripts y manejadores de eventos como: <img src=fake onerror="prompt(1)"> Probado en el último Chrome, FF, IE (debería funcionar desde IE9, pero no ha probado) ).

Simplemente llame:

decodeEntities(''<img src=fake onerror="prompt(1)">''); decodeEntities("<script>alert(''aaa!'')</script>");

Inyectar HTML no confiable en la página es peligroso como se explica en ¿Cómo decodificar entidades HTML usando jQuery? .

Una alternativa es usar una implementación solo para JavaScript del código html_entity_decode de PHP (de http://phpjs.org/functions/html_entity_decode:424 ). El ejemplo sería entonces algo como:

var varTitle = html_entity_decode("Chris' corner");

Para agregar otro "inspirado por Robert K" a la lista, aquí hay otra versión segura que no elimina las etiquetas HTML . En lugar de ejecutar toda la cadena a través del analizador HTML, extrae solo las entidades y las convierte.

var decodeEntities = (function() { // this prevents any overhead from creating the object each time var element = document.createElement(''div''); // regular expression matching HTML entities var entity = /&(?:#x[a-f0-9]+|#[0-9]+|[a-z0-9]+);?/ig; return function decodeHTMLEntities(str) { // find and replace all the html entities str = str.replace(entity, function(m) { element.innerHTML = m; return element.textContent; }); // reset the value element.textContent = ''''; return str; } })();

Para hacerlo en javascript puro sin jquery o predefiniendo todo, puede realizar un ciclo de la cadena html codificada a través de los elementos inner HTML y innerText (/ textContent) para cada paso de decodificación que se requiera:

<html> <head> <title>For every decode step, cycle through innerHTML and innerText </title> <script> function decode(str) { var d = document.createElement("div"); d.innerHTML = str; return typeof d.innerText !== ''undefined'' ? d.innerText : d.textContent; } </script> </head> <body> <script> var encodedString = "<p>name</p><p><span style=/"font-size:xx-small;/">ajde</span></p><p><em>da</em></p>"; </script> <input type=button onclick="document.body.innerHTML=decode(encodedString)"/> </body> </html>

Podrías probar algo como:

var Title = $(''<textarea />'').html("Chris' corner").text(); console.log(Title);

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

JS Fiddle .

Una versión más interactiva:

$(''form'').submit(function() { var theString = $(''#string'').val(); var varTitle = $(''<textarea />'').html(theString).text(); $(''#output'').text(varTitle); return false; });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post"> <fieldset> <label for="string">Enter a html-encoded string to decode</label> <input type="text" name="string" id="string" /> </fieldset> <fieldset> <input type="submit" value="decode" /> </fieldset> </form> <div id="output"></div>

JS Fiddle .

Recomiendo no usar el código jQuery que fue aceptado como la respuesta. Si bien no inserta la cadena para decodificar en la página, hace que se creen cosas como scripts y elementos HTML. Esto es mucho más código del que necesitamos. En cambio, sugiero usar una función más segura y optimizada.

http://jsfiddle.net/LYteC/4/

Para usar esta función, solo llame a decodeEntities("&") y usará las mismas técnicas subyacentes que usará la versión jQuery, pero sin la sobrecarga de jQuery, y después de limpiar las etiquetas HTML en la entrada. Vea el comentario de Mike Samuel sobre la respuesta aceptada sobre cómo filtrar las etiquetas HTML.

Esta función se puede usar fácilmente como un complemento de jQuery agregando la siguiente línea en su proyecto.

jQuery.decodeEntities = decodeEntities;

Sé que llego un poco tarde al juego, pero pensé que podría proporcionar el siguiente fragmento de código como ejemplo de cómo decodifico las entidades HTML usando jQuery:

var varTitleE = "Chris' corner"; var varTitleD = $("<div/>").html(varTitleE).text(); console.log(varTitleE + " vs. " + varTitleD);

No olvide encender su inspector / firebug para ver los resultados de la consola, o simplemente reemplace console.log (...) w / alert (...)

Dicho esto, esto es lo que mi consola a través del inspector de Google Chrome leyó:

Chris' corner vs. Chris'' corner

También preguntó cómo codificarlos: puede usar la funcionalidad del lado del servidor, o puede crear su propio objeto para hacer la asignación, por ejemplo, clj: ¿Una función para convertir caracteres extendidos?

Un enfoque más funcional a la respuesta de @William Lahti:

var entities = { ''amp'': ''&'', ''apos'': ''/''', ''#x27'': ''/''', ''#x2F'': ''/'', ''#39'': ''/''', ''#47'': ''/'', ''lt'': ''<'', ''gt'': ''>'', ''nbsp'': '' '', ''quot'': ''"'' } function decodeHTMLEntities (text) { return text.replace(/&([^;]+);/gm, function (match, entity) { return entities[entity] || match }) }

jQuery proporciona una forma de codificar y decodificar entidades html.

Si usa una etiqueta "<div />", eliminará todo el html.

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

Si usa una etiqueta "<textarea />", conservará las etiquetas html.

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