Codificador y decodificador de entidades HTML

Cómo escapar o desescapar HTML

1. Elige Escapar o Desescapar.
2. Para escapar, elige qué escapar en Escapar:
   • Solo & < > " ‘ para HTML que vas a pegar en una página o plantilla.
   • Y todo lo no ASCII para páginas, correos o sistemas que no manejan bien UTF-8.
   • Todos los caracteres para codificar todo el texto, para probar parsers.
3. Elige el Formato: Con nombre (é), Decimal (é) o Hex (é). La opción con nombre recurre al decimal para los caracteres que no tienen un nombre común. Desmarca Escapar comillas si el texto solo va dentro del contenido de un elemento.
4. Copiar salida. Intercambiar lleva el resultado al otro lado para comprobar la ida y vuelta.

Para desescapar se usa el parser HTML del navegador, así que se admiten todas las más de 2.000 referencias con nombre de HTML5, además de las referencias decimales y hex. La entrada nunca se renderiza como HTML.

Entidades habituales

Las referencias numéricas usan el punto de código Unicode. El emoji ocupa cuatro bytes en UTF-8, pero es una sola referencia.

Trampas al escapar y decodificar

• Escapa & primero. Si cambias < por < y después & por &, obtienes <. Cualquier escapador hecho a mano debe tratar & antes que los demás.
• Un & sin codificar en el texto puede convertirse en un símbolo. HTML todavía reconoce algunas entidades heredadas sin punto y coma, así que el texto ?id=1&copy=2&para=3 se muestra como ?id=1©=2¶=3. Escribe & para cada ampersand, también en las URL.
• El doble escape aparece en la página como <b>. Desescapa una vez y luego busca qué capa escapa dos veces.
•   no es un espacio. Se decodifica en U+00A0, que parece un espacio pero hace fallar las comparaciones de cadenas y trim() en algunos lenguajes.
• Las entidades no son codificación URL. En un enlace, & separa los parámetros de la query en el código HTML, mientras que %26 es un ampersand literal dentro de un valor. El codificador URL se encarga de lo segundo.

Escapar y desescapar en código

import html
html.escape('5 > 3 & "quotes"')    # '5 > 3 & "quotes"'
html.unescape("Café — ©")   # 'Café — ©'

const escapeHtml = s => s.replace(/&/g, "&amp;").replace(/</g, "&lt;")
  .replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");

const unescapeHtml = s =>
  new DOMParser().parseFromString(s, "text/html").documentElement.textContent;

html.escape de Python escapa las comillas por defecto y escribe ' como '. En PHP lo habitual es htmlspecialchars(); desde PHP 8.1 escapa ambos tipos de comillas por defecto. DOMParser no ejecuta scripts en el documento analizado, lo que lo convierte en una forma segura de decodificar en el navegador. Para más manejo de cadenas en JavaScript, consulta la página de JavaScript.

Entidades, Base64 y data URI

Las entidades HTML y Base64 resuelven problemas distintos. Las entidades hacen que los caracteres sean seguros dentro del código HTML; Base64 convierte bytes en texto para que un archivo entero quepa en un atributo. Para incrustar un documento HTML completo en un URI data: o en un campo JSON, codifícalo con HTML a Base64 en lugar de escapar cada carácter.

Preguntas frecuentes