Qué son las entidades HTML
Una entidad HTML es una forma de escribir un carácter usando un código en lugar del carácter tal cual. Existen por varios motivos. Primero, hay caracteres reservados: el navegador toma el signo < como el comienzo de una etiqueta, así que para mostrar un menor que literal en la página hay que escribirlo como <. Segundo, en encodings viejos o mal configurados los acentos y la ñ se rompían, y escribirlos como é o ñ garantizaba que se vieran bien en cualquier lado. Tercero, muchos símbolos como ©, € o ™ no están en el teclado y son más fáciles de tipear con su nombre. Se usan para mostrar código en un blog, para armar emails HTML que se vean igual en clientes viejos, para prevenir XSS al insertar contenido de usuario, y en cualquier CMS que codifique el texto que pegás.
Con nombre, decimales y hexadecimales
Toda entidad arranca con un ampersand y termina con punto y coma. En el medio puede ir un nombre (© para el copyright), un número decimal precedido por almohadilla (©), o un número hexadecimal con #x (©). Las tres formas de arriba representan el mismo carácter. Las entidades con nombre son legibles pero solo existen para un set limitado; las numéricas funcionan para cualquier carácter Unicode, incluidos emojis. Por eso, cuando codificás con nombres, lo que no tiene nombre cae automáticamente a numérica.
Codificar y decodificar de forma segura
Codificar significa pasar de <café> a <café> (solo especiales) o a <café> (todo lo no-ASCII). Decodificar es el camino inverso: de é volvés a é, de ñ a ñ, de & a &. Muchos conversores decodifican metiendo el texto en innerHTML, lo que puede ejecutar scripts escondidos. Acá no: usamos un mapa explícito de nombres y String.fromCodePoint para las numéricas, todo como texto puro, y el resultado va al valor de un textarea. Nunca tocamos innerHTML, así que decodificar es seguro incluso con contenido malicioso.
Tabla de referencia de entidades comunes
| Carácter | Con nombre | Decimal | Hexadecimal | Descripción |
|---|---|---|---|---|
| & | & | & | & | Ampersand |
| < | < | < | < | Menor que |
| > | > | > | > | Mayor que |
| " | " | " | " | Comilla doble |
| ' | ' | ' | ' | Comilla simple |
| (espacio) | |   |   | Espacio de no separación |
| © | © | © | © | Copyright |
| ® | ® | ® | ® | Marca registrada |
| ™ | ™ | ™ | ™ | Trademark |
| € | € | € | € | Euro |
| £ | £ | £ | £ | Libra esterlina |
| ° | ° | ° | ° | Grado |
| ± | ± | ± | ± | Más/menos |
| × | × | × | × | Multiplicación |
| — | — | — | — | Raya (em dash) |
| – | – | – | – | Guion medio (en dash) |
| … | … | … | … | Puntos suspensivos |
| « | « | « | « | Comilla angular izquierda |
| » | » | » | » | Comilla angular derecha |
| ñ | ñ | ñ | ñ | Eñe minúscula |
| é | é | é | é | E con acento agudo |
| ¿ | ¿ | ¿ | ¿ | Apertura de interrogación |
Para qué sirve este codificador
- Mostrar fragmentos de código HTML en un blog sin que se rendericen.
- Armar emails HTML que se vean igual en clientes viejos, con símbolos y acentos codificados.
- Prevenir XSS codificando el input de usuario antes de meterlo en el DOM.
- Limpiar texto que llegó con entidades desde un feed RSS, una API o un export de base de datos.
- Insertar símbolos que no están en el teclado (©, €, ™, flechas) por su nombre.