Codificar Parámetros de Consulta URL: Codificador

Resultado Codificado

La entrada search query=hello world&category=cafe & resumen&redirect=https://example.com/path?id=42 se codifica como:

search%20query%3Dhello%20world%26category%3Dcafe%20%26%20resumen%26redirect%3Dhttps%3A%2F%2Fexample.com%2Fpath%3Fid%3D42

Cada carácter excepto los no reservados (A-Z a-z 0-9 - _ . ~) se ha reemplazado por su forma codificada porcentualmente.

Codificación Porcentual (RFC 3986)

Según RFC 3986, cualquier byte que no sea un carácter no reservado se codifica como un signo de porcentaje seguido de dos digitos hexadecimales en mayuscula que representan el valor del byte.

Caracteres no reservados que nunca necesitan codificarse:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 - _ . ~

Por qué los Caracteres Especiales Rompen las URL

Una URL tiene una sintaxis definida. Los caracteres ?, &, =, #, / y : tienen roles específicos en la estructura de la URL:

• ? separa la ruta de la cadena de consulta
• & separa los parámetros de consulta entre si
• = separa la clave del parámetro de su valor
• # inicia el identificador de fragmento
• / separa los segmentos de ruta
• : separa el esquema del resto

encodeURI vs encodeURIComponent

encodeURI("https://example.com/search?q=hola mundo")
// "https://example.com/search?q=hola%20mundo"
// ? y = no se codifican

encodeURIComponent("hola mundo&adios=mundo")
// "hola%20mundo%26adios%3Dmundo"
// & y = se codifican

Para construir cadenas de consulta, usa siempre encodeURIComponent:

const params = {
  q: "cafe & resumen",
  redirect: "https://example.com/path?id=42"
};

const queryString = Object.entries(params)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join("&");

El Debate + vs %20 para Espacios

• RFC 3986 (URI): Espacio -> %20
• Codificación de formularios HTML (application/x-www-form-urlencoded): Espacio -> +
• JavaScript encodeURIComponent: Espacio -> %20

La mayoría de los frameworks web del lado del servidor (Express, Django, Flask, Spring) manejan ambos formatos al analizar parámetros de consulta. Pero %20 es el estándar oficial y se comporta consistentemente en todos los componentes de la URL (ruta, consulta, fragmento). Usa %20 a menos que estes construyendo especificamente un cuerpo de formulario application/x-www-form-urlencoded.