Codificación de URL explicada — Todo lo que necesitas saber

Introducción: ¿qué es la codificación de URL?

La codificación de URL, también conocida como codificación porcentual o percent-encoding, es un mecanismo para convertir caracteres en un formato que puede transmitirse de forma segura en las URL. Dado que las URL solo pueden contener un conjunto limitado de caracteres del conjunto de caracteres ASCII, cualquier carácter fuera de este conjunto — o cualquier carácter con significado especial en la sintaxis de URL — debe codificarse.

¿Alguna vez has visto %20 en una URL y te has preguntado qué significa? ¿O has tenido problemas con enlaces rotos que contienen caracteres especiales? Esta guía te dará una comprensión profunda de cómo funciona la codificación de URL y por qué es importante.

¿Necesitas codificar o decodificar rápidamente una URL? Prueba nuestra herramienta Codificador/Decodificador de URL — maneja todas las reglas de codificación automáticamente.

Por qué existe la codificación de URL

Las URL fueron diseñadas en los primeros días de internet cuando los sistemas tenían soporte limitado para conjuntos de caracteres. La especificación original de URL (RFC 1738, publicada en 1994) restringía las URL a un pequeño subconjunto de caracteres ASCII. Fue una decisión práctica que garantizaba que las URL funcionarían en diferentes sistemas, redes y protocolos.

El problema es que el mundo real requiere mucho más que el ASCII básico:

• Espacios en nombres de archivos: mi documento.pdf necesita codificarse como mi%20documento.pdf
• Caracteres internacionales: español, chino, árabe y otros scripts necesitan codificación
• Caracteres especiales en datos: los parámetros de consulta pueden contener caracteres como &, =, # que tienen significado especial en las URL
• Datos binarios: a veces es necesario incluir datos binarios en las URL

La codificación de URL resuelve todos estos problemas proporcionando un mecanismo de escape universal.

Cómo funciona la codificación porcentual

El algoritmo de codificación porcentual es sencillo:

1. Tomar el carácter a codificar
2. Convertirlo a su representación en bytes (usando UTF-8 para caracteres no ASCII)
3. Para cada byte, escribir un % seguido de dos dígitos hexadecimales

Ejemplos

Carácter	Bytes UTF-8	Codificado
Espacio	0x20	%20
!	0x21	%21
#	0x23	%23
$	0x24	%24
&	0x26	%26
+	0x2B	%2B
/	0x2F	%2F
=	0x3D	%3D
?	0x3F	%3F
@	0x40	%40

Caracteres multibyte

Los caracteres no ASCII requieren múltiples bytes en UTF-8 y por tanto producen múltiples secuencias codificadas en porcentaje:

Carácter	Bytes UTF-8	Codificado
é (con acento)	0xC3 0xA9	%C3%A9
ñ	0xC3 0xB1	%C3%B1
á	0xC3 0xA1	%C3%A1
Signo euro	0xE2 0x82 0xAC	%E2%82%AC
Emoji (sonrisa)	0xF0 0x9F 0x98 0x80	%F0%9F%98%80

Prueba a codificar estos caracteres con nuestra herramienta URL Encoder.

Estructura de URL y caracteres reservados

Para entender correctamente la codificación de URL, necesitas comprender la estructura de una URL:

https://user:pass@www.example.com:8080/path/to/page?key=value&foo=bar#section
|_____|  |______| |_______________|____||___________|_________________|_______|
esquema  info usr     host         puerto  ruta         consulta      fragmento

Caracteres reservados

Los caracteres reservados tienen significados especiales en las URL. Si quieres usarlos como datos (en lugar de como delimitadores), deben codificarse en porcentaje.

Carácter	Propósito en URL	Forma codificada
:	Separa esquema, puerto, info de usuario	%3A
/	Separa segmentos de ruta	%2F
?	Inicia cadena de consulta	%3F
#	Inicia fragmento	%23
@	Separa info de usuario del host	%40
&	Separa parámetros de consulta	%26
=	Separa clave de valor en consulta	%3D
+	Espacio en cadenas de consulta (legado)	%2B

Caracteres no reservados

Estos caracteres nunca necesitan codificarse en ninguna parte de una URL:

• Letras: A-Z y a-z
• Dígitos: 0-9
• Guión: -
• Punto: .
• Guión bajo: _
• Tilde: ~

El carácter espacio: %20 vs +

La codificación de espacios es uno de los aspectos más confusos de la codificación de URL:

• %20: La codificación porcentual correcta para un espacio, usada en segmentos de ruta
• +: Una codificación alternativa para el espacio, pero solo válida en cadenas de consulta (del formato application/x-www-form-urlencoded)

Ruta:    https://example.com/mis%20documentos/nombre%20archivo.pdf  (correcto)
Ruta:    https://example.com/mis+documentos/nombre+archivo.pdf      (INCORRECTO)

Consulta: https://example.com/search?q=hola+mundo                   (correcto)
Consulta: https://example.com/search?q=hola%20mundo                 (también correcto)

Mejor práctica: Usa %20 en segmentos de ruta y + o %20 en cadenas de consulta. Ante la duda, %20 siempre funciona.

Codificación de URL en diferentes lenguajes de programación

JavaScript

JavaScript proporciona varias funciones para la codificación de URL, cada una con un alcance diferente:

// encodeURIComponent - Codificar un componente de URI (valor de parámetro)
encodeURIComponent('hola mundo & adiós')
// Resultado: "hola%20mundo%20%26%20adi%C3%B3s"

// encodeURI - Codificar una URI completa (preserva caracteres de estructura URL)
encodeURI('https://example.com/ruta con espacios?q=hola mundo')
// Resultado: "https://example.com/ruta%20con%20espacios?q=hola%20mundo"

// decodeURIComponent - Decodificar un componente de URI
decodeURIComponent('hola%20mundo%20%26%20adi%C3%B3s')
// Resultado: "hola mundo & adiós"

Diferencia clave entre encodeURI y encodeURIComponent:

Función	NO codifica	Caso de uso
encodeURI	:, /, ?, #, &, =, @, +	Codificar una URL completa
encodeURIComponent	Solo caracteres no reservados	Codificar un valor de parámetro

La API URLSearchParams

JavaScript moderno proporciona URLSearchParams para manejar cadenas de consulta:

// Crear cadenas de consulta
const params = new URLSearchParams();
params.set('nombre', 'Juan García');
params.set('ciudad', 'Madrid');
params.set('intereses', 'programación & diseño');
console.log(params.toString());

// Analizar cadenas de consulta
const url = new URL('https://example.com/search?q=hola+mundo&page=2');
console.log(url.searchParams.get('q'));   // "hola mundo"
console.log(url.searchParams.get('page')); // "2"

Python

from urllib.parse import quote, unquote, urlencode, parse_qs

# Codificar una cadena para usar en una ruta URL
quote('hola mundo/ruta')  # 'hola%20mundo/ruta' (/ no codificado)
quote('hola mundo/ruta', safe='')  # 'hola%20mundo%2Fruta'

# Decodificar una cadena codificada en porcentaje
unquote('hola%20mundo')  # 'hola mundo'

# Construir cadenas de consulta
params = {'q': 'hola mundo', 'categoria': 'libros & medios'}
urlencode(params)  # 'q=hola+mundo&categoria=libros+%26+medios'

Java

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

// Codificar
String encoded = URLEncoder.encode("hola mundo & más", StandardCharsets.UTF_8);
// Resultado: "hola+mundo+%26+m%C3%A1s"

// Decodificar
String decoded = URLDecoder.decode("hola+mundo+%26+m%C3%A1s", StandardCharsets.UTF_8);
// Resultado: "hola mundo & más"

PHP

// Codificación URL (espacios como +)
urlencode('hola mundo & más');  // "hola+mundo+%26+m%C3%A1s"

// Codificación URL sin formato (espacios como %20)
rawurlencode('hola mundo & más');  // "hola%20mundo%20%26%20m%C3%A1s"

// Construir cadena de consulta
http_build_query(['q' => 'hola mundo', 'pagina' => 1]);
// "q=hola+mundo&pagina=1"

UTF-8 y caracteres internacionales en URLs

El estándar IRI

Los Identificadores de Recursos Internacionalizados (IRI, definidos en RFC 3987) extienden las URL para soportar caracteres Unicode. Sin embargo, cuando se transmiten por la red, los IRI se convierten a URI usando codificación porcentual UTF-8.

