La codificación URL (también conocida como codificación porcentual) es un mecanismo para representar caracteres especiales en URLs usando el formato %XX, donde XX es el valor hexadecimal. Esta codificación es esencial para el desarrollo web, integración de API y transmisión de datos. Cuando necesitas incluir caracteres especiales como espacios, ampersands (&), signos de interrogación (?) o caracteres no ASCII en URLs o parámetros de consulta, la codificación adecuada garantiza que los datos se transmitan de forma segura sin romper la estructura de la URL. La herramienta soporta dos modos de codificación: La codificación de URL completa (encodeURI) preserva caracteres de estructura de URL como :, /, ?, &, = mientras codifica otros caracteres especiales—ideal para codificar URLs completas. La codificación de componentes (encodeURIComponent) codifica todos los caracteres especiales incluyendo caracteres de estructura de URL—perfecto para valores de parámetros de consulta, datos de formularios y payloads de peticiones API. Todo el procesamiento ocurre del lado del cliente en tu navegador sin enviar datos a servidores.
How to Use
Selecciona el modo Codificar o Decodificar usando los botones de radio en la parte superior. Para codificar: pega tu texto o URL en el área de entrada y la salida se actualiza automáticamente con el resultado codificado. Elige tu estilo de codificación de espacios: %20 (estándar, cumple con RFC 3986) o + (común en cadenas de consulta y datos de formularios). Activa 'Codificar URL completa' para cambiar entre codificación de URL completa (preserva :, /, ?, &, =) y codificación de componentes (codifica todo). Para decodificar: pega texto URL codificado y se decodifica automáticamente de vuelta a formato legible, manejando tanto representaciones de espacio %20 como +. Copia la salida con un clic usando el botón Copiar, o descarga resultados como archivo de texto.
Common Use Cases & Examples
**Parámetros de consulta**: Codifica 'smart watch' a 'smart%20watch' o 'smart+watch' para cadenas de consulta de URL. **Peticiones API**: Construye URLs de API como 'https://api.example.com/search?q=electrónica%20%26%20gadgets&precio=%3E100' con parámetros correctamente codificados. **OAuth y firmas**: Muchos flujos OAuth y algoritmos de firma de API requieren parámetros codificados en URL. **Datos de formulario**: Codifica envíos de formularios para tipo de contenido application/x-www-form-urlencoded. **Enlaces profundos**: Crea enlaces profundos codificados para aplicaciones móviles con parámetros. **Depuración**: Decodifica respuestas de API o la barra de URL del navegador para ver valores de parámetros reales. **Caracteres especiales**: Maneja caracteres como &, =, ?, #, /, @, :, <, >, \", ', %, + y espacios en URLs.
Limitations & Important Notes
Esta herramienta usa codificación UTF-8 (estándar para la web moderna). Las codificaciones no UTF-8 no están soportadas. La herramienta maneja codificación URL estándar; para otros esquemas de codificación (como base64 o entidades HTML), usa las herramientas respectivas. URLs muy largas (>100KB) pueden causar problemas de rendimiento en navegadores antiguos. Secuencias de porcentaje mal formadas (como %ZZ o secuencias incompletas) en modo decodificación activarán mensajes de error. La opción 'Codificar URL completa' solo debe usarse para URLs completas que comienzan con http:// o https://—para valores de parámetros de consulta solos, usa codificación de componentes. Recuerda que la codificación URL aumenta el tamaño del texto: cada carácter especial se convierte en 3 caracteres (%XX), así que 'hello world' (11 caracteres) se convierte en 'hello%20world' (13 caracteres).
// JavaScript URL Encoding Examples
// Encode full URL (preserves protocol, slashes, etc.)
const fullUrl = 'https://example.com/search?q=hello world';
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/search?q=hello%20world
// Encode URL component (encodes all special chars)
const queryParam = 'hello world & special chars';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam);
// hello%20world%20%26%20special%20chars
// Build URL with encoded parameters
const baseUrl = 'https://api.example.com/search';
const params = {
q: 'smart watch',
category: 'electronics & gadgets',
price: '>100'
};
const queryString = Object.entries(params)
.map(([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join('&');
const fullApiUrl = `${baseUrl}?${queryString}`;
console.log(fullApiUrl);
// https://api.example.com/search?q=smart%20watch&category=electronics%20%26%20gadgets&price=%3E100
// Decode URL
const encoded = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello+world';
const decoded = decodeURIComponent(encoded.replace(/\+/g, ' '));
console.log(decoded);
// https://example.com/search?q=hello world
// Handle encoding errors
try {
const malformed = '%E0%A4%A'; // Incomplete UTF-8 sequence
const result = decodeURIComponent(malformed);
} catch (error) {
console.error('Invalid URL encoding:', error.message);
}