¿Qué es la codificación URL? Percent-encoding explicado (2026)

Cada carácter de una dirección web debe pertenecer a un conjunto pequeño y seguro en el que navegadores, servidores, proxies y logs estén de acuerdo. Cuando necesitas poner en un enlace algo fuera de ese conjunto -un espacio, un ampersand, una letra acentuada o un emoji- primero hay que codificarlo en URL. La codificación URL, también llamada percent-encoding, es el estándar que reemplaza esos caracteres por un signo de porcentaje seguido de su valor de byte en hexadecimal, de modo que un espacio se convierte en %20 y & en %26. Esta guía explica qué es la codificación URL, qué caracteres la necesitan, cómo funciona el formato %XX y la elección entre encodeURIComponent y encodeURI que confunde a la mayoría de desarrolladores - con ejemplos que puedes copiar.

¿Qué es la codificación URL?

La codificación URL es una forma de representar caracteres en un Uniform Resource Locator (URL) usando solo un conjunto limitado y universalmente seguro. El estándar de URL (RFC 3986) permite que solo un puñado de caracteres aparezcan de forma literal: las letras ASCII A-Z y a-z, los dígitos 0-9 y unos pocos símbolos. Todo lo demás -espacios, la mayor parte de la puntuación y cualquier carácter no inglés- debe convertirse en una secuencia percent-encoded antes de poder viajar con seguridad dentro de un enlace.

La razón es que las URLs pasan por muchos sistemas, y algunos caracteres tienen un significado especial para esos sistemas. Un espacio puede eliminarse en silencio o convertirse en +, un # inicia el fragmento y un ? inicia la query string. El percent-encoding elimina la ambigüedad convirtiendo cualquier carácter problemático en un código que significa "esto es data, no un delimitador".

Caracteres reservados vs no reservados

La especificación de URL divide los caracteres en grupos. Saber cuál es cuál te dice exactamente qué hay que codificar y qué debe dejarse igual.

Caracteres no reservados (nunca se codifican)

Estos caracteres siempre son seguros de usar tal cual en cualquier parte de una URL y no deben codificarse:

• Letras mayúsculas: A-Z
• Letras minúsculas: a-z
• Dígitos: 0-9
• Cuatro símbolos: guion (-), guion bajo (_), punto (.) y tilde (~)

Caracteres reservados (codifica cuando se usan como data)

Los caracteres reservados tienen un trabajo especial en una URL: actúan como delimitadores que separan una parte de otra. Solo son seguros cuando están haciendo ese trabajo. Si un carácter reservado aparece dentro de un valor en lugar de como separador, debe codificarse para que no se confunda con un delimitador.

• Delimitadores de path y authority: / : @
• Delimitadores de query y fragment: ? # & =
• Sub-delimitadores: ! $ & ' ( ) * + , ; =

Por ejemplo, el & en https://example.com/search?q=cats&sort=new separa dos parámetros de query, así que se queda literal. Pero si buscas la frase "cats & dogs", el & dentro de ese valor debe convertirse en %26; de lo contrario el servidor lee &dogs como un segundo parámetro.

El formato %XX explicado

El percent-encoding sigue una regla simple: un signo de porcentaje (%) seguido de dos dígitos hexadecimales. Esos dos dígitos son el valor de un solo byte escrito en base 16 (00 a FF, es decir 0-255 en decimal). Para codificar un carácter, buscas su valor de byte y lo escribes tras el %.

• El espacio es 32 en decimal, que es 20 en hexadecimal: un espacio se convierte en %20.
• El ampersand & es 38 decimal = 26 hex: & se convierte en %26.
• El signo igual = es 61 decimal = 3D hex: = se convierte en %3D.
• El signo de interrogación ? es 63 decimal = 3F hex: ? se convierte en %3F.

Los caracteres en el rango ASCII (0-127) son un solo byte, así que siempre se codifican en una secuencia %XX. Los caracteres fuera de ASCII se convierten primero a sus bytes UTF-8 -que pueden ser dos, tres o cuatro bytes- y cada byte se convierte en su propio %XX. Por eso la letra acentuada é (U+00E9) se codifica como %C3%A9: su forma UTF-8 son los dos bytes C3 y A9.

encodeURIComponent vs encodeURI - cuándo usar cada uno

JavaScript te da dos funciones integradas para percent-encoding, y elegir la incorrecta es el error más común de codificación URL. La diferencia es qué caracteres reservados dejan intactos.

encodeURIComponent - para un solo valor

encodeURIComponent codifica casi todo lo que no sea un carácter no reservado, incluidos los delimitadores reservados / ? : @ & = + $ #. Úsalo para un solo trozo de data que insertas en una URL: un valor de parámetro de query, un segmento de path o un campo de formulario. Como escapa & y =, un valor que los contenga no romperá la query string alrededor.

encodeURI - para una URL completa

