URL Encoding Codificar y Decodificar
Herramienta gratuita de URL Encoding Codificar y Decodificar en línea. Procesamiento 100% local — tus datos nunca salen de tu dispositivo.
El resultado se mostrará aquí...
Entrada → Codificar
Usage Guide
Acerca de la codificación URL
La codificación URL (también conocida como Codificación Porcentual, definida en RFC 3986) es un método de codificación que convierte caracteres especiales en URLs a caracteres seguros. Las URLs solo permiten un subconjunto de caracteres ASCII (letras, números y algunos caracteres especiales); otros caracteres (como espacios, caracteres especiales) deben codificarse antes de poder usarse en URLs. La codificación URL convierte cada byte al formato %XX, donde XX es la representación hexadecimal de ese byte. La codificación URL es fundamental para el desarrollo web y se usa ampliamente en parámetros URL, envíos de formularios, solicitudes HTTP y otros escenarios.
Pasos de uso
La codificación y decodificación URL es muy sencilla:
Reglas de codificación
La codificación URL sigue estas reglas:
encodeURIComponent() de JavaScript maneja correctamente la mayoría de los casos.Ejemplos de codificación comunes
Aquí están las codificaciones URL para algunos caracteres comunes:
Escenarios de aplicación
La codificación URL se usa ampliamente en varios escenarios de desarrollo web:
FAQ
Q: ¿Cuál es la diferencia entre codificación URL y Base64?
A: La codificación URL y Base64 se usan ambas para manejar caracteres especiales, pero para diferentes propósitos. Codificación URL: 1) Propósito: Permitir que los caracteres especiales se transmitan de forma segura en URLs. 2) Formato: %XX (p.ej., %20). 3) Escenarios: Parámetros URL, envíos de formularios. Base64: 1) Propósito: Convertir datos binarios a formato de texto. 2) Formato: A-Z, a-z, 0-9, +, /. 3) Escenarios: Incrustar imágenes, JWT, adjuntos de correo electrónico. Consejo de selección: 1) Parámetros URL: usar codificación URL. 2) Datos binarios: usar Base64. 3) Ambos pueden combinarse (p.ej., codificar en Base64 y luego URL).
Q: ¿Los espacios deben codificarse como %20 o +?
A: La codificación de espacios depende de la ubicación en la URL. %20: 1) Usado en la parte de la ruta URL (p.ej., /ruta/hola%20mundo). 2) Usado en fragmentos (después de #). 3) encodeURIComponent() codifica los espacios como %20. +: 1) Usado en cadenas de consulta (después de ?, p.ej., ?q=hola+mundo). 2) El formato application/x-www-form-urlencoded usa +. Recomendación: Use encodeURIComponent() para codificar uniformemente como %20; los servidores manejarán automáticamente + y %20.
Q: ¿Cómo usar la codificación URL en JavaScript?
A: JavaScript proporciona tres funciones de codificación URL con diferentes propósitos. encodeURIComponent(): Codifica componentes URI (valores de parámetros), recomendado. Codifica todos los caracteres especiales (excepto A-Z, a-z, 0-9, -, _, ., ~). encodeURI(): Codifica URI completos, preserva caracteres de estructura URI (como :, /, ?, &). Adecuado para codificar URLs completas. escape(): Obsoleto, no recomendado. Ejemplo:// Codificar valor de parámetro (recomendado)
encodeURIComponent('Hola Mundo'); // 'Hola%20Mundo'
// Codificar URL completa
encodeURI('https://example.com/hola mundo'); // 'https://example.com/hola%20mundo'
Decodificación: Use decodeURIComponent() o decodeURI().
Q: ¿Cómo se codifican en URL los caracteres no ASCII?
A: Los caracteres no ASCII deben convertirse primero a bytes UTF-8, luego codificarse en formato %XX. Ejemplo: “Hola” → bytes UTF-8: 48 6F 6C 61 → URL: Hola (ASCII sin cambios). Para “¡Hola!” → %C2%A1Hola%21. JavaScript: encodeURIComponent('¡Hola!') maneja la conversión UTF-8 automáticamente. Nota: 1) Diferentes codificaciones producen resultados distintos. 2) El servidor debe decodificar UTF-8 correctamente. 3) Las aplicaciones web modernas usan uniformemente codificación UTF-8.
Q: ¿La codificación URL aumenta el tamaño de los datos?
A: Sí, la codificación URL aumenta el tamaño de los datos, con el incremento dependiendo del tipo de carácter. Caracteres ASCII: 1) Letras, números: no codificados, tamaño sin cambios. 2) Caracteres especiales (como &, =): codificados como 3 bytes (%XX), aumento del 200%. Caracteres no ASCII: 1) Codificación UTF-8: 1-4 bytes por carácter, cada byte como %XX (3 bytes). Optimización: 1) Usar solicitudes POST para transmitir grandes cantidades de datos. 2) Considerar el formato JSON (sin necesidad de codificación URL).
Q: ¿Cuál es la diferencia entre codificación URL y codificación de entidades HTML?
A: La codificación URL y la codificación de entidades HTML se usan en diferentes escenarios. Codificación URL: 1) Propósito: Transmitir caracteres especiales en URLs. 2) Formato: %XX (p.ej., %20). 3) Escenarios: Parámetros URL, envíos de formularios. Codificación de entidades HTML: 1) Propósito: Mostrar caracteres especiales en HTML. 2) Formato: &nombre; (p.ej., <) o &#número; (p.ej., <). 3) Escenarios: Contenido HTML, valores de atributos. Ejemplo: < → Codificación URL: %3C, Entidad HTML: < o <.
Use Cases
Recomendado: Parámetros de consulta URL
Pasar parámetros en cadenas de consulta URL es la aplicación más común de la codificación URL. Las cadenas de consulta comienzan con ?, los parámetros se separan con &, y los nombres y valores de parámetros se conectan con =. Si los valores de los parámetros contienen caracteres especiales (como espacios, &, =), deben codificarse en URL. El uso de encodeURIComponent() de JavaScript codifica correctamente los valores de los parámetros.
- ✅ Usar encodeURIComponent() para codificar valores de parámetros
- ✅ Usar la API URLSearchParams para construir cadenas de consulta
- ✅ El servidor usa las funciones de decodificación correspondientes
- ❌ No concatenar manualmente los parámetros URL
- 💡 Considerar solicitudes POST para grandes cantidades de datos
Recomendado: Envío de formularios HTML
Los formularios HTML envían datos usando codificación application/x-www-form-urlencoded, una variante de la codificación URL. Los datos del formulario se envían en formato key=value&key=value, con espacios codificados como +, y otros caracteres especiales como %XX. Los navegadores modernos manejan automáticamente la codificación de formularios; los desarrolladores normalmente no necesitan codificar manualmente. Sin embargo, al construir datos de formulario con JavaScript (como la API Fetch), se necesita codificación manual.
- ✅ Usar la API FormData para manejar automáticamente la codificación
- ✅ Usar URLSearchParams para construir datos de formulario
- ✅ El servidor decodifica correctamente los datos del formulario
- 💡 Para cargas de archivos, usar multipart/form-data
Recomendado: Parámetros de ruta RESTful API
En las APIs RESTful, los identificadores de recursos pueden contener caracteres especiales (como espacios, barras), que requieren codificación URL. Por ejemplo, /usuarios/Juan Pérez debe codificarse como /usuarios/Juan%20P%C3%A9rez. Use encodeURIComponent() para codificar parámetros de ruta, asegurando que la API pueda analizar correctamente los identificadores de recursos.
- ✅ Usar encodeURIComponent() para codificar parámetros de ruta
- ✅ El servidor decodifica correctamente los parámetros de ruta
- ✅ Considerar usar IDs en lugar de nombres como identificadores de recursos
- 💡 Usar bibliotecas de plantillas URL (como path-to-regexp)
Recomendado: Autenticación OAuth
Parámetros como redirect_uri y state en flujos de autenticación OAuth necesitan codificación URL. Por ejemplo, redirect_uri es típicamente una URL completa que contiene parámetros de consulta, que debe codificarse como un todo antes de pasarse como valor de parámetro. Use encodeURIComponent() para codificar estos parámetros, asegurando que el servidor OAuth pueda analizarlos correctamente.
- ✅ Usar encodeURIComponent() para codificar redirect_uri
- ✅ Usar encodeURIComponent() para codificar el parámetro state
- ✅ Verificar que el redirect_uri decodificado sea válido
- 💡 Usar bibliotecas OAuth (como Passport.js) para manejo automático
Recomendado: Consultas de motores de búsqueda
Las palabras clave de búsqueda necesitan codificación URL cuando se pasan en URLs. Por ejemplo, la búsqueda en Google de “hola mundo” tiene la URL https://www.google.com/search?q=hola+mundo. Los motores de búsqueda manejan automáticamente la codificación URL; los usuarios normalmente no necesitan codificar manualmente. Sin embargo, al construir URLs de búsqueda (como redirecciones automáticas), se debe usar encodeURIComponent() para codificar las palabras clave de búsqueda.
- ✅ Usar encodeURIComponent() para codificar palabras clave de búsqueda
- ✅ Manejar múltiples palabras clave (separadas por espacios o +)
- ✅ Considerar usar las APIs de los motores de búsqueda
- 💡 Usar URLSearchParams para construir URLs de búsqueda
Recomendado: Servicios de acortamiento de URL
Los servicios de acortamiento de URL (como bit.ly) necesitan codificar URLs largas antes de almacenarlas y transmitirlas. Las URLs largas pueden contener caracteres especiales (como parámetros de consulta), que requieren codificación URL. Use encodeURIComponent() para codificar URLs largas, asegurando que el servicio de acortamiento pueda analizarlas y restaurarlas correctamente. Tenga en cuenta que los servicios de acortamiento típicamente codifican la URL codificada nuevamente, por lo que la decodificación puede requerir múltiples pasadas.
- ✅ Usar encodeURIComponent() para codificar URLs largas
- ✅ Verificar que las URLs decodificadas sean válidas
- ✅ Manejar casos de codificación múltiple
- 💡 Usar las APIs de servicios de acortamiento
Recomendaciones de mejores prácticas
- Usar encodeURIComponent() para codificar valores de parámetros URL, usar encodeURI() para codificar URLs completas.
- Los espacios en cadenas de consulta se codifican como +, en rutas como %20; usar encodeURIComponent() para codificar uniformemente como %20.
- Los caracteres no ASCII usan codificación UTF-8; asegurarse de que el servidor decodifique correctamente.
- No concatenar manualmente los parámetros URL; usar la API URLSearchParams o la API FormData para el manejo automático de la codificación.
- La codificación URL aumenta el tamaño de los datos; para grandes cantidades de datos, usar solicitudes POST o formato JSON.
- Verificar que las URLs decodificadas sean válidas para prevenir ataques de inyección URL.