Codificador y Decodificador URL con Analizador Integrado

¿Qué es la codificación URL (codificación porcentual)?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Características principales

Ejemplos

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

Cómo usar

1. 1

   Introduce una URL o cadena codificada

   Pega una URL en el área decodificada para codificarla, o pega una cadena codificada con porcentaje en el área codificada para decodificarla. Selecciona el modo encodeURI o encodeURIComponent según tu caso de uso.

2. 2

   Consulta los resultados y la estructura analizada

   La otra área se actualiza instantáneamente mientras escribes. El analizador de URL descompone la URL en protocolo, host, puerto, ruta, parámetros de consulta y fragmento — todos editables.

3. 3

   Copia o reconstruye

   Haz clic en Copiar para copiar el resultado codificado o decodificado. Edita los componentes individuales de la URL y haz clic en Reconstruir para construir una nueva URL a partir de las partes modificadas.

Errores comunes

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Casos de uso comunes

Depuración de URLs ilegibles

Decodifica URLs codificadas con porcentaje de registros de servidor, mensajes de error o herramientas de desarrollo del navegador para leer el texto original legible.

Desarrollo de APIs

Codifica valores de parámetros de consulta para llamadas API REST, asegurando que caracteres especiales como &, = y espacios no rompan la URL de la solicitud.

Configuración de flujos OAuth

Codifica correctamente redirect_uri y otros parámetros URL en URLs de autorización OAuth para prevenir fallos de autenticación.

URLs internacionalizadas

Codifica y decodifica URLs que contienen caracteres chinos, japoneses, coreanos, árabes u otros caracteres no ASCII para aplicaciones web internacionalizadas.

Análisis de enlaces de marketing

Decodifica URLs de seguimiento de campañas de email y plataformas publicitarias para entender los parámetros UTM incrustados y las cadenas de redirección.

Inspección de estructura URL

Analiza URLs complejas en sus componentes — protocolo, host, puerto, ruta, parámetros de consulta y fragmento — para análisis y modificación.

Detalles técnicos

Caracteres reservados y no reservados RFC 3986

RFC 3986 define caracteres no reservados (A-Z, a-z, 0-9, -, ., _, ~) que nunca necesitan codificación, y caracteres reservados (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) que sirven como delimitadores URI y deben codificarse con porcentaje cuando se usan como datos.

Flujo de codificación de bytes UTF-8

Los caracteres no ASCII primero se convierten a su punto de código Unicode, luego se codifican como bytes UTF-8 (1-4 bytes según el rango del punto de código), y finalmente cada byte se codifica con porcentaje como %XX. Por ejemplo: é (U+00E9) → bytes UTF-8 C3 A9 → %C3%A9. El emoji 🎉 (U+1F389) → bytes UTF-8 F0 9F 8E 89 → %F0%9F%8E%89.

Terminología URL vs URI

Un URI (Identificador Uniforme de Recurso) es el término general para cualquier cadena identificadora. Una URL (Localizador Uniforme de Recurso) es un URI que también especifica el mecanismo de acceso (como https://). Las reglas de codificación de RFC 3986 se aplican a todos los URIs. La API de JavaScript usa la terminología URI (encodeURI, decodeURI), mientras que el uso cotidiano prefiere URL.

Buenas prácticas

Usa el modo correcto para cada tarea

Usa encodeURIComponent() para claves y valores de parámetros de consulta individuales. Usa encodeURI() solo cuando tengas una URL completa y quieras codificar caracteres inseguros sin romper su estructura. Nunca uses encodeURI() en valores de parámetros que puedan contener &, = u otros caracteres reservados.

Evita la doble codificación

Antes de codificar una cadena, verifica si ya está codificada. Busca secuencias % existentes. Codificar una cadena ya codificada convierte %20 en %2520, %3D en %253D, etc. Si no estás seguro, decodifica primero y luego codifica una vez.

Decodifica en el lado del servidor

La mayoría de los frameworks web decodifican automáticamente los parámetros URL antes de que tu código de aplicación los vea. Evita decodificar manualmente parámetros que tu framework ya ha decodificado — esto puede causar problemas si el valor original contenía secuencias de porcentaje literales.

Codifica valores para OAuth y firma de API

Las cadenas base de firma OAuth 1.0 y muchos algoritmos de firma API requieren codificación porcentual estricta RFC 3986. Usa encodeURIComponent() y luego reemplaza los caracteres restantes que no codifica (como !, ', (, ), *) con sus equivalentes codificados con porcentaje si la especificación lo requiere.

Preguntas frecuentes