Desencoding de entidad HTML

¿Cómo codifico y decodizo entidades HTML usando JavaScript o JQuery?

var varTitle = "Chris' corner"; 

Quiero que sea:

 var varTitle = "Chris' corner"; 

Podrías probar algo como:

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

Recomiendo no usar el código jQuery que se aceptó como respuesta. Si bien no inserta la cadena para decodificar en la página, sí crea elementos como scripts y elementos HTML. Esto es mucho más código de lo que necesitamos. En cambio, sugiero usar una función más segura y optimizada.

 var decodeEntities = (function() { // this prevents any overhead from creating the object each time var element = document.createElement('div'); function decodeHTMLEntities (str) { if(str && typeof str === 'string') { // strip script/html tags str = str.replace(/]*>([\S\s]*?)<\/script>/gmi, ''); str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, ''); element.innerHTML = str; str = element.textContent; element.textContent = ''; } return str; } return decodeHTMLEntities; })(); 

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

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

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

 jQuery.decodeEntities = decodeEntities; 

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

En su lugar, pruebe la biblioteca de cinturón de herramientas Underscore.js que viene con los métodos de escape y unescape :

_.escape (cadena)

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

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

_.unescape (cadena)

Lo opuesto a escape, reemplaza & , < , > " , ` y ' con sus contrapartes sin guardar.

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

Para admitir la deencoding de más caracteres, simplemente copie el método Unescape Unescape y agregue más caracteres al mapa.

Este es un método rápido que no requiere la creación de un div y decodifica los caracteres escaparados de 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; } 

Inspirada en la solución de Robert K, esta versión no tira tags HTML, y es igual de segura.

 var decode_entities = (function() { // Remove HTML Entities var element = document.createElement('div'); function decode_HTML_entities (str) { if(str && typeof str === 'string') { // Escape HTML before decoding for HTML Entities str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';'); element.innerHTML = str; if(element.innerText){ str = element.innerText; element.innerText = ''; }else{ // Firefox support str = element.textContent; element.textContent = ''; } } return unescape(str); } return decode_HTML_entities; })(); 

jQuery proporciona una forma de codificar y decodificar entidades html.

Si usa una etiqueta “

“, eliminará todo el html.

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

Si usa una etiqueta ““, conservará las tags html.

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

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

Una alternativa es utilizar una implementación solo de JavaScript de html_entity_decode de PHP (desde http://phpjs.org/functions/html_entity_decode:424 ). El ejemplo sería algo así como:

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

Inspirado en la solución de Robert K, elimina tags html y evita la ejecución de scripts y manipuladores de eventos como: Probado en Chrome, FF, IE (debería funcionar desde IE9, pero no ha probado )

 var decodeEntities = (function () { //create a new html document (doesn't execute script tags in child elements) var doc = document.implementation.createHTMLDocument(""); var element = doc.createElement('div'); function getText(str) { element.innerHTML = str; str = element.textContent; element.textContent = ''; return str; } function decodeHTMLEntities(str) { if (str && typeof str === 'string') { var x = getText(str); while (str !== x) { str = x; x = getText(x); } return x; } } return decodeHTMLEntities; })(); 

Simplemente llame:

 decodeEntities(''); decodeEntities(""); 

Aquí hay una versión completa

 function htmldecode(s){ window.HTML_ESC_MAP = { "nbsp":" ","iexcl":"¡","cent":"¢","pound":"£","curren":"¤","yen":"¥","brvbar":"¦","sect":"§","uml":"¨","copy":"©","ordf":"ª","laquo":"«","not":"¬","reg":"®","macr":"¯","deg":"°","plusmn":"±","sup2":"²","sup3":"³","acute":"´","micro":"µ","para":"¶","middot":"·","cedil":"¸","sup1":"¹","ordm":"º","raquo":"»","frac14":"¼","frac12":"½","frac34":"¾","iquest":"¿","Agrave":"À","Aacute":"Á","Acirc":"Â","Atilde":"Ã","Auml":"Ä","Aring":"Å","AElig":"Æ","Ccedil":"Ç","Egrave":"È","Eacute":"É","Ecirc":"Ê","Euml":"Ë","Igrave":"Ì","Iacute":"Í","Icirc":"Î","Iuml":"Ï","ETH":"Ð","Ntilde":"Ñ","Ograve":"Ò","Oacute":"Ó","Ocirc":"Ô","Otilde":"Õ","Ouml":"Ö","times":"×","Oslash":"Ø","Ugrave":"Ù","Uacute":"Ú","Ucirc":"Û","Uuml":"Ü","Yacute":"Ý","THORN":"Þ","szlig":"ß","agrave":"à","aacute":"á","acirc":"â","atilde":"ã","auml":"ä","aring":"å","aelig":"æ","ccedil":"ç","egrave":"è","eacute":"é","ecirc":"ê","euml":"ë","igrave":"ì","iacute":"í","icirc":"î","iuml":"ï","eth":"ð","ntilde":"ñ","ograve":"ò","oacute":"ó","ocirc":"ô","otilde":"õ","ouml":"ö","divide":"÷","oslash":"ø","ugrave":"ù","uacute":"ú","ucirc":"û","uuml":"ü","yacute":"ý","thorn":"þ","yuml":"ÿ","fnof":"ƒ","Alpha":"Α","Beta":"Β","Gamma":"Γ","Delta":"Δ","Epsilon":"Ε","Zeta":"Ζ","Eta":"Η","Theta":"Θ","Iota":"Ι","Kappa":"Κ","Lambda":"Λ","Mu":"Μ","Nu":"Ν","Xi":"Ξ","Omicron":"Ο","Pi":"Π","Rho":"Ρ","Sigma":"Σ","Tau":"Τ","Upsilon":"Υ","Phi":"Φ","Chi":"Χ","Psi":"Ψ","Omega":"Ω","alpha":"α","beta":"β","gamma":"γ","delta":"δ","epsilon":"ε","zeta":"ζ","eta":"η","theta":"θ","iota":"ι","kappa":"κ","lambda":"λ","mu":"μ","nu":"ν","xi":"ξ","omicron":"ο","pi":"π","rho":"ρ","sigmaf":"ς","sigma":"σ","tau":"τ","upsilon":"υ","phi":"φ","chi":"χ","psi":"ψ","omega":"ω","thetasym":"ϑ","upsih":"ϒ","piv":"ϖ","bull":"•","hellip":"…","prime":"′","Prime":"″","oline":"‾","frasl":"⁄","weierp":"℘","image":"ℑ","real":"ℜ","trade":"™","alefsym":"ℵ","larr":"←","uarr":"↑","rarr":"→","darr":"↓","harr":"↔","crarr":"↵","lArr":"⇐","uArr":"⇑","rArr":"⇒","dArr":"⇓","hArr":"⇔","forall":"∀","part":"∂","exist":"∃","empty":"∅","nabla":"∇","isin":"∈","notin":"∉","ni":"∋","prod":"∏","sum":"∑","minus":"−","lowast":"∗","radic":"√","prop":"∝","infin":"∞","ang":"∠","and":"∧","or":"∨","cap":"∩","cup":"∪","int":"∫","there4":"∴","sim":"∼","cong":"≅","asymp":"≈","ne":"≠","equiv":"≡","le":"≤","ge":"≥","sub":"⊂","sup":"⊃","nsub":"⊄","sube":"⊆","supe":"⊇","oplus":"⊕","otimes":"⊗","perp":"⊥","sdot":"⋅","lceil":"⌈","rceil":"⌉","lfloor":"⌊","rfloor":"⌋","lang":"〈","rang":"〉","loz":"◊","spades":"♠","clubs":"♣","hearts":"♥","diams":"♦","\"":"quot","amp":"&","lt":"<","gt":">","OElig":"Œ","oelig":"œ","Scaron":"Š","scaron":"š","Yuml":"Ÿ","circ":"ˆ","tilde":"˜","ndash":"–","mdash":"—","lsquo":"'","rsquo":"'","sbquo":"‚","ldquo":"“","rdquo":"”","bdquo":"„","dagger":"†","Dagger":"‡","permil":"‰","lsaquo":"‹","rsaquo":"›","euro":"€"}; if(!window.HTML_ESC_MAP_EXP) window.HTML_ESC_MAP_EXP = new RegExp("&("+Object.keys(HTML_ESC_MAP).join("|")+");","g"); return s?s.replace(window.HTML_ESC_MAP_EXP,function(x){ return HTML_ESC_MAP[x.substring(1,x.length-1)]||x; }):s; } 

Uso

 htmldecode("∑ >€"); 

Para agregar otro “inspirado en Robert K” a la lista, esta es otra versión segura que no elimina las tags HTML . En lugar de ejecutar toda la cadena a través del analizador HTML, solo saca 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; } })(); 

Esta es mi forma favorita de decodificar personajes HTML. La ventaja de usar este código es que las tags 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:

Salida:

 Entity: Bad attempt at XSS:

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

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

 var varTitleE = "Chris' corner"; var varTitleD = $("
").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 

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

  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(/]*>([\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(/\"e;/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) 

Consulte https://jsfiddle.net/tigerhawkvok/t9pn1dn5/7/ o https://gist.github.com/tigerhawkvok/285b8631ed6ebef4446d (incluye JS comstackdo, y probablemente esté actualizado en comparación con esta respuesta)

Un enfoque más funcional para 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 }) } 

Para hacerlo en javascript puro sin jquery o predefinir todo, puede recorrer la cadena html codificada a través de los elementos innerHTML y innerText (/ textContent) propiedades para cada paso de deencoding que se requiera:

   For every decode step, cycle through innerHTML and innerText         

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?

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

 var decoded = $("
").text(encodedStr).html();

Intentalo 🙂