Codificador y Decodificador de URL

Cómo Usar el Codificador y Decodificador de URL

Ingrese o pegue cualquier texto en el campo de entrada y haga clic en Codificar para convertirlo a formato codificado para URL. La herramienta proporciona dos formatos de salida simultáneamente: Codificado por Componente usa el equivalente de encodeURIComponent() de JavaScript, que codifica todos los caracteres especiales incluyendo delimitadores de URL como /, ? y #. URL Codificada Completa usa el equivalente de encodeURI(), que preserva los caracteres estructurales de la URL mientras codifica todo lo demás. Para revertir el proceso, pegue texto codificado en el campo de entrada y haga clic en Decodificar. Ambos campos de salida mostrarán el mismo resultado decodificado.

La cuadrícula de estadísticas debajo de la salida muestra la longitud de caracteres y el tamaño en bytes tanto de la entrada como de la salida, ayudándole a entender cómo la codificación afecta el tamaño de los datos. Cada campo de salida tiene su propio botón Copiar para acceso rápido al portapapeles. Esta herramienta se ejecuta completamente en su navegador sin enviar datos a ningún servidor.

¿Qué Es la Codificación URL?

La codificación URL, formalmente conocida como codificación porcentual, está definida en el RFC 3986 como el mecanismo para representar caracteres en un Identificador de Recurso Uniforme (URI) que no están permitidos en la sintaxis del URI. Las URLs solo pueden contener un conjunto limitado de caracteres ASCII: letras, dígitos y un puñado de caracteres especiales (- _ . ~) conocidos como caracteres no reservados. Cualquier otro carácter debe codificarse como un signo de porcentaje seguido de dos dígitos hexadecimales que representan su valor en bytes. Por ejemplo, un espacio se codifica como %20, un ampersand como %26 y un signo más como %2B.

Los caracteres reservados como : / ? # [ ] @ ! $ & ' ( ) * + , ; = tienen un significado estructural especial en las URLs. Cuando estos caracteres aparecen como datos en lugar de delimitadores, deben codificarse porcentualmente. Por ejemplo, si una consulta de búsqueda contiene un ampersand, debe codificarse como %26 para que no se interprete como un separador de parámetros.

encodeURIComponent vs encodeURI

JavaScript proporciona dos funciones integradas para la codificación URL, cada una con un propósito diferente. encodeURIComponent() codifica todos los caracteres excepto los caracteres no reservados (A-Z, a-z, 0-9, - _ . ~). Esto lo hace ideal para codificar componentes individuales de URL como valores de parámetros de consulta, segmentos de ruta o identificadores de fragmento. Codifica caracteres como / ? # & = porque estos romperían la estructura si se dejan sin codificar dentro de un valor de componente.

encodeURI() codifica un URI completo mientras preserva los caracteres que dan estructura a la URL: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Úselo cuando tenga una URL completa que puede contener caracteres no ASCII (como letras acentuadas o espacios en la ruta) pero cuyos delimitadores estructurales deben permanecer intactos. Por ejemplo, encodeURI("https://example.com/ruta con espacios") codifica correctamente solo los espacios mientras mantiene los delimitadores :// y /.

Espacios: + vs %20

El tratamiento de espacios en URLs tiene dos convenciones. El estándar de codificación porcentual (RFC 3986) codifica los espacios como %20, y esta es la codificación correcta para segmentos de ruta e identificadores de fragmento. El formato application/x-www-form-urlencoded, utilizado por formularios HTML al enviar datos mediante GET o POST, codifica los espacios como +. Este formato está definido en la especificación HTML y es lo que los navegadores usan al serializar datos de formularios en cadenas de consulta. Tanto %20 como + son representaciones válidas de un espacio, pero pertenecen a diferentes contextos. Al construir URLs programáticamente, prefiera %20 para consistencia con el RFC 3986.

Casos de Uso Comunes

La codificación URL es esencial en muchos escenarios de desarrollo web. Al construir URLs con parámetros de consulta dinámicos, cada valor de parámetro debe codificarse para evitar que los caracteres especiales rompan la estructura de la URL. Las solicitudes de API frecuentemente requieren codificación de valores de parámetros, especialmente al pasar contenido generado por usuarios, términos de búsqueda o nombres de archivos. Las URLs de redirección incrustadas como parámetros de consulta deben codificarse completamente para que todo el destino de redirección se trate como un solo valor. Los datos de formularios enviados en solicitudes GET son codificados automáticamente por los navegadores, pero el código del lado del servidor a menudo necesita codificar valores al construir URLs para redirecciones, llamadas a API o generación de enlaces.

Otro escenario común es la codificación de datos para uso en URIs data:, bookmarklets y asignaciones de JavaScript location.href. La codificación también es crítica al construir firmas OAuth, URLs firmadas con HMAC y cualquier manipulación de URL sensible a la seguridad donde una codificación incorrecta podría llevar a discrepancias en las firmas o vulnerabilidades de inyección.

Preguntas Frecuentes

¿Qué es la codificación URL?

La codificación URL (codificación porcentual) convierte caracteres no permitidos en URLs a un signo de porcentaje seguido de dos dígitos hexadecimales. Los espacios se convierten en %20, los ampersands en %26.

¿Cuál es la diferencia entre encodeURI y encodeURIComponent?

encodeURI preserva los caracteres estructurales de la URL como :, /, ? y #. encodeURIComponent codifica todo excepto los caracteres no reservados, haciéndolo adecuado para codificar valores individuales de parámetros de consulta.

¿Por qué los espacios se codifican como + o %20?

El formato application/x-www-form-urlencoded usa + para espacios en envíos de formularios. El estándar RFC 3986 usa %20. Ambos son válidos en diferentes contextos.

¿Cuándo debería codificar texto para URL?

Siempre que incluya entrada de usuario o caracteres especiales en parámetros de consulta, segmentos de ruta o identificadores de fragmento. Esto evita que caracteres como & y = sean interpretados como delimitadores de URL.

¿Puedo codificar una URL completa?

No. Codificar una URL completa escaparía los caracteres estructurales como :// y / haciendo la URL inválida. Codifique solo los componentes individuales como valores de parámetros y segmentos de ruta.