encodeURI está pensado para codificar una URL completa ya ensamblada. Deja intactos los delimitadores reservados - :, /, ?, #, & y = pasan sin cambios - para que la URL conserve su estructura. Solo codifica caracteres que nunca son válidos en ninguna parte, como espacios. Úsalo cuando tienes una URL completa que puede contener un carácter ilegal y no quieres alterar sus partes.

Dos notas prácticas: encodeURIComponent no escapa los caracteres ! ' ( ) *, así que un parser estricto puede necesitar que los reemplaces a mano. Y nunca codifiques una cadena que ya está codificada: hacerlo convierte cada % en %25, así que %20 se convierte en %2520, un bug clásico de doble codificación que produce enlaces rotos.

Ejemplos prácticos

Así se ven caracteres comunes antes y después de codificar. Cada línea se lee como carácter - qué es - forma codificada.

• Espacio - separador de palabras - %20 (también se usa + para espacios en query strings; ver abajo)
• & - ampersand - %26
• = - signo igual - %3D
• ? - signo de interrogación - %3F
• / - barra - %2F
• # - hash / inicio de fragmento - %23
• + - signo más - %2B
• é - e con acento agudo (no ASCII, 2 bytes UTF-8) - %C3%A9
• 😀 - emoji (4 bytes UTF-8) - %F0%9F%98%80

Codificar un valor con espacios y símbolos

Digamos que quieres pasar la frase de búsqueda "cats & dogs = fun" como un solo valor de query. Ejecutar encodeURIComponent sobre ella produce cats%20%26%20dogs%20%3D%20fun. Cada espacio, el & y el = se escapan, así que todo se trata como un valor en lugar de tres parámetros separados.

Un ejemplo completo de query string

Juntándolo todo, imagina una página de búsqueda que recibe una query y una categoría. Codificas cada valor por separado y luego armas la URL:

• Valor de query en bruto: cats & dogs
• Valor de categoría en bruto: pets/animals
• Query codificada: cats%20%26%20dogs
• Categoría codificada: pets%2Fanimals
• URL final: https://example.com/search?q=cats%20%26%20dogs&category=pets%2Fanimals

Fíjate en que el & y el = entre q=... y category=... se dejan literales porque están haciendo su trabajo como delimitadores, mientras que el & dentro del valor de query y el / dentro del valor de categoría se codifican porque son data. Eso es exactamente lo que obtienes al codificar cada valor con encodeURIComponent y luego unir las piezas tú mismo.

Preguntas frecuentes

¿Qué es la codificación URL en términos simples?

La codificación URL es una forma de incluir con seguridad caracteres especiales en una dirección web reemplazándolos por un % y un código de dos dígitos. Como las URLs solo pueden contener un conjunto limitado de caracteres, cualquier otra cosa -como un espacio, un ampersand o una letra acentuada- se convierte en su equivalente percent-encoded (un espacio se convierte en %20) para que el enlace siga siendo válido.

¿Por qué las URLs tienen %20?

%20 es la forma percent-encoded de un espacio. Los espacios no están permitidos en una URL, así que cuando un enlace contiene uno -a menudo de un nombre de archivo o un término de búsqueda- se reemplaza por %20. Al cargar la página, el servidor o el navegador decodifica %20 de vuelta a un espacio.

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

encodeURIComponent codifica un solo valor y escapa los delimitadores reservados (& = ? / #), por lo que es adecuado para un parámetro de query o segmento de path. encodeURI codifica una URL completa y deja esos delimitadores intactos para que la dirección conserve su estructura. Usa encodeURIComponent para las partes y encodeURI para una URL completa.

¿Qué caracteres hay que codificar en URL?

Solo los caracteres no reservados - A-Z, a-z, 0-9 y - _ . ~ - son siempre seguros. Todo lo demás debe codificarse cuando aparece dentro de un valor: espacios, la mayor parte de la puntuación, los delimitadores reservados (/ ? : @ & = + $ , ; # ! ' ( ) *), y todos los caracteres no ASCII como letras acentuadas y emoji.

¿La codificación URL es lo mismo que cifrado o Base64?

No. La codificación URL no es cifrado y no aporta seguridad: es una transformación de texto totalmente reversible que solo hace que los caracteres viajen con seguridad en una URL, y cualquiera puede decodificarla al instante. También difiere de Base64, que re-codifica datos binarios en un alfabeto de 64 caracteres con otro propósito.

¿Cómo decodifico una cadena codificada en URL?

Invierte el proceso: cada secuencia %XX se convierte de vuelta al byte que representa, y los bytes consecutivos se leen como UTF-8 para recuperar caracteres como é o emoji. En JavaScript, decodeURIComponent hace esto; una herramienta de decodificación URL hace lo mismo en tu navegador y muestra un error claro si la entrada tiene una secuencia mal formada como un % suelto.