Saltar al contenido

Codificador y decodificador de URLBeta

Codifica y decodifica URLs y cadenas de consulta. Compara encodeURIComponent y encodeURI con ejemplos y analiza la estructura de una URL completa.

Dirección
0 caracteres · 0 líneas
Tipo de codificación
encodeURIComponent escapa absolutamente todo, incluidos los delimitadores de URL como /, ?, & y #, así que úsalo para el valor de un solo parámetro de consulta. encodeURI deja esos delimitadores tal cual y solo escapa el resto, por eso se usa para una URL completa. Ejemplo: "a b/c?d" → component da "a%20b%2Fc%3Fd", full da "a%20b/c?d".

0 caracteres · 0 líneas

Analizador de la estructura de la URL

Analizador de la estructura de la URL

Introduce una URL completa para verla dividida en protocolo, host, ruta y parámetros de consulta.

https://example.com/path?query=1&lang=es

Cómo se usa

En la pestaña de codificar, escribe o pega texto o una parte de una URL y el resultado aparece justo debajo. En la pestaña de decodificar, pega una cadena codificada como %C3%B1 y se convierte de nuevo en los caracteres originales. El resultado se actualiza mientras escribes, y puedes copiarlo con el botón de al lado.

encodeURIComponent frente a encodeURI

Ambas funciones convierten los caracteres que no son seguros en una URL en secuencias codificadas por porcentaje (un % seguido de un código hexadecimal), pero escapan cantidades distintas.

  • encodeURIComponent (un valor): escapa absolutamente todo, incluidos los caracteres que se usan como delimitadores de URL, como /, ?, &, #, : y @. Úsalo para construir una sola parte de una URL, como el valor de un parámetro de consulta. Por ejemplo, para poner el término de búsqueda a/b&c como valor de consulta, hay que codificarlo como a%2Fb%26c para que el & no se confunda con el inicio del siguiente parámetro.
  • encodeURI (URL completa): pensado para una URL completa que ya tiene su estructura, con /, ?, &, #, etc. Deja esos delimitadores tal cual y solo escapa el resto, como los espacios o los caracteres no ASCII. Usar encodeURIComponent en una URL completa también codificaría el / y el ? que forman su estructura, rompiéndola.

Por ejemplo, codificar a b/c?d de las dos formas da resultados distintos: component da a%20b%2Fc%3Fd, full da a%20b/c?d. La elección depende de si estás construyendo una sola parte de una URL o una URL completa.

«+ como espacio» (application/x-www-form-urlencoded)

Los valores que envía un <form> HTML por GET o POST usan el formato application/x-www-form-urlencoded, que por convención codifica los espacios como + en lugar de %20. Al activar «+ como espacio», la codificación usa + en lugar de %20, y la decodificación interpreta + como espacio. Actívala solo cuando trabajes con datos de un formulario o con el cuerpo de una petición application/x-www-form-urlencoded, y déjala desactivada para una ruta de URL o un nombre de archivo normales. Con la opción desactivada, + se trata como un carácter literal.

Analizador de la estructura de la URL

Pega una URL completa (con protocolo, como https://) en el cuadro del analizador y se descompone en protocolo, host, ruta, hash y una tabla de parámetros de consulta. Los valores de consulta se decodifican automáticamente por porcentaje, así que una cadena como ?q=hola%20mundo se vuelve legible. Si la misma clave aparece varias veces (?tag=a&tag=b), cada aparición se muestra en su propia fila.

Errores habituales

La codificación por porcentaje debe tener dos dígitos hexadecimales después de cada % (como en %20). Un % suelto, un % seguido de caracteres que no son hexadecimales (%zz) o una secuencia %XX rota para un carácter multibyte mostrarán un error de decodificación. Decodificar con un tipo distinto (component/full) del que se usó para codificar también puede cambiar el significado, así que asegúrate de elegir el mismo.

Privacidad

Todo lo que introduces se procesa exclusivamente dentro de este navegador y nunca se envía a un servidor. Todo desaparece al cerrar la página.

Fuentes

Preguntas frecuentes

¿Cuándo debo usar encodeURIComponent en lugar de encodeURI?

encodeURIComponent escapa absolutamente todo, incluidos los delimitadores de URL como /, ?, & y #, así que úsalo para construir una sola parte de una URL, como el valor de un parámetro de consulta. encodeURI deja esos delimitadores tal cual y solo escapa el resto, por lo que se usa para una URL completa que ya tiene su estructura. Usar encodeURI en el valor de una consulta es arriesgado, porque un & o un = dentro del valor podría confundirse con un delimitador.

¿Por qué aparece el error «la codificación por porcentaje no es válida» al decodificar?

La codificación por porcentaje debe tener el formato %XX, donde XX son dos dígitos hexadecimales. Un % suelto, un % seguido de caracteres que no son hexadecimales, o una secuencia %XX%XX rota para un carácter multibyte no se pueden convertir de vuelta al carácter original, por eso aparece este error.

¿Cuándo debo activar «+ como espacio»?

Cuando un formulario HTML envía valores por GET o POST (application/x-www-form-urlencoded), es habitual codificar los espacios como + en lugar de %20. Activa esta opción cuando trabajes con la cadena de consulta o el cuerpo de la petición de un formulario, para que + se interprete correctamente como espacio. Déjala desactivada para una ruta de URL normal.

¿Qué información muestra el analizador de la estructura de la URL?

Pega una URL completa que empiece por https:// y verás el protocolo, el host (dominio y puerto), la ruta, el hash (después de #) y los parámetros de consulta en una tabla de clave y valor. Los valores se decodifican automáticamente por porcentaje, así que una cadena de consulta codificada se vuelve legible.