Codificar / decodificar URL: codificación porcentual y analizador de URL
Codifica o decodifica texto con codificación porcentual para URL en modo componente, URL completa o formulario, y edita los parámetros de consulta de una URL en una tabla.
encodeURIComponent: para un valor de consulta o un segmento de ruta. Escapa todo excepto A–Z a–z 0–9 - _ . ! ~ * ' ( ).
name%3DZo%C3%AB%20%26%20Tom%20%2F%20caf%C3%A9%3Fid%3D42%23top
Analizador de URL y editor de la cadena de consulta
| Protocolo | https: |
|---|---|
| Host | shop.example.com |
| Puerto | 8443 |
| Ruta | /search/trail%20shoes |
| Consulta | ?q=trail+running&size=10&color=blue%20%26%20green&utm_source=newsletter |
| Fragmento | #reviews |
| Origen | https://shop.example.com:8443 |
https://shop.example.com:8443/search/trail%20shoes#reviews
Funciona por completo en tu navegador. Nada de lo que introduces se nos envía ni se guarda. Ver todas las herramientas gratis.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este codificador y decodificador de URL convierte texto a codificación porcentual y viceversa, el escape del tipo %20 que permite que los espacios, los ampersands, los acentos y los emojis viajen de forma segura dentro de una URL. Ofrece las tres codificaciones que los desarrolladores confunden de verdad: el modo componente para un único valor de consulta o segmento de ruta (encodeURIComponent), el modo URL completa, que no toca la puntuación propia de la URL (encodeURI), y el modo formulario, que es lo que envían los formularios HTML y URLSearchParams, con + para el espacio.
La decodificación es estricta a propósito. Donde el decodeURIComponent del navegador solo lanza "URI malformed", esta herramienta te dice qué secuencia % está rota y dónde, y si los bytes no son UTF-8 válido (una señal habitual de que algo anterior usó Latin-1). Debajo del codificador, el analizador de URL divide cualquier URL en sus partes y enumera los parámetros de consulta en una tabla editable que reconstruye la URL a medida que la cambias.
Cómo usarla
- Elige Codificar o Decodificar y después el modo: Componente para un valor que vas a poner en una URL, URL completa para una dirección entera, Formulario para datos application/x-www-form-urlencoded.
- Escribe o pega el texto. El resultado se actualiza mientras escribes; marca "Cada línea por separado" para una lista.
- Si la decodificación falla, lee el mensaje: indica la posición y la secuencia rota.
- Para inspeccionar o editar una URL, pégala en el analizador, cambia, añade o quita parámetros de consulta y copia la URL reconstruida.
Preguntas frecuentes
¿Qué diferencia hay entre encodeURI y encodeURIComponent?
encodeURIComponent escapa todo excepto letras, dígitos y - _ . ! ~ * ' ( ), así que es seguro para una sola parte de una URL, como un valor de consulta que podría contener & o =. encodeURI supone que le das una URL completa y deja intactos los caracteres que estructuran una URL (: / ? # @ & = + $ , ;). Usar encodeURI con un valor es un error clásico: un & dentro del valor lo divide entonces en dos parámetros.
¿Un espacio debe ser %20 o +?
Los dos son correctos, en sitios distintos. En la cadena de consulta de un envío de formulario (application/x-www-form-urlencoded), un espacio es +, y un signo más literal debe ser %2B. En cualquier otro sitio, incluida la ruta y la mayoría de las cadenas de consulta montadas a mano, un espacio es %20 y + significa un signo más literal. Si un servidor muestra signos más donde debería haber espacios, o al revés, las dos partes no se ponen de acuerdo sobre qué regla se aplica.
¿Por qué me sale el error "URI malformed"?
O bien un signo % no va seguido de dos dígitos hexadecimales (por ejemplo, "100%" o "%zz"), o bien los bytes forman UTF-8 no válido, como %E9 solo, que es é en Latin-1 pero no en UTF-8. Un signo de porcentaje literal debe escribirse %25. Esta herramienta indica la posición exacta para que veas cuál de los dos es.
¿Qué caracteres hay que codificar en una URL?
RFC 3986 solo permite que aparezcan sin codificar en cualquier sitio las letras, los dígitos y - . _ ~. Los caracteres reservados (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) deben codificarse cuando aparecen dentro de un valor y no como estructura. Todo lo demás, incluidos los espacios, las comillas, < >, las letras no ASCII y los emojis, debe codificarse siempre, como los bytes UTF-8 del carácter.
¿La codificación de URL es una forma de cifrado?
No. La codificación porcentual es un sistema de escape reversible sin clave; cualquiera puede decodificarla al instante. Nunca confíes en ella para ocultar un token o datos personales en una URL. Recuerda también que las URL acaban en el historial del navegador, en los registros del servidor y en las cabeceras Referer, así que los secretos no deben ir en las cadenas de consulta en absoluto.
Referencia de codificación: lo que deja intacto cada modo
• Componente (encodeURIComponent): deja A–Z a–z 0–9 - _ . ! ~ * ' ( ). Úsalo para valores de consulta, segmentos de ruta y todo lo que se construye concatenando.
• URL completa (encodeURI): además deja ; , / ? : @ & = + $ #. Úsalo solo para limpiar una URL completa que contiene espacios o caracteres no ASCII.
• Formulario (application/x-www-form-urlencoded): deja A–Z a–z 0–9 * - . _ y convierte los espacios en +. Es lo que generan URLSearchParams.toString() y los formularios HTML.
• Conjunto no reservado de RFC 3986: A–Z a–z 0–9 - . _ ~. La interpretación más estricta; codificar además ! ' ( ) * siempre es seguro.
Los caracteres no ASCII siempre se codifican como sus bytes UTF-8: é es %C3%A9, y el emoji 🌲 son cuatro bytes, %F0%9F%8C%B2.
Doble codificación y otros errores habituales
La doble codificación ocurre cuando una cadena ya codificada se vuelve a codificar: %20 se convierte en %2520, porque el propio % se escapa como %25. Si ves %25 seguido de dos dígitos hexadecimales en una URL, algo se codificó dos veces. Decodifica una vez y comprueba si el resultado sigue conteniendo secuencias %.
El error contrario es construir una URL concatenando cadenas sin codificar nada. Una búsqueda de "fish & chips" envía entonces q=fish y un parámetro suelto llamado " chips". Construir las cadenas de consulta con URLSearchParams, o codificar cada valor con encodeURIComponent, evita ambos problemas.
Por último, decodificar la entrada del usuario e insertarla después en HTML es como empieza el cross-site scripting reflejado. Decodifica para mostrar solo después de escapar para HTML; el codificador de entidades HTML se encarga de ese paso.
Herramientas gratis relacionadas
- Generador de enlaces UTM — Crea enlaces de seguimiento UTM limpios y coherentes para saber exactamente qué campañas te traen clientes.
- Codificador / decodificador Base64 — Codifica texto o archivos en Base64, convierte imágenes en data URI con fragmentos CSS e <img>, y decodifica Base64 a un archivo con vista previa. Nada sale de tu navegador.
- Codificador de entidades HTML — Escapa texto para HTML con entidades con nombre o numéricas, decodifica referencias del tipo & de vuelta a caracteres y busca en una tabla de referencia de entidades.
- Decodificador de JWT — Decodifica la cabecera y el payload de un JWT, lee la caducidad en lenguaje claro, verifica firmas HS, RS, PS y ES o firma un token nuevo. Nada sale de tu navegador.