Qué es escapar HTML
En una página web hay caracteres que tienen un significado especial. El navegador entiende que < abre una etiqueta, que > la cierra y que & empieza una entidad. Si quieres mostrar esos símbolos como texto normal (por ejemplo, dentro de un tutorial de código o un comentario de usuario), tienes que “escaparlos”: sustituirlos por su entidad HTML equivalente para que el navegador los dibuje en pantalla en lugar de interpretarlos.
Escapar convierte cinco caracteres clave en entidades seguras. Desescapar hace lo contrario: toma las entidades y devuelve los caracteres originales. Esta herramienta hace ambas cosas al instante y en tu navegador, sin enviar tu texto a ningún servidor.
Cómo usar la herramienta
- Elige la pestaña Escapar para pasar de texto a entidades, o Desescapar para el proceso inverso.
- Pega tu texto en el cuadro grande.
- El resultado aparece de inmediato en la tarjeta oscura.
- Pulsa Copiar para llevarlo al portapapeles.
Los contadores de abajo muestran los caracteres de entrada, los de salida y cuántas entidades hay implicadas.
Qué caracteres se escapan y en qué orden
El escapado reemplaza cinco caracteres. El detalle importante es el orden: el & se procesa primero. Si escaparas el < antes que el &, el & recién creado de < se volvería a escapar y obtendrías &lt;, que es un doble escapado incorrecto.
| Carácter | Entidad | Por qué es especial |
|---|---|---|
& | & | inicia cualquier entidad; va primero |
< | < | abre una etiqueta |
> | > | cierra una etiqueta |
" | " | delimita valores de atributo |
' | ' | delimita atributos con comilla simple |
Para desescapar, la herramienta reconoce entidades con nombre (como & o ©), entidades numéricas decimales (é) y entidades hexadecimales (é). Una secuencia que no reconoce se deja intacta.
Ejemplo resuelto
Partamos del fragmento <a href="x">A & B</a>.
Al escapar, cada carácter especial se sustituye por su entidad:
<pasa a<"pasa a"(aparece dos veces)>pasa a>&pasa a&- la barra de cierre
</a>produce</a>
El resultado completo es:
<a href="x">A & B</a>
Si ahora pegas esa cadena en la pestaña Desescapar, recuperas exactamente <a href="x">A & B</a>. Es un viaje de ida y vuelta perfecto (round-trip): escapar y luego desescapar te devuelve el texto original sin pérdidas.
Preguntas frecuentes
¿Por qué el & debe escaparse primero?
Porque toda entidad empieza con &. Si primero convirtieras < en <, ese nuevo & volvería a ser escapado en el siguiente paso y terminarías con &lt;. Procesar el & antes que los demás caracteres evita ese doble escapado.
¿Cuál es la diferencia entre ' y ' para el apóstrofo?
Ambos representan la comilla simple '. La herramienta escapa con ' (la forma numérica) porque ' no está definida en HTML 4 y algunos entornos antiguos no la reconocen; ' funciona en todas partes. Al desescapar, sin embargo, sí aceptamos las dos formas.
¿Escapar HTML protege contra ataques XSS?
Escapar es una pieza clave para prevenir XSS cuando insertas texto en el cuerpo de una página, porque impide que el navegador ejecute etiquetas como <script>. Aun así, no basta por sí solo: dentro de atributos, URLs o JavaScript hacen falta reglas de escape adicionales. Trátalo como un paso necesario, no como una garantía total.
¿Escapar es lo mismo que cifrar?
No. Escapar solo cambia la representación de unos pocos caracteres y es totalmente reversible por cualquiera; no oculta ni protege la información. El cifrado, en cambio, hace ilegible el contenido sin una clave. Nunca uses entidades HTML para proteger datos sensibles.
¿Se conservan los acentos y emojis?
Sí. Escapar solo toca los cinco caracteres especiales; las letras acentuadas, la eñe y los emojis pasan sin cambios. Al desescapar, además, se resuelven las entidades numéricas: por ejemplo é vuelve a ser é y 😀 se convierte en su emoji.