Convertir entidades de caracteres HTML a texto normal usando javascript

Question

las preguntas lo dicen todo :)

por ejemplo. tenemos >, necesitamos > usando sólo javascript

actualización: Parece jQuery es el camino más fácil. Pero, sería bueno tener una solución liviana. Más como una función que es capaz de hacer esto por sí misma.

Answer 1

se podría hacer algo como esto:

String.prototype.decodeHTML = function() { 
    var map = {"gt":">" /* , … */}; 
    return this.replace(/&(#(?:x[0-9a-f]+|\d+)|[a-z]+);?/gi, function($0, $1) { 
     if ($1[0] === "#") { 
      return String.fromCharCode($1[1].toLowerCase() === "x" ? parseInt($1.substr(2), 16) : parseInt($1.substr(1), 10)); 
     } else { 
      return map.hasOwnProperty($1) ? map[$1] : $0; 
     } 
    }); 
}; 

Answer 2

No hay nada incorporado, pero hay muchas bibliotecas que se han escrito para hacer esto.

Here es uno.

Y here uno que es un complemento jQuery.

Answer 3

function decodeEntities(s){ 
    var str, temp= document.createElement('p'); 
    temp.innerHTML= s; 
    str= temp.textContent || temp.innerText; 
    temp=null; 
    return str; 
} 

alert(decodeEntities('<')) 

/* returned value: (String) 
< 
*/ 

Answer 4

Sé que hay bibliotecas por ahí, pero aquí hay un par de soluciones para los navegadores. Funcionan bien cuando se colocan cadenas de datos de entidad html en áreas editables humanas donde desea que se muestren los caracteres, como textarea o input [type = text].

Agrego esta respuesta, ya que tengo que admitir versiones anteriores de IE y creo que termina con algunos días de investigación y prueba. Espero que alguien encuentre esto útil.

Primero esto es para navegadores más modernos que usan jQuery, tenga en cuenta que esto NO debe usarse si tiene que admitir versiones de IE anteriores a 10 (7, 8 o 9) ya que eliminará las líneas nuevas dejándolo con solo una larga linea de texto

if (!String.prototype.HTMLDecode) { 
    String.prototype.HTMLDecode = function() { 
      var str = this.toString(), 
      $decoderEl = $('<textarea />'); 

     str = $decoderEl.html(str) 
      .text() 
      .replace(/<br((\/)|(\/))?>/gi, "\r\n"); 

     $decoderEl.remove(); 

     return str; 
    }; 
} 

Esto siguiente se basa en el trabajo de Kennebec arriba, con algunas diferencias que son sobre todo por el bien de las versiones anteriores de IE. Esto no requiere jQuery, pero aún requiere un navegador.

if (!String.prototype.HTMLDecode) { 
    String.prototype.HTMLDecode = function() { 
     var str = this.toString(), 
      //Create an element for decoding    
      decoderEl = document.createElement('p'); 

     //Bail if empty, otherwise IE7 will return undefined when 
     //OR-ing the 2 empty strings from innerText and textContent 
     if (str.length == 0) { 
      return str; 
     } 

     //convert newlines to <br's> to save them 
     str = str.replace(/((\r\n)|(\r)|(\n))/gi, " <br/>");    

     decoderEl.innerHTML = str; 
     /* 
     We use innerText first as IE strips newlines out with textContent. 
     There is said to be a performance hit for this, but sometimes 
     correctness of data (keeping newlines) must take precedence. 
     */ 
     str = decoderEl.innerText || decoderEl.textContent; 

     //clean up the decoding element 
     decoderEl = null; 

     //replace back in the newlines 
     return str.replace(/<br((\/)|(\/))?>/gi, "\r\n"); 
    }; 
} 

/* 
Usage: 
    var str = "&gt;"; 
    return str.HTMLDecode(); 

returned value: 
    (String) >  
*/ 

Answer 5

Aquí hay una "clase" para decodificar todo el documento HTML.

HTMLDecoder = { 
    tempElement: document.createElement('span'), 
    decode: function(html) { 
     var _self = this; 
     html.replace(/&(#(?:x[0-9a-f]+|\d+)|[a-z]+);/gi, 
      function(str) { 
       _self.tempElement.innerHTML= str; 
       str = _self.tempElement.textContent || _self.tempElement.innerText; 
       return str; 
      } 
     ); 
    } 
} 

Tenga en cuenta que he utilizado expresiones regulares de Gumbo para la captura de entidades, pero para documentos HTML completamente válido (o XHTML) se puede utilizar simpy /&[^;]+;/g.