Codificador/Decodificador HTML
Codifica y decodifica entidades HTML en línea gratis. Convierte caracteres especiales a códigos HTML y viceversa.
Un codificador HTML sustituye los caracteres con significado en el marcado por sus entidades, para que el navegador los imprima en vez de interpretarlos. En la pestaña Codificar con Entidades nombradas cambian cinco caracteres: & < > " y '. Codificar <p>Hello & World "quotes" 'apostrophe'</p> convierte 42 caracteres en 76, y la franja de datos indica 9 entidades encontradas y un cambio de tamaño del +81 %.
| Carácter | Entidad con nombre | Entidad numérica | Entidad hexadecimal | Descripción | |
|---|---|---|---|---|---|
Acerca de Codificador/Decodificador HTML
Sobre la herramienta hay cuatro pestañas. Codificar y Decodificar comparten un par de entrada y salida; Vista Previa muestra el HTML que pegues ya renderizado; Referencia de entidades es una tabla consultable de entidades nombradas, filtrable por Básico, Símbolos, Matemáticas, Monedas, Flechas o Acentos. Todo se ejecuta en el navegador mientras escribes, sin subir nada.
La codificación tiene cuatro ajustes. Entidades nombradas solo toca los cinco caracteres que importan en el marcado y escribe &, <, >, " y '; el apóstrofo recibe la forma numérica porque ' no formaba parte de HTML 4 y algunos clientes de correo antiguos lo manejan mal. Entidades numéricas convierte esos cinco más todo carácter por encima del punto de código 127 en &#NNN;. Entidades hexadecimales hace lo mismo en &#xNN; con dígitos en mayúscula. Todos los caracteres convierte absolutamente todos, algo que solo sirve para ofuscar y multiplica el tamaño.
La decodificación no usa innerHTML. El texto se entrega a DOMParser y se devuelve el textContent del cuerpo resultante, así que una cadena con una etiqueta script vuelve a ser texto visible en lugar de ejecutarse mientras la inspeccionas. Cuatro contadores bajo la salida indican longitud de entrada, longitud de salida, entidades encontradas y cambio de tamaño en porcentaje, y el botón Intercambiar pasa la salida a la entrada invirtiendo el modo, la forma más rápida de comprobar una ida y vuelta.
Lo que esta página no hace: no sanea HTML para publicarlo, y codificar no sustituye al escapado propio de cada contexto. Un valor que va a un atributo, una URL, una cadena de JavaScript o un bloque CSS necesita el escapado de ese contexto, no entidades HTML. Úsala para mostrar marcado como texto, inspeccionar una carga codificada o buscar una entidad, no como capa de seguridad de una aplicación.
Casos de uso
Cómo usar
Elige arriba la pestaña Codificar o Decodificar; al abrir la página está seleccionada Codificar.
Para codificar, elige Entidades nombradas, Entidades numéricas, Entidades hexadecimales o Todos los caracteres, que decide cuánto del texto se convierte.
Pega tu marcado o tu texto codificado en el cuadro de entrada; la salida se actualiza mientras escribes.
Lee los cuatro contadores bajo la salida: longitud de entrada, longitud de salida, entidades encontradas y cambio de tamaño.
Pulsa Copiar encima de la salida para llevarte el resultado, o Intercambiar para pasarlo a la entrada e invertir el modo.
Usa la pestaña Vista Previa para ver renderizado el HTML pegado, o Referencia de entidades para buscar una entidad por nombre o categoría.
Consejos Pro
- Entidades nombradas deja intactos los caracteres acentuados y no latinos: solo cambian & < > " y '. Si necesitas que una é o una palabra en cirílico sobreviva a una cadena antigua, pasa antes a Entidades numéricas.
- El apóstrofo sale como ' y no como ', incluso en modo nombrado. Es deliberado: ' pertenece a XML y a HTML5 pero nunca estuvo en HTML 4, así que la forma numérica es la que se ve en todas partes.
- Intercambiar hace la ida y vuelta con un clic. Codifica, pulsa Intercambiar y el texto codificado pasa a ser la entrada en modo Decodificar; si lo que vuelve no es idéntico al original, este ya venía parcialmente codificado.
- Vigila el contador Cambio de tamaño antes de codificar una carga grande. El modo Todos los caracteres multiplica la longitud, algo que importa si el resultado va a un campo con límite, como una etiqueta meta o una cadena de consulta.
- Usa la pestaña Vista Previa para ver el marcado renderizado, no para probar ataques: muestra una versión saneada de lo que pegas, así que no reproducirá todos los comportamientos de una página real.
Solución de problemas
La salida es idéntica a la entrada y Entidades encontradas se queda en 0.
Con Entidades nombradas solo se convierten & < > " y ', así que un texto sin esos cinco caracteres vuelve igual, y eso es correcto. Si necesitas convertir también acentos o caracteres no latinos, cambia a Entidades numéricas o hexadecimales.
Al decodificar sigue apareciendo & y < en el resultado.
El origen venía doblemente codificado: el ampersand de cada entidad se había codificado a su vez antes de que lo recibieras. Decodifica la salida una segunda vez, o usa Intercambiar y vuelve a decodificar, hasta que las entidades dejen de reducirse.
La salida codificada muestra ' donde esperaba '.
Es deliberado. ' llegó con XML y HTML5 y nunca formó parte de HTML 4, así que esta herramienta escribe el numérico ', que todos los navegadores y clientes de correo representan bien.
El contador Cambio de tamaño se dispara a varios cientos por ciento.
El tipo de codificación está en Todos los caracteres, que convierte cada carácter del texto en una entidad numérica en lugar de solo los cinco que importan en el marcado. Vuelve a Entidades nombradas salvo que busques justamente esa ofuscación.
Preguntas frecuentes
Para que el navegador muestre los caracteres en lugar de interpretarlos. Sin codificar, un < abre una etiqueta y un & abre una entidad, así que un ejemplo de código desaparece dentro de la estructura de la página y el texto pegado de otro sitio puede inyectar marcado no deseado. Codificar reescribe esos caracteres como entidades, que se ven tal cual.
Es la entidad del ampersand. El ampersand hay que codificarlo porque abre todas las demás entidades: escribir & en el código fuente produce un & literal en pantalla, mientras que un & suelto seguido de letras y punto y coma se leería como otra entidad. Es la primera sustitución que hace esta herramienta, antes que < y >.
Cuando recibes un texto que ya contiene entidades y quieres recuperar los caracteres originales: una línea de registro, un campo de una API, un fragmento copiado lleno de < y &. Pégalo en la pestaña Decodificar y la salida es el texto plano. Decodificar sirve para leer e inspeccionar, no para meter el resultado directamente en una página.
Resuelven problemas distintos. Las entidades HTML protegen caracteres con significado para un analizador de HTML; la codificación porcentual protege los que tienen significado dentro de una URL, así un espacio pasa a %20 y un ampersand a %26. Un valor que va en un enlace necesita codificación de URL; ese mismo valor mostrado como texto necesita codificación HTML.
Con Entidades nombradas, exactamente cinco: & pasa a &, < a <, > a >, " a " y ' a '. Todo lo demás, incluidas letras acentuadas y emojis, se deja igual. Si cambias a Entidades numéricas o hexadecimales, también se convierte cada carácter por encima del punto de código 127.
Es la defensa correcta en un solo sitio: texto insertado en el cuerpo de una página. Un valor colocado en un atributo, una URL, una cadena de JavaScript o un bloque de estilo necesita el escapado de ese contexto, y un valor insertado con innerHTML no queda protegido en absoluto. Toma esta página como herramienta para mostrar marcado, no como capa de seguridad.
No. La decodificación usa DOMParser y devuelve el textContent del cuerpo analizado en lugar de asignar innerHTML, así que una carga con una etiqueta script vuelve como texto visible y nunca se ejecuta. Eso es lo que hace seguro pegar una cadena sospechosa para leer lo que dice de verdad.
Codifican un carácter por su punto de código en lugar de por su nombre: é se escribe é o é. Las formas numéricas existen para todos los caracteres, incluidos los que no tienen entidad nombrada, y sobreviven a cadenas de proceso que estropean los bytes no ASCII. Las nombradas son más legibles; las numéricas, más portables.
Puedes copiar la salida a una cadena de JavaScript, pero no uses entidades HTML como escapado para JavaScript en sí: un valor que va dentro de un script necesita codificación JSON o un escapado adecuado. En el navegador, el equivalente al paso de decodificación de esta página es DOMParser, que es justo lo que usa la herramienta.
Abre la pestaña Referencia de entidades, escribe parte del nombre en el buscador o acota con los filtros Básico, Símbolos, Matemáticas, Monedas, Flechas y Acentos. La tabla muestra el carácter junto a su forma nombrada, así copias la que acepte tu formato de destino.