Guía de herramienta

Cómo codificar URLs

encodeURIComponent vs encodeURI, cuándo usar cada uno, los 3 modos de la herramienta y cómo construir URLs con parámetros especiales.

¿Qué es URL encoding?

Los URLs solo pueden contener caracteres ASCII seguros. Caracteres especiales como espacios, ñ, #, & y la mayoría de caracteres no-ASCII deben codificarse como %XX, donde XX es el valor hexadecimal del byte en UTF-8. Este proceso se llama percent-encoding o URL encoding.

Sin codificar:hola mundo & año=2024 #secciónCodificado:hola%20mundo%20%26%20a%C3%B1o%3D2024%20%23secci%C3%B3n

encodeURIComponent vs encodeURI

JavaScript tiene dos funciones nativas para codificar URLs. La diferencia clave está en qué caracteres preservan sin codificar.

Función	Codifica	Preserva	Cuándo usar
encodeURIComponent	Todo excepto: A-Z a-z 0-9 - _ . ! ~ * ' ( )	Letras, números, guión, punto	Para valores de parámetros individuales
encodeURI	Espacios y caracteres no-ASCII	Estructura URL: : / ? # [ ] @ ! $ & ' ( ) * + , ; =	Para una URL completa ya estructurada

Los 3 modos de la herramienta

El URL Encoder de MeshiCode tiene tres modos para diferentes necesidades:

EncodeencodeURIComponent()

Convierte texto plano o una URL con caracteres especiales a su versión codificada en percent-encoding.

DecodedecodeURIComponent()

Convierte una URL codificada con %XX de regreso a texto legible.

Parsenew URL()

Desglosa una URL completa en sus partes: origen, ruta, hash y todos los query params con copia individual.

Ejemplos en JavaScript

Referencia rápida de las funciones de codificación y su uso correcto para construir URLs seguras.

encodeURIComponent y encodeURI en JavaScript

"color:rgba(255,255,255,0.35)">// encodeURIComponent — codifica TODO excepto: A-Z a-z 0-9 - _ . ! ~ * ' ( )
"color:rgba(255,255,255,0.35)">// Úsalo para valores de parámetros individuales
const ciudad = "São Paulo";
const encoded = encodeURIComponent(ciudad);
console.log(encoded); "color:rgba(255,255,255,0.35)">// "S%C3%A3o%20Paulo"

const query = encodeURIComponent("precio <= 100 & disponible=true");
console.log(query); "color:rgba(255,255,255,0.35)">// "precio%20%3C%3D%20100%20%26%20disponible%3Dtrue"

"color:rgba(255,255,255,0.35)">// encodeURI — codifica todo EXCEPTO caracteres de estructura de URL
"color:rgba(255,255,255,0.35)">// Úsalo para una URL completa que ya tiene su estructura correcta
const url = "https:255,255,255,0.35)">//ejemplo.com/buscar?q=hola mundo&lang=es";
const encodedUrl = encodeURI(url);
console.log(encodedUrl);
"color:rgba(255,255,255,0.35)">// "https://ejemplo.com/buscar?q=hola%20mundo&lang=es"
"color:rgba(255,255,255,0.35)">// Nota: & no fue codificado (es parte de la estructura del query)

"color:rgba(255,255,255,0.35)">// Construir URL con parámetros de forma segura
function buildUrl(base, params) {
  const query = Object.entries(params)
    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
    .join("&");
  return `${base}?${query}`;
}

const apiUrl = buildUrl("https:255,255,255,0.35)">//api.ejemplo.com/buscar", {
  q: "café & postres",
  ciudad: "México D.F.",
  página: 1,
});
console.log(apiUrl);
"color:rgba(255,255,255,0.35)">// "https://api.ejemplo.com/buscar?q=caf%C3%A9%20%26%20postres&ciudad=M%C3%A9xico%20D.F.&p%C3%A1gina=1"

Casos frecuentes

Query params con espacios y caracteres especiales

Siempre codifica los valores de los parámetros antes de agregarlos a una URL.

?q=café%20y%20té&ciudad=México%20D.F.

Caracteres acentuados y ñ

Los caracteres UTF-8 fuera del rango ASCII se codifican en múltiples bytes: ñ → %C3%B1, á → %C3%A1.

año → a%C3%B1o | español → espa%C3%B1ol

Construir URLs dinámicas con múltiples parámetros

Usa encodeURIComponent en cada clave y valor por separado, luego únelos con & manualmente.

buildUrl(base, { q: 'hola mundo', lang: 'es-MX' })

Herramienta relacionada

URL Encoder / Decoder

Codifica, decodifica y parsea URLs con 3 modos de operación. Copia parámetros individuales con un clic.

Abrir URL Encoder →