Codificar / decodificar entidades HTML
Escapa texto para HTML y convierte las entidades de nuevo en texto.
Acerca de esta herramienta
Escapa <, >, &, las comillas y, si quieres, todos los caracteres no ASCII para que el texto se pueda insertar de forma segura en HTML, o decodifica entidades con nombre y numéricas como &, é y 🚀 de vuelta a texto plano.
Cómo se usa
- Elige Codificar para escapar texto para HTML, o Decodificar para convertir las entidades de nuevo en caracteres.
- Pega tu texto.
- Si quieres, codifica todos los caracteres no ASCII como entidades numéricas.
- Copia el resultado.
Preguntas
- ¿Qué caracteres hay que escapar en HTML?
- & y < siempre; > por seguridad; y " o ' dentro de los valores de atributo. Escapar estos cinco basta para mostrar texto del usuario de forma segura en HTML.
- ¿Escapar protege contra XSS?
- Escapar la salida según el contexto es la defensa principal para el texto y los atributos HTML. No basta dentro de etiquetas script, atributos de manejadores de eventos ni URL, que necesitan su propia codificación.
- ¿Tengo que codificar las letras con tilde?
- No si tu página se sirve como UTF-8, como casi todas las páginas modernas. Codificar todo lo que no sea ASCII solo es útil para sistemas que no admiten UTF-8.
- ¿Qué diferencia hay entre y un espacio normal?
- es un espacio de no separación, U+00A0. El navegador no corta una línea en él ni junta varios en uno, a diferencia de los espacios normales. Úsalo para mantener juntos valores como “10 km”. Para la maquetación y el espaciado, usa CSS en lugar de cadenas de .
- ¿Debo usar ' o ' para un apóstrofo?
- Ambos funcionan en HTML5 y XML, pero ' no formaba parte de HTML 4, así que los parsers antiguos y algunos clientes de correo no lo reconocen. ' funciona en todas partes, por eso lo usa este codificador. Dentro de un atributo entre comillas dobles no hace falta escapar el apóstrofo.
- ¿Qué diferencia hay entre escapar HTML y codificar una URL?
- Escapar HTML hace que el texto sea seguro dentro de HTML; codificar una URL hace que el texto sea seguro dentro de una URL. Un enlace en un atributo href necesita ambas cosas: primero codifica con porcentajes cada valor de la consulta y luego escapa para HTML la URL completa, de modo que cada & entre parámetros se convierta en &. La herramienta de URL se encarga del paso de la codificación porcentual.
¿Qué son las entidades HTML?
Una entidad HTML es un fragmento corto de texto que representa un carácter. Empieza por & y termina con un punto y coma. Las entidades con nombre usan una palabra, como & para & o © para ©. Las entidades numéricas usan el punto de código Unicode, ya sea en decimal, como ©, o en hexadecimal, como ©. El navegador las sustituye por el carácter real al renderizar la página, así que el marcado en sí puede seguir siendo ASCII simple.
Las entidades resuelven dos problemas. Primero, te permiten mostrar caracteres que HTML interpretaría como marcado: un < literal abre una etiqueta y un & suelto inicia una entidad. Segundo, te permiten escribir caracteres que tu teclado o la codificación de tu archivo no pueden manejar. HTML5 define más de 2000 entidades con nombre, y cualquier carácter Unicode, incluidos emoji como 🚀 para 🚀, se puede escribir como entidad numérica.
Cómo escapar HTML en JavaScript
En el navegador, la forma más segura de mostrar texto del usuario es no construir cadenas HTML en absoluto. Asigna element.textContent en lugar de innerHTML y el navegador tratará el valor como texto. React, Vue, Svelte y Angular también escapan por defecto los valores interpolados. El riesgo vuelve en cuanto usas innerHTML, dangerouslySetInnerHTML o v-html con datos que no controlas, que es donde empiezan la mayoría de los fallos XSS en las aplicaciones modernas.
Cuando sí necesitas una cadena escapada, para una plantilla o el cuerpo de un correo, sustituye los cinco caracteres especiales: primero el ampersand y luego <, >, las comillas dobles y la comilla simple. Escapar & primero es importante; si no, < se convierte en &lt;. Eso es lo que hace esta herramienta de escape HTML en el modo Codificar, que escribe la comilla simple como '. Usa Decodificar para comprobar qué contiene realmente una cadena de una base de datos o una API.
¿Por qué veo &amp; en mi página? Cómo solucionar el doble escape
Si una página muestra & o " como texto literal, la cadena se escapó dos veces. Normalmente el valor se escapó antes de guardarlo y la plantilla lo volvió a escapar al mostrarlo. La primera pasada convierte & en &, la segunda lo convierte en &amp; y el navegador lo muestra como &. Lo mismo ocurre con feeds RSS, campos de un CMS y API JSON que escapan el HTML por ti.
La solución es escapar una sola vez, en el momento de escribir en HTML, y guardar texto sin escapar en todo lo demás. Para limpiar datos existentes, pégalos en el modo Decodificar: cada pasada elimina una capa, así que vuelve a ejecutarlo si quedan entidades. La decodificación usa el parser del navegador sobre un elemento textarea, que lee las entidades sin ejecutar etiquetas ni scripts. Para comparar las versiones de antes y después, usa Diff de textos.
Entidades HTML habituales
Caracteres que hay que escapar en HTML y los tipográficos que más se buscan.
| Carácter | Entidad con nombre | Entidad numérica |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| espacio de no separación | |   |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
| ° | ° | ° |
| × | × | × |
| ÷ | ÷ | ÷ |
| – | – | – |
| — | — | — |
| … | … | … |
| « | « | « |
| » | » | » |
| → | → | → |
| ← | ← | ← |
| ✓ | ✓ | ✓ |
¿Algo no funciona o un resultado parece incorrecto? Informar de un problema con esta herramienta