IRI:  https://example.com/café
URI:  https://example.com/caf%C3%A9

IRI:  https://example.com/search?q=España
URI:  https://example.com/search?q=Espa%C3%B1a

Nombres de dominio internacionalizados (IDN)

Los nombres de dominio con caracteres no ASCII usan codificación Punycode:

Unicode:  https://españa.es
Punycode: https://xn--espaa-rta.es

Problemas comunes y soluciones

Problema 1: Doble codificación

La doble codificación ocurre cuando una URL ya codificada se codifica nuevamente:

Original:         hola mundo
Primera codificación: hola%20mundo
Doble codificación:   hola%2520mundo  (%25 es la codificación de %)

Solución: Verificar si la entrada ya está codificada antes de codificarla:

function safeEncodeURIComponent(str) {
  try {
    const decoded = decodeURIComponent(str);
    if (decoded !== str) {
      return str; // Ya codificado
    }
  } catch (e) {
    // La decodificación falló -- codificar de nuevo
  }
  return encodeURIComponent(str);
}

Problema 2: Codificar toda la URL en lugar de componentes

// INCORRECTO: Codificar toda la URL
const url = 'https://api.example.com/search?q=hola mundo';
const encoded = encodeURIComponent(url);
// "https%3A%2F%2Fapi.example.com%2Fsearch%3Fq%3Dhola%20mundo"
// ¡Esto es completamente inservible como URL!

// CORRECTO: Codificar solo el componente que lo necesita
const baseUrl = 'https://api.example.com/search';
const query = encodeURIComponent('hola mundo');
const correctUrl = `${baseUrl}?q=${query}`;
// "https://api.example.com/search?q=hola%20mundo"

Problema 3: No codificar caracteres especiales en parámetros API

// Bug: & en el valor rompe la cadena de consulta
const apiUrl = `https://api.example.com/search?q=Tom & Jerry&page=1`;
// Esto crea TRES parámetros: q=Tom, Jerry, page=1

// Solución: Codificar el valor del parámetro
const apiUrl = `https://api.example.com/search?q=${encodeURIComponent('Tom & Jerry')}&page=1`;
// Correcto: q=Tom%20%26%20Jerry&page=1

Tabla de referencia de codificación de URL

Carácter	Decimal	Hex	Codificado	Descripción
(espacio)	32	20	%20	Carácter espacio
!	33	21	%21	Signo de exclamación
"	34	22	%22	Comilla doble
#	35	23	%23	Numeral / delimitador de fragmento
$	36	24	%24	Signo de dólar
%	37	25	%25	Signo de porcentaje (carácter de escape)
&	38	26	%26	Ampersand / delimitador de consulta
/	47	2F	%2F	Barra diagonal / delimitador de ruta
:	58	3A	%3A	Dos puntos
=	61	3D	%3D	Signo igual
?	63	3F	%3F	Signo de interrogación
@	64	40	%40	Arroba

Conclusión

La codificación de URL es un concepto fundamental en el desarrollo web que afecta a toda aplicación que trabaja con URL. Entender cómo funciona la codificación porcentual, cuándo usar encodeURIComponent versus encodeURI, y cómo diferentes lenguajes de programación manejan la codificación de URL te salvará de bugs sutiles y problemas de seguridad.

Puntos clave:

1. encodeURIComponent para valores, encodeURI para URL completas en JavaScript
2. Los espacios pueden ser %20 o + — %20 siempre es seguro
3. Los caracteres no ASCII usan UTF-8 antes de la codificación porcentual
4. Cuidado con la doble codificación — el error de codificación de URL más común
5. Usar URLSearchParams en JavaScript para construir cadenas de consulta de forma segura
6. Siempre codificar la entrada del usuario antes de incluirla en URL

Para codificación y decodificación rápida de URL, marca como favorito nuestra herramienta Codificador/Decodificador de URL.

Recursos relacionados

• Herramienta Codificador/Decodificador de URL — Codifica y decodifica URLs al instante
• Codificador/Decodificador Base64 — Codificación Base64URL
• Formateador JSON — Formatear JSON con datos URL
• Generador de hash — Generar hashes de cadenas URL