Codificador y decodificador HTML

Cómo codificar y decodificar entidades HTML

HTML es un lenguaje de marcado, así que un signo < en tu texto es ambiguo: el navegador no puede distinguir un párrafo de una etiqueta. Esta herramienta convierte los caracteres reservados en referencias de caracteres al codificar, y transforma de nuevo las referencias en texto legible al decodificar — todo dentro de tu navegador.

1. Elige la dirección. Selecciona Codificar para hacer que un texto sin formato sea seguro dentro de HTML, o Decodificar para recuperar el texto original de un documento que ya contiene entidades. Por ejemplo, decodificar &lt;title&gt; devuelve <title>, listo para editar o analizar.

2. Pega el texto. Coloca un fragmento, un valor de plantilla o una línea de marcado en el cuadro de entrada. Codificar Tom & Jerry produce Tom &amp; Jerry, porque el ampersand deja de ser peligroso para el analizador.

3. Elige el nivel de escape (codificación). Deja activado «solo los cinco caracteres críticos» para páginas UTF-8 modernas: Café & Co. se convierte en Café &amp; Co. Desactívalo para convertir también cada carácter no ASCII en una referencia numérica — Café & Co. pasa entonces a Caf&#233; &amp; Co. — lo que resulta útil para canales antiguos o limitados a ASCII.

4. Ejecuta la conversión y lee las estadísticas. La herramienta muestra la longitud de entrada, la de salida y cuántas referencias ha creado o resuelto, de modo que puedes detectar al instante un fragmento cuyo tamaño ha cambiado de forma inesperada.

5. Copia el resultado. El botón de copiar coloca la salida en el portapapeles; pégala en un archivo HTML, un campo de CMS, una plantilla de correo o un literal de plantilla de JavaScript.

6. Verifica decodificando. Vuelve a pegar la salida codificada en modo Decodificar: &lt;a href=&quot;/x&quot;&gt; devuelve <a href="/x">, lo que confirma que el recorrido de ida y vuelta no pierde información.

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

HTML trata ciertos caracteres como sintaxis. Un < abre una etiqueta, un > la cierra, un ampersand & inicia una referencia de carácter y una comilla delimita un valor de atributo. Cuando insertas texto corriente que contiene esos caracteres, el analizador puede leerlo como marcado: un comentario que incluye <b> se muestra de pronto en negrita, y un ampersand suelto puede tragarse la palabra siguiente o romper la página. El escape sustituye cada carácter reservado por una referencia de carácter — un código corto e inequívoco, como &lt; para < — para que el navegador muestre el carácter original en lugar de interpretarlo. Hay dos familias de referencias. Las referencias con nombre usan una palabra fácil de recordar, como &amp;, &copy; o &nbsp;, mientras que las referencias numéricas dan el punto de código en decimal (&#38;) o en hexadecimal (&#x26;). Ambas escriben el mismo carácter, pero la forma numérica funciona incluso para caracteres que la especificación nunca nombró, como la mayoría de los emojis. Los cinco caracteres que siempre deben escaparse en el texto son & , < , > , " y ' . Las dos comillas importan sobre todo dentro de los valores de atributo, pero escaparlas en todas partes es una opción segura y predecible. El escape es también la primera línea de defensa contra el cross-site scripting (XSS). Si una entrada no confiable como <script>alert(1)</script> se escribe en una página sin escapar, el navegador la ejecuta. Escapar los ángulos convierte esa misma entrada en texto visible. Ahora bien, el escape no es una estrategia de seguridad completa: sanear HTML enriquecido exige una biblioteca consciente del contexto, y el escape correcto para un contexto (un cuerpo HTML) es incorrecto para otro (una consulta de URL o una cadena de JavaScript). Para texto sin formato insertado en HTML, en cambio, el escape correcto es necesario y suficiente. Todas las conversiones de esta página se ejecutan en JavaScript nativo en tu propio dispositivo. Nada se envía a un servidor, algo importante cuando el texto contiene credenciales, datos personales o contenido no publicado.

Aplicaciones habituales

1. Contenido generado por usuarios: un comentario que dice «me encanta <3 este producto» debe aparecer tal cual. Escapar el ángulo produce «me encanta &lt;3 este producto», y el navegador muestra el texto en lugar de abrir una etiqueta.

2. Ejemplos de código y tutoriales: para mostrar <div class="box"> en una lección escribes &lt;div class=&quot;box&quot;&gt;, y al decodificarlo recuperas el fragmento limpio para copiar.

3. Valores de atributo: un título de producto con una comilla doble, como Widget 12" Deluxe, rompe title="Widget 12" Deluxe"; codificar la comilla como &quot; mantiene el atributo intacto y el marcado válido.

4. Canales antiguos o solo ASCII: algunos clientes de correo, pasarelas SMS y gestores de contenido antiguos solo manejan ASCII, así que Café, € y → se convierten en referencias numéricas como Caf&#233;, &euro; y &#8594; sin dejar de ser legibles.

5. Limpieza de contenido extraído o de un CMS: una descripción guardada como Gr&uuml;&szlig;e aus M&uuml;nchen es ilegible para el código; al decodificarla se obtiene Grüße aus München para analizarla, traducirla o contar palabras.

Referencias con nombre, decimales y hexadecimales

Todo carácter puede escribirse de tres maneras. La letra A se escribe simplemente A, su punto de código es U+0041 y sus referencias son &#65; (decimal) y &#x41; (hexadecimal). Unos pocos caracteres tienen además un nombre fácil de recordar: &amp; para &, &lt; para <, &quot; para " , &apos; para ' y &nbsp; para un espacio duro. Las referencias con nombre se leen bien en el código fuente; las numéricas funcionan siempre, incluso para caracteres que la especificación nunca nombró.

Esta herramienta emite &amp;, &lt;, &gt;, &quot; y &#39; al codificar. El apóstrofe se escribe &#39; en lugar de &apos; porque &apos; no se reconoce en la antigua especificación HTML4 y &#39; se acepta en todas partes. Al decodificar reconoce las entidades con nombre habituales, las referencias decimales como &#233; para é y las hexadecimales como &#xE9; para ese mismo carácter. Un ampersand seguido de algo que no es una referencia válida se deja intacto, de modo que el texto corriente nunca se altera.

Errores frecuentes que conviene evitar

La primera trampa es la doble codificación. Si codificas Tom &amp; Jerry una segunda vez obtienes Tom &amp;amp; Jerry, que se muestra literalmente como Tom &amp; Jerry. Codifica siempre texto sin formato, nunca texto ya escapado. Si tienes dudas, pega el valor en modo Decodificar para ver qué mostraría el navegador.

La segunda trampa es la doble decodificación. Decodificar &amp;lt; una vez da correctamente &lt;; decodificarlo otra vez da < y destruye información que debía seguir visible. Esta herramienta hace una sola pasada de izquierda a derecha, así que cada referencia se resuelve exactamente una vez y una entidad recién producida nunca se reinterpreta.

La tercera trampa es confundir escape con saneamiento. El escape hace visibles los caracteres reservados, pero no elimina scripts del HTML que pretendes mostrar como marcado enriquecido. Para eso necesitas un saneador específico con una lista blanca estricta. Por último, recuerda el contexto: el escape correcto para un cuerpo HTML es incorrecto para una cadena de consulta de URL o un valor JSON.

Escape, codificación de URL y saneamiento

Tres transformaciones se confunden a menudo. El escape HTML convierte los caracteres especiales para el analizador — & , < , > , " y ' — en referencias de caracteres: eso es lo que hace esta herramienta. La codificación por porcentaje, llamada también codificación de URL y producida por encodeURIComponent, sustituye los caracteres no permitidos o con significado estructural en una URL por secuencias %XX: un espacio pasa a %20 y & pasa a %26.

El saneamiento persigue un objetivo distinto. Analiza HTML no confiable y elimina elementos, atributos y protocolos peligrosos conservando un subconjunto seguro del marcado, de modo que un editor de texto enriquecido puede aceptar negritas y enlaces pero descartar scripts y manejadores de eventos. Usa el escape HTML para texto sin formato mostrado en una página, la codificación de URL para direcciones y cadenas de consulta, y un saneador probado cuando debas aceptar HTML enriquecido de los usuarios. Elegir la transformación equivocada es una causa habitual de páginas rotas y de fallos de seguridad.

Utilidades Relacionadas

• Formateador JSON — Validador en Línea
• Codificador y Decodificador Base64 en Línea
• Generador de Contraseñas Seguras en Línea
• Codificador y Decodificador de URL
• Generador de UUID — Crear UUID v4 en Línea
• Eliminar Líneas Duplicadas — Herramienta Gratis