Codificador de entidades HTML gratuito — Escapar HTML

¿Qué es la codificación de entidades HTML?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

Características clave

Ejemplos prácticos

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

Cómo usar el codificador de entidades HTML

1. 1

   Pega tu HTML o texto

   Suelta el marcado o el texto plano que quieres escapar en el cuadro de entrada. La salida codificada se actualiza en vivo a medida que escribes: no hay botón de enviar y no se envía nada a ningún sitio.

2. 2

   Elige el formato de entidad

   Nombrado es el valor por defecto legible (<, &, ©). Cambia a Decimal (<) o Hex (<) cuando un sistema receptor prefiera referencias numéricas o no puedas garantizar que se admitan entidades nombradas.

3. 3

   Opcionalmente, codifica todo lo no ASCII

   Deja esto desactivado para páginas UTF-8 modernas, de modo que acentos y emojis sigan siendo caracteres en bruto legibles. Márcalo solo cuando el texto deba sobrevivir a un juego de caracteres heredado de un solo byte, lo que convierte cada carácter por encima de 0x7F en una entidad segura en ASCII.

4. 4

   Copia el resultado codificado

   Pulsa Copiar para poner la cadena escapada en tu portapapeles, lista para pegar en una plantilla, una página de documentación o un campo de base de datos. Borrar reinicia ambos paneles para el siguiente fragmento.

5. 5

   ¿Necesitas lo inverso? Invierte la dirección

   Usa Invertir dirección para cambiar al decodificador de entidades HTML cuando quieras convertir entidades de vuelta en los caracteres que representan.

Errores comunes al codificar HTML

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Quién usa esta herramienta

Mostrar ejemplos de código en una página web

¿Escribes un tutorial o documentación que necesita mostrar HTML literal? Escapa el fragmento para que <strong>negrita</strong> aparezca como texto en vez de renderizarse. Pega el marcado, copia la salida escapada y suéltala dentro de un bloque <pre> o <code>.

Sanear la entrada de usuario contra XSS

Antes de insertar cualquier cadena suministrada por el usuario en tu HTML, escapa los cinco caracteres reservados para que una carga como <script>…</script> se vuelva texto inerte. Esta es la defensa fundamental contra el cross-site scripting cuando construyes marcado a mano.

Almacenar marcado en un campo de base de datos o JSON

¿Necesitas guardar un fragmento de HTML como cadena plana sin que se interprete aguas abajo? Codifícalo primero para que los corchetes angulares y ampersands sobrevivan al almacenamiento y se vuelvan a mostrar intactos, luego decodifica a la salida.

Crear plantillas de correo y contenido de CMS

Los clientes de correo y los gestores de contenido son implacables con los caracteres especiales en bruto. Escapa el conjunto reservado —y opcionalmente todo lo no ASCII— para que tu plantilla se renderice de forma consistente en clientes que quizá no compartan tu juego de caracteres.

Convertir texto para un juego de caracteres heredado

¿Apuntas a un sistema que no maneja UTF-8 en bruto? Activa «Codificar todo lo no ASCII» para reescribir cada letra acentuada, símbolo y emoji como una entidad segura en ASCII, garantizando que el texto sobreviva al transporte por canalizaciones limpias de 7 bits.

Escapar valores de atributo XML y SVG

XML y el SVG en línea comparten los caracteres reservados de HTML. Codifica comillas y corchetes angulares para que una cadena con marcado incrustado encaje de forma segura en el valor de un atributo sin romper la estructura del documento.

Consultar una entidad rápidamente

¿Olvidaste si el símbolo de marca registrada es ™ o ™? Escribe el carácter, lee su entidad nombrada, decimal y hex en la salida, o consulta la tabla de referencia rápida incorporada sin salir de la página.

Cómo funciona el codificador

Modo de caracteres especiales (por defecto)

Por defecto solo se escapan los cinco caracteres reservados de HTML — & < > " ' — siguiendo las reglas de serialización de HTML de WHATWG para una salida segura. & se reemplaza primero para que las entidades producidas para los otros caracteres no se escapen dos veces. Todos los demás caracteres, incluidos los no ASCII, pasan sin cambios.

El apóstrofo usa '

En lugar del nombrado ' —que no está definido en HTML4 y es inseguro en algunos analizadores antiguos—, la comilla simple se emite como el numérico ' (decimal '), referenciando U+0027. Esto coincide con la convención de librerías bien probadas como he y garantiza que la salida sea segura en HTML4, HTML5 y XML por igual.

Codificación nombrada, decimal y hex

El selector de formato controla cómo se escribe cada carácter escapado: Nombrado usa etiquetas definidas donde existen (<, ©), Decimal escribe el punto de código Unicode en base 10 (<) y Hex lo escribe en base 16 (<). Las formas numéricas referencian los mismos puntos de código que las nombradas y son intercambiables al analizarse.

Opción de codificar todo lo no ASCII

Cuando se activa, cada carácter con un punto de código por encima de 0x7F se convierte en una entidad en el formato elegido: café pasa a café (nombrado), café (decimal) o café (hex). Los caracteres astrales como los emojis se codifican con su punto de código completo (😀 → 😀). Esto produce una salida ASCII limpia de 7 bits para el transporte heredado.

Juego de caracteres frente a entidades

Un juego de caracteres define cómo se almacena el texto como bytes; una entidad es una forma de escribir un carácter usando solo ASCII. En una página UTF-8 los caracteres no ASCII no necesitan entidad, por lo que el valor por defecto los deja en bruto. Codificar todo solo es necesario cuando la salida debe atravesar un juego de caracteres no Unicode o un sistema hostil a UTF-8.

Local en el navegador, cero red

La codificación se ejecuta de forma síncrona en JavaScript en el hilo principal; no hay llamada a API, ni ida y vuelta a un trabajador o servidor, ni persistencia. La entrada nunca sale de la página, lo que puedes confirmar observando un panel de Red vacío mientras escribes.

Buenas prácticas para escapar HTML

Escapa en la salida, en el contexto correcto

Codifica los datos en el momento en que los insertas en HTML, no cuando los recibes, y ajusta la codificación al contexto. La codificación de entidades HTML es para el contenido de elemento y atributo HTML; usa codificación de URL dentro de URLs y escapado de JavaScript/JSON dentro de bloques de script. Escapar en el contexto equivocado deja un hueco.

Escapa siempre la entrada no confiable

Toda cadena que se origine en un usuario, una subida o una API externa debe escaparse antes de aterrizar en tu marcado. Esta es la defensa central contra XSS: una carga como <script>alert(1)</script> se vuelve texto inerte una vez que los corchetes angulares son entidades.

Prefiere el escapado incorporado donde exista

React, Vue y la mayoría de los motores de plantillas del servidor escapan el texto interpolado automáticamente; asignar element.textContent también escapa por ti. Usa esta herramienta para conversiones puntuales y para entender la salida, pero en el código de aplicación apóyate en el autoescapado del framework en vez de hacerlo a mano.

Deja lo no ASCII en bruto en páginas UTF-8

Si tu página declara <meta charset="utf-8">, no codifiques acentos y emojis en entidades: el UTF-8 en bruto es más corto, más legible e igual de correcto. Reserva «Codificar todo lo no ASCII» para los casos reales de juegos de caracteres heredados que de verdad lo requieran.

Usa el apóstrofo numérico en contextos mixtos

Cuando la salida pueda ser consumida por analizadores antiguos, procesadores XML o clientes de correo, prefiere el numérico ' sobre el nombrado ' para la comilla simple. La forma numérica se entiende en todas partes; la nombrada no, y un literal «'» perdido en el texto renderizado es un fallo común y evitable.

Preguntas frecuentes