Herramienta de escape / desescape HTML

Escapar HTML sustituye caracteres con significado especial en HTML por sus entidades equivalentes. Los principales son <, >, &, " y '. Sin escape, un < o & suelto puede romper el diseño o tratarse como marcado real.

Desescapar HTML invierte el proceso y devuelve las entidades a sus caracteres originales. < vuelve a < y & vuelve a &. Esto suele ser útil al leer contenido procedente de una API, un RSS o una exportación de CMS.

A veces se escribe como HTML escape / unescape como una sola operación combinada. Tanto si lo llamas codificación/decodificación de entidades como escape y desescape, esta herramienta cubre ambos sentidos.

El escape HTML funciona carácter por carácter, no byte por byte como las codificaciones binarias. Cada carácter reservado se convierte en una entidad HTML concreta, con nombre como & o numérica como &.

Las entidades con nombre son más fáciles de leer. Las numéricas sirven para cualquier carácter, incluso si no tiene nombre definido. El orden también importa: & debe escaparse primero para evitar dobles codificaciones.

Aquí tienes un recorrido real con la cadena 5 < 10 & true. Cada carácter reservado se sustituye en una pasada de izquierda a derecha, y el resto del texto permanece igual.

Resultado:5 < 10 & true→5 < 10 & true

¿Necesitas escapar HTML online sin instalar nada? El flujo aquí es simple: elige el modo, pega la entrada, selecciona el formato de salida para el escape y copia el resultado. Todo se procesa localmente en tu navegador.

La salida escapada conserva tu texto original y añade solo las entidades seguras necesarias. Volver a texto plano es igual de directo: pega, pulsa Desescapar y copia. Si el resultado no cambia, tu entrada no contenía caracteres que escaparse.

Una sola palabra no muestra bien cómo se comportan el escape y el desescape HTML con contenido real. La siguiente tabla recorre cinco casos comunes, desde una frase simple hasta un fragmento HTML completo.

Fíjate en el ejemplo de comparación: escapa < y & en la misma pasada y en el orden correcto. Escapar & primero evita que < y > se conviertan por error en < y >.

Solo cinco caracteres necesitan escape en la mayoría de contextos HTML, aunque conviene conocer algunos más. La tabla cubre el conjunto común: todo lo que esta herramienta escapa por defecto, más algunos símbolos tipográficos útiles.

Las entidades con nombre como © son más fáciles de leer en el código fuente. Las numéricas como © funcionan incluso cuando un carácter no tiene un nombre definido.

También existe la forma hexadecimal: & representa el mismo ampersand que &. La opción numérica de esta herramienta genera decimal por defecto, pero Desescapar también entiende referencias hexadecimales.

Además de los cinco caracteres reservados, HTML define entidades con nombre para letras acentuadas y símbolos, como é y ñ. Son útiles cuando no puedes garantizar UTF-8 en el sistema de destino.

Los usuarios también describen estos caracteres de formas distintas: escape HTML de comillas, apóstrofe, ampersand, menor que o mayor que. Las reglas de entidades son las mismas.

El escape HTML solo funciona donde el navegador está analizando contenido de texto HTML. Dos puntos comunes rompen esa suposición: los elementos <script>/<style> y los atributos HTML que realmente contienen JavaScript o CSS.

Dentro de las etiquetas <script> y <style>, el navegador no analiza entidades en absoluto, trata el contenido como JavaScript o CSS sin procesar. Escapar & dentro de un bloque <script> no protege nada; solo imprime un & literal en tu código, lo que normalmente es incorrecto. Los valores dinámicos necesitan un escape adecuado de cadenas JS o CSS, no entidades HTML.

Lo mismo se aplica a atributos como onclick y style. <p onclick="NOT-HERE"> y <p style="NOT-HERE"> contienen JavaScript y CSS, respectivamente. Escapar HTML por sí solo no hace seguro el contenido no confiable dentro de ellos. Ajusta el escape al contexto real, no solo a que "está dentro de una etiqueta HTML".

Muchos desarrolladores no necesitan solo una conversión puntual, sino la misma lógica dentro de su propia aplicación. Los ejemplos siguientes cubren tres lenguajes comunes para escapar y desescapar HTML.

En JavaScript no existe una función integrada única para escapar HTML, así que el enfoque con textContent es la opción más segura en el navegador para mostrar texto. En servidor, usa una librería específica de escape HTML, no una función para URIs o cadenas JavaScript.

Python y PHP lo ponen más fácil porque ambos incluyen funciones dedicadas en sus herramientas estándar. No necesitas instalar nada extra.

// Escape (safe display)
const el = document.createElement("div");
el.textContent = "Tom & Jerry";
const escaped = el.innerHTML;
console.log(escaped); // Tom & Jerry

// Unescape
const parser = new DOMParser();
const decoded = parser.parseFromString(escaped, "text/html").body.textContent;
console.log(decoded); // Tom & Jerry

import html

escaped = html.escape("Tom & Jerry")
print(escaped)  # Tom & Jerry

decoded = html.unescape(escaped)
print(decoded)  # Tom & Jerry

<?php
$escaped = htmlspecialchars("Tom & Jerry");
echo $escaped; // Tom &amp; Jerry

$decoded = htmlspecialchars_decode($escaped);
echo $decoded; // Tom & Jerry

Escapar HTML reduce el riesgo de XSS, pero no es una protección completa por sí sola. Escapar hace que el texto del usuario se renderice como caracteres visibles en lugar de marcado, algo realmente útil y necesario. La protección completa necesita escape según el contexto: el cuerpo HTML, los atributos, JavaScript y las URL tienen cada uno sus propias reglas.

En cuanto a privacidad, esta herramienta funciona completamente del lado del cliente en tu navegador. El texto y el HTML que pegas nunca se suben a un servidor. Cadenas sensibles, borradores de comentarios, plantillas internas y respuestas de API que estás depurando, permanecen en tu dispositivo todo el tiempo.

Trata esta herramienta como una forma de escapar o decodificar entidades HTML correctamente para mostrarlas, no como un control de seguridad independiente. Sanitiza cualquier HTML que permitas intencionadamente, texto enriquecido o salida Markdown, con una librería especializada. Valida también la entrada no confiable en el servidor, no solo al mostrarla. Para el contexto de URL, nuestro Codificador/decodificador URL gestiona el percent-encoding de cadenas de consulta y rutas.

La mayoría de errores de escape o desescape HTML se reducen a unos pocos patrones. Reconocerlos evita revisar todo el texto desde cero.

Si el texto sigue pareciendo doblemente escapado después de un pase de Desescapar, repítelo una vez más. Normalmente significa que se codificó dos veces en algún punto anterior.

El escape HTML no es el único sistema para tratar texto de forma segura. La mejor opción depende del destino del contenido. La tabla siguiente compara el escape HTML con las codificaciones con las que más se suele confundir.

Usar la codificación equivocada deja el problema original sin resolver. Los caracteres de escape HTML no protegerán una URL, y el percent-encoding tampoco protegerá el texto del cuerpo HTML. Para cadenas de consulta, nuestro Codificador/decodificador URL aplica percent-encoding correctamente. Para datos binarios como archivos e imágenes, nuestro Codificador/decodificador Base64 cubre la codificación y decodificación Base64. Para literales de cadena dentro de JavaScript, una herramienta de escape de cadenas JavaScript aplica las secuencias de escape correctas.