Espacios en URL: diferencia entre %20 y +

Respuesta breve

%20 representa un espacio mediante percent-encoding en una URL. El signo + representa un espacio específicamente en datos codificados como application/x-www-form-urlencoded, usados a menudo en consultas y formularios. Fuera de ese formato, + puede ser un signo más literal. Si necesitas conservarlo dentro de datos de formulario, codifícalo como %2B.

Tres entradas, tres significados

Supón que quieres transportar estos valores:

El problema aparece cuando se descodifica a+b con reglas de formulario: se obtiene a b, no el signo más original. Por eso un + que forma parte del dato debe llegar como %2B en ese contexto.

Qué regla aplica cada API

encodeURIComponent("a b") devuelve a%20b. En cambio, URLSearchParams serializa espacios como + porque utiliza el formato de formulario. Ambos resultados pueden ser correctos; responden a algoritmos y contextos diferentes.

La sección de percent-encoding del RFC 3986 define la forma %HH. El estándar URL de WHATWG define el algoritmo application/x-www-form-urlencoded que transforma el espacio en +.

Qué hace la herramienta

El codificador y decodificador URL de Tools in a Tab ofrece tres modos explícitos. Elige el modo antes de transformar:

El modo de URL completa conserva los delimitadores estructurales; usa componente para un solo segmento o valor. El modo formulario trata un valor, no el cuerpo entero. Para construir varios parámetros, usa el analizador de query strings, que conserva por separado nombres, valores y apariciones repetidas.

Conservar un signo más literal con URLSearchParams

Pasa el valor sin codificar a set en lugar de interpolarlo en una consulta:

const params = new URLSearchParams();
params.set('q', 'a+b c');
params.toString(); // 'q=a%2Bb+c'
params.get('q'); // 'a+b c'

En cambio, new URLSearchParams('q=a+b').get('q') devuelve a b: el constructor con cadena analiza datos de formulario. No codifiques antes el valor enviado a set: un %2B existente se convertiría en %252B. Los ejemplos de URLSearchParams en MDN explican esta diferencia.

Regla práctica

1. Identifica si codificas un componente de URL o datos de formulario.
2. Para componentes, espera %20 para el espacio.
3. En formulario URL-encoded, espera + para el espacio.
4. Representa siempre un signo más literal como %2B cuando el receptor aplique reglas de formulario.

No reemplaces todos los + por espacios sin conocer el formato: esa sustitución puede cambiar un dato legítimo.