Código

Guía del codificador y decodificador URL: codificación porcentual, espacios y UTF-8

ToolMellow ·

La codificación URL representa determinados bytes mediante escapes porcentuales para que el texto encaje en la parte prevista de una URL o en un valor de formulario. ToolMellow ofrece tres tipos: Componente URL, Valor de formulario y URL completa. Pega el texto, elige el tipo y pulsa Codificar o Decodificar. La conversión es local: no abre la dirección, no la solicita por la red y no la valida.

El resultado correcto depende de dónde utilizarás el texto. Un valor de consulta, una cadena de consulta completa y una URL ya construida son entradas diferentes. Esta guía presenta ejemplos exactos, explica UTF-8 y los errores habituales y ayuda a evitar que cambies separadores o decodifiques más capas de las previstas. Las direcciones y los resultados de ejemplo son ilustraciones, no recursos consultados.

Codificador y decodificador URL

Cómo codificar o decodificar texto URL

Abre el codificador y decodificador URL y pega el valor completo que quieres transformar. En Tipo de codificación, elige Componente URL (%20 para espacios), Valor de formulario (+ para espacios) o URL completa (conservar separadores). Codificar y Decodificar actúan sobre toda la entrada del editor; escribir por sí solo no la convierte.

Lee la salida antes de usar Copiar resultado o Descargar. Usar resultado como entrada permite aplicar otra operación cuando el resultado cabe dentro del límite de entrada. Cambiar la entrada o el tipo de codificación elimina el resultado anterior. Ajustar líneas cambia solo la distribución visual: no introduce saltos de línea ni altera los escapes porcentuales.

  • Para un único valor de consulta o segmento de ruta, elige el modo de componente en lugar de codificar toda una consulta ya compuesta.
  • Usa el modo de valor de formulario solo cuando el formato de destino espere las reglas de valores de application/x-www-form-urlencoded.
  • Para una dirección ya construida cuyos separadores deban conservar su significado, considera el modo de URL completa; sigue sin ser un analizador ni un validador de URL.

Elige un componente, un valor de formulario o una URL completa

Codificar un componente impide que la puntuación reservada de un valor funcione como estructura de la URL. El modo de valor de formulario utiliza las reglas de codificación de formularios para un único valor y no devuelve el nombre del parámetro. El modo de URL completa conserva separadores como los dos puntos, la barra, el signo de interrogación, el ampersand, el signo de igual y el indicador de fragmento.

Elige el tipo según la aplicación de destino, no según qué salida parezca más corta. Codificar toda una consulta como un único valor o dejar separadores expuestos dentro de un valor puede cambiar su significado. Esta herramienta no divide una consulta pegada en pares de nombre y valor ni decide qué parte pertenece al host, la ruta, la consulta o el fragmento.

Elige un componente, un valor de formulario o una URL completa
TipoEntrada útilAlcance de la implementación
Componente URLUn valor de consulta o segmento de rutaEscapa la puntuación reservada y añade escapes estrictos para cinco marcas
Valor de formularioUn único valor codificado para formularioCodifica con URLSearchParams; al decodificar sustituye el + literal antes de una decodificación porcentual estricta
URL completaUna dirección ya construidaencodeURI/decodeURI; su propio conjunto reservado, sin validación completa de URL

RFC 3986: sintaxis URI, caracteres no reservados y codificación porcentualWHATWG URL: análisis y serialización de formularios codificados para URLECMAScript: encodeURI y decodeURI

Qué hace la codificación porcentual con los bytes

Un escape porcentual es un signo de porcentaje seguido de dos dígitos hexadecimales que representan un byte. Los caracteres Unicode pueden necesitar varios bytes UTF-8, por lo que un carácter visible puede requerir varios escapes. El espacio ASCII es 20 en hexadecimal y se representa como %20 al codificar componentes o URL completas; la codificación de formulario lo representa como +.

Estos ejemplos fijos muestran por qué importa el tipo elegido. Un signo de más literal y un espacio codificado son valores distintos. La barra y la puntuación de consulta de la tercera fila pertenecen a un componente en un caso y siguen siendo caracteres estructurales en el modo de URL completa. Ninguna de las dos acciones solicita la dirección.

Qué hace la codificación porcentual con los bytes
Texto de entradaSalida de componenteSalida de valor de formularioSalida de URL completa
a b+ca%20b%2Bca+b%2Bca%20b+c
cafécaf%C3%A9caf%C3%A9caf%C3%A9
a/b?x=1#parta%2Fb%3Fx%3D1%23parta%2Fb%3Fx%3D1%23parta/b?x=1#part
~*~%2A%7E*~*
😀%F0%9F%98%80%F0%9F%98%80%F0%9F%98%80

RFC 3986: sintaxis URI, caracteres no reservados y codificación porcentualWHATWG Encoding: UTF-8 y decodificación de textoWHATWG URL: análisis y serialización de formularios codificados para URLECMAScript: encodeURI y decodeURI

Modo de componente y escapes estrictos

La codificación de componentes de ToolMellow utiliza encodeURIComponent y además escapa !, el apóstrofo, (, ) y *. Su conjunto ASCII que permanece literal son las letras, los dígitos y -._~. Esto se aproxima más al conjunto no reservado de RFC 3986 que encodeURIComponent sin modificar, que deja esas cinco marcas adicionales intactas.

Por ejemplo, el valor red&blue=1 se convierte en red%26blue%3D1. Se puede suministrar ese valor como valor de un parámetro sin que su ampersand se convierta en otro separador de consulta. La decodificación de componentes utiliza decodeURIComponent: decodifica los caracteres reservados con escapes porcentuales, mientras que un + literal sigue siendo un signo de más. No analiza pares de consulta ni normaliza una URL completa.

RFC 3986: sintaxis URI, caracteres no reservados y codificación porcentualECMAScript: encodeURIComponent y decodeURIComponent

Valores de formulario: más, espacios, tilde y asterisco

La codificación de valores de formulario sigue la serialización de URLSearchParams para un único valor. Un espacio se convierte en +, un más literal en %2B y un asterisco literal se conserva. La tilde se convierte en %7E. Son diferencias esperadas: la codificación de formularios tiene su propio conjunto permitido, que no coincide exactamente con el del modo de componente.

Al decodificar, primero se sustituyen los signos de más literales por espacios y después se llama a decodeURIComponent, que es estricto. Así, a+b%2Bc se convierte en a b+c: %2B pasa a ser un más después de la sustitución inicial y no se transforma en otro espacio. Es un decodificador de valores, no el analizador permisivo de consultas de URLSearchParams. Los escapes mal formados y el UTF-8 codificado mediante porcentajes no válido producen un error en lugar de repararse.

WHATWG URL: análisis y serialización de formularios codificados para URLECMAScript: encodeURIComponent y decodeURIComponent

El modo de URL completa conserva separadores y escapes reservados

La codificación de URL completas utiliza encodeURI. Conserva los separadores de una dirección ya construida y escapa los espacios y el resto del texto que corresponde. Por ejemplo, https://example.com/a b?q=a+b#part se convierte en https://example.com/a%20b?q=a+b#part. El más sigue siendo un más en este paso; cómo una aplicación analice después la consulta es un paso distinto.

La decodificación de URL completas utiliza decodeURI, que conserva los escapes de su propio conjunto reservado ;/?:@&=+$,#. Por ejemplo, %2F, %26 y %23 conservan sus escapes, mientras que %20 se convierte en un espacio. Este conjunto más antiguo no incluye todos los caracteres reservados de RFC 3986: %5B y %5D se decodifican como corchetes y la codificación de URL completas escapa los corchetes literales. Este modo no analiza una URL, no valida un host ni un esquema, no normaliza un host IPv6, no convierte dominios mediante IDNA y no solicita la dirección.

ECMAScript: encodeURI y decodeURIWHATWG URL: análisis de URL, hosts y URLSearchParamsRFC 3986: sintaxis URI, caracteres no reservados y codificación porcentual

UTF-8, Unicode y la diferencia del texto de entrada sin escapes

La codificación representa mediante escapes porcentuales los bytes UTF-8 de los caracteres que necesitan un escape. En café, la última letra requiere dos bytes UTF-8 representados por %C3%A9; el emoji 😀 utiliza cuatro bytes. El límite del editor cuenta unidades de código UTF-16 de JavaScript, por lo que la longitud en bytes, en unidades de código y en caracteres visibles no tiene por qué coincidir. Esta conversión no normaliza el texto Unicode.

Todos los tipos de codificación rechazan un sustituto Unicode sin pareja. La decodificación de URL completas también comprueba primero que la entrada sin procesar sea Unicode bien formado. La decodificación de componentes y formularios no realiza esa comprobación independiente de la cadena: las unidades de código literales sin escapes pueden pasar sin cambios, mientras que las secuencias de bytes con escapes porcentuales deben decodificarse como UTF-8 válido. No interpretes una decodificación correcta como validación general de cada carácter literal ni como garantía de una URL segura.

ECMAScript: encodeURIComponent y decodeURIComponentECMAScript: encodeURI y decodeURIECMAScript: isWellFormed de StringWHATWG Encoding: UTF-8 y decodificación de texto

Escapes mal formados, UTF-8 no válido y resultados inesperados

Un escape necesita exactamente dos dígitos hexadecimales después de cada signo de porcentaje, y las secuencias de bytes con escapes deben cumplir las reglas UTF-8 del decodificador. Un signo de porcentaje literal que quieras codificar se convierte en %25; uno aislado en la entrada para decodificar es un error. La herramienta no recorta silenciosamente los espacios en blanco ni decodifica repetidamente hasta que el texto parezca legible.

Comprueba el tipo y el valor original completo antes de cambiar caracteres. Los espacios o saltos de línea sin escapes siguen siendo datos de entrada y pueden cambiar una codificación. Si has copiado un atributo HTML, una cadena JSON entre comillas o un cuerpo de solicitud completo, analiza ese formato externo por separado. Sus delimitadores y reglas de escape no se convierten automáticamente en reglas de codificación porcentual.

Escapes mal formados, UTF-8 no válido y resultados inesperados
Entrada o síntomaMotivoQué hacer después
% o %2Escape porcentual incompletoComprueba el valor completo copiado
%GGDígitos de escape no hexadecimalesExamina el origen del valor
%FFEl byte con escape no es UTF-8 válidoIdentifica la codificación esperada o si son datos binarios
a+b conserva el más en modo de componenteEl más literal no es un espacio en ese modoUsa el modo de formulario solo si lo espera el receptor
Decodificar la URL completa conserva %2FdecodeURI preserva el separador reservadoDecodifica como componente el valor individual correspondiente

ECMAScript: encodeURIComponent y decodeURIComponentECMAScript: encodeURI y decodeURIRFC 3986: sintaxis URI, caracteres no reservados y codificación porcentual

Por qué aparece %25 y cuándo es incorrecto decodificar otra vez

Codificar un signo de porcentaje que ya está codificado añade otra capa: codificar %2F en modo de componente produce %252F. Una sola decodificación de componente de %252F devuelve %2F; una segunda devuelve /. Cada paso cambia una capa de codificación. Que aparezca %25 no demuestra por sí solo un error, porque una aplicación puede transportar intencionadamente texto codificado dentro de otro valor.

Identifica la capa que espera tu aplicación en lugar de decodificar repetidamente hasta que aparezca puntuación. Una segunda decodificación de componente puede convertir datos en una barra o un separador estructural. La decodificación de URL completas puede conservar intencionadamente esos separadores con escapes; el ejemplo de componente no implica que todos los modos eliminen todos los escapes al repetir la operación. La herramienta no conoce las reglas de enrutamiento ni de autorización de una aplicación.

RFC 3986: sintaxis URI, caracteres no reservados y codificación porcentualECMAScript: encodeURIComponent y decodeURIComponentECMAScript: encodeURI y decodeURI

Consultas, segmentos de ruta y uso seguro en aplicaciones

Para un parámetro de consulta, mantén separados el nombre del parámetro y la estructura de la consulta de su valor. Una API para construir URL, como URL y URLSearchParams, puede ayudar a componer y serializar una dirección real. Esta herramienta solo transforma el texto suministrado: no valida el nombre del host, no acorta enlaces, no sigue redirecciones y no decide qué esquema debe permitir tu aplicación.

La codificación porcentual es una representación reversible, no cifrado, hash, escape HTML ni autorización. Codificar un esquema peligroso no convierte un enlace en fiable, y decodificar un valor no lo hace seguro para insertarlo como HTML o código ejecutable. Aplica las reglas de validación y escape del contexto de destino y evita incluir secretos reales en las URL de ejemplo compartidas.

WHATWG URL: análisis de URL, hosts y URLSearchParamsWHATWG URL: análisis y serialización de formularios codificados para URLRFC 3986: sintaxis URI, caracteres no reservados y codificación porcentual

Límites de entrada, crecimiento de la salida y archivos de texto locales

El límite de entrada es de 1,000,000 unidades de código UTF-16, no un millón de bytes UTF-8 ni de grafemas visibles. Los escapes pueden alargar la salida: un millón de espacios ASCII producen tres millones de caracteres en modo de componente. Copiar y Descargar siguen disponibles para salidas que superan el límite de entrada, pero Usar resultado como entrada no puede cargar ese resultado demasiado grande. La memoria disponible en el navegador sigue siendo un límite práctico.

Abrir un archivo local utiliza File.text() para leer texto UTF-8. Se rechazan los archivos de 4,000,000 bytes o más y el texto leído que supere 1,000,000 unidades UTF-16. La lectura normal de texto elimina un BOM UTF-8 inicial y sustituye las secuencias UTF-8 mal formadas, por lo que no es codificación binaria que preserve cada byte ni decodificación en cualquier juego de caracteres. Una extensión de archivo no demuestra su codificación.

API File de W3C: lectura de Blob como textoWHATWG Encoding: UTF-8 y decodificación de textoECMAScript: isWellFormed de String

Copiar, descargar texto, vaciar y privacidad

Descargar guarda el resultado como texto UTF-8 en toolmellow-result.txt, no como solicitud, informe o página web abierta. Una conversión vacía correcta también habilita Copiar resultado y Descargar. Si el acceso al portapapeles no está disponible, selecciona la salida y cópiala manualmente. Para una comprobación sencilla, codifica texto conocido, reutiliza el resultado si cabe y decodifícalo con el mismo tipo.

Vaciar restablece la entrada, el resultado, los errores, el contenido de búsqueda y sustitución y el historial del editor, mientras conserva Tipo de codificación y Ajustar líneas. El contenido de trabajo permanece en la memoria de la página, no en el historial de una cuenta. Actualizar o cerrar el espacio de trabajo descarta ese estado; los archivos descargados permanecen en el dispositivo. Vaciar no garantiza un borrado forense de la memoria del navegador o del sistema operativo.

La conversión se ejecuta en un worker local del navegador y no envía el texto URL introducido, el contenido de los archivos seleccionados ni los resultados a un servidor de conversión. Cargar el sitio sí envía metadatos habituales de solicitudes al alojamiento y utiliza Google Analytics para las visitas, incluidas cookies e información del navegador y del dispositivo. La conversión local no significa anonimato, tráfico cero ni ausencia de registros de infraestructura; consulta la página de privacidad del sitio.

Integra el codificador y decodificador URL con su enlace de atribución

Elige el idioma de la página y abre la sección de integración situada debajo del espacio de trabajo. Copia o descarga el fragmento HTML proporcionado en un área de tu sitio que permita iframes y scripts externos. Incluye el iframe de ToolMellow, el script de ajuste de tamaño y un enlace visible de vuelta a la página de la herramienta en el idioma correspondiente. Conserva ese enlace de atribución.

Previsualiza la integración en una pantalla estrecha y comprueba los permisos del portapapeles y que tu plataforma admita recursos externos. La integración conserva los tres tipos, el alcance de texto y los límites: no es una API de conversión en el servidor ni un servicio que solicite URL. El enlace proporcionado utiliza nofollow y noopener, por lo que su presencia no garantiza un mejor posicionamiento en buscadores.

Preguntas frecuentes

¿Cómo codifico texto para una URL?

Elige el tipo según el destino: Componente URL para un valor individual o segmento de ruta, Valor de formulario para la serialización de formularios o URL completa para una dirección construida cuyos separadores deban conservarse. Pega el texto y pulsa Codificar. La herramienta no abre la dirección.

¿Cómo decodifico un valor codificado para URL?

Elige el tipo correspondiente y pulsa Decodificar. Los modos de componente y formulario decodifican estrictamente el UTF-8 con escapes porcentuales; el de formulario primero convierte el más literal en espacio. El modo de URL completa conserva los escapes de su propio conjunto reservado. No divide una consulta en pares.

¿Cuándo significa un espacio el signo más en una URL?

En esta herramienta, solo la decodificación de Valor de formulario sustituye el más literal por un espacio. La decodificación de Componente URL y URL completa conserva el más literal. El análisis de application/x-www-form-urlencoded tiene su propia regla para el más; no es universal para todos los componentes URL.

¿Cuál es la diferencia entre %20 y +?

%20 es el escape porcentual del byte de espacio ASCII. La serialización de formularios utiliza el más para un espacio y %2B para un más literal. El formato de destino determina si el más debe interpretarse como espacio.

¿Por qué la decodificación de URL completas conserva %2F?

Ese modo utiliza decodeURI y conserva los escapes de su propio conjunto ;/?:@&=+$,#, que incluye la barra, el ampersand y el indicador de fragmento. No incluye todos los caracteres reservados de RFC 3986: los escapes de corchetes se decodifican como corchetes. El modo de componente también decodifica los escapes de esos separadores. Elige según la parte prevista de la dirección y no uses el modo de URL completa para normalizar hosts IPv6.

¿En qué se diferencia de encodeURIComponent?

El modo de componente de ToolMellow también escapa el signo de exclamación, el apóstrofo, los paréntesis y el asterisco. Solo las letras, los dígitos y -._~ permanecen literales. Los modos de formulario y URL completa utilizan otras reglas de serialización; no son nombres intercambiables.

¿Por qué falla la decodificación URL?

Los escapes incompletos o no hexadecimales y el UTF-8 con escapes porcentuales no válido producen un error. Comprueba el valor original, el tipo esperado y el formato externo. La herramienta no repara escapes mal formados ni elige silenciosamente otra codificación de caracteres.

¿La herramienta siempre valida Unicode al decodificar?

No. La decodificación de URL completas comprueba que la entrada sin procesar sea Unicode bien formado; la de componentes y formularios no comprueba por separado las unidades de código literales sin escapes. Las secuencias de bytes con escapes porcentuales se decodifican estrictamente como UTF-8. Una decodificación correcta no es validación completa de una URL.

¿Por qué mi URL contiene %25?

%25 representa un signo de porcentaje. Puede aparecer al volver a codificar texto ya codificado, como cuando %2F pasa a %252F en modo de componente. Determina la capa esperada; decodificar repetidamente puede transformar datos en puntuación estructural.

¿Puedo pegar una consulta completa en Valor de formulario?

La herramienta la trata como un único valor, no como una secuencia de pares de parámetros. Al codificar, escapa los separadores dentro de ese valor; al decodificar, no extrae nombres y valores. Utiliza un analizador adecuado de URL o consultas para gestionar toda su estructura.

¿Puedo codificar un archivo local o reutilizar una salida grande?

El control de archivos lee texto UTF-8 de un archivo de menos de 4,000,000 bytes y permite hasta 1,000,000 unidades UTF-16 de entrada. No codifica archivos binarios en bruto. La salida puede ser mayor y aún se puede copiar o descargar, pero no puede reutilizarse como entrada si supera el límite.

¿La codificación URL es cifrado?

No. La codificación porcentual es una representación reversible y no aporta secreto ni autorización. Tampoco es hash, escape HTML ni garantía de una URL segura. Aplica las reglas de validación y escape del contexto de destino.

¿Puedo integrar el codificador y decodificador URL en mi sitio?

Usa el fragmento HTML localizado debajo del espacio de trabajo, conserva el enlace visible a ToolMellow y confirma que se admitan iframes y scripts. La integración mantiene los tres tipos y los límites locales de texto; no es una API de conversión en el servidor ni un servicio que solicite URL.

Fuentes y lecturas adicionales

Ponlo en práctica.