Las entidades HTML son marcadores de posición para caracteres especiales en HTML. Caracteres como <, >, &, " y ' tienen significados específicos dentro de HTML y deben escaparse para evitar interrumpir la estructura del documento. Al recuperar HTML de un servidor o de la entrada del usuario, a menudo es necesario decodificar estas entidades para mostrarlas y manipularlas correctamente. Este artículo explora dos métodos para decodificar entidades HTML usando JavaScript.
Tabla de contenido
- Decodificando entidades HTML con JavaScript vainilla
- Decodificando entidades HTML con la biblioteca
he
Decodificando entidades HTML con JavaScript vainilla
JavaScript vainilla proporciona una forma sencilla de decodificar entidades HTML usando el DOMParser integrado del navegador. Este método es eficiente y no requiere bibliotecas externas. Sin embargo, puede que no maneje todas las entidades perfectamente, particularmente las menos comunes o personalizadas.
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// Ejemplo de uso:
const encodedText = '<p>Este es un párrafo con & en él.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // Salida: Este es un párrafo con & en él.
Esta función analiza la cadena de entrada como HTML usando DOMParser. La propiedad textContent del elemento raíz devuelve el texto decodificado, eliminando las etiquetas HTML y reemplazando las entidades. Tenga en cuenta que este método también elimina cualquier etiqueta HTML presente en la entrada.
Decodificando entidades HTML con la biblioteca he
Para una decodificación más completa, especialmente para una gama más amplia de entidades, la biblioteca he es una solución robusta. Es ligera y está fácilmente disponible a través de npm o una CDN.
Instalación (npm):
npm install he
Instalación (CDN – jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
Después de la instalación, use la función he.decode():
// Asumiendo que la biblioteca 'he' está incluida
const encodedText = '<p>Este es un párrafo con & y ' en él.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // Salida: Este es un párrafo con & y ' en él.
he.decode() maneja un espectro más amplio de entidades, incluyendo entidades numéricas como ' (comilla simple).
Eligiendo un método
Ambos métodos decodifican eficazmente las entidades HTML. El enfoque de JavaScript vainilla es adecuado para casos simples y evita dependencias externas. Para escenarios complejos o una gama más amplia de entidades, la biblioteca he proporciona una solución más fiable. Siempre desinfecte la entrada del usuario para evitar vulnerabilidades de seguridad.