Encode URL en JavaScript: 3 formas que salvarán tu sitio web

Introducción: Por qué la codificación de URL no es teoría aburrida, sino el salvavidas de tu aplicación

Imagina la situación: estás escribiendo una aplicación web en JavaScript, el usuario ingresa la consulta de búsqueda «JavaScript & Node.js: mejores prácticas». Pasas este texto en la URL como parámetro de una solicitud GET. Abres la consola del navegador — y aparece un error. O, peor aún, la solicitud se envía, pero el servidor no la entiende, y en lugar de resultados de búsqueda, el usuario ve una página vacía.

¿Te suena familiar? Si es así, este artículo es para ti. Si no, igual es para ti, porque tarde o temprano te enfrentarás a esto. El tema de la codificación de URL en JavaScript es una de las preguntas más populares en Stack Overflow (decenas de miles de visitas), y no es casualidad. Es ese pequeño detalle que distingue a un desarrollador profesional de un principiante.

Hoy analizaremos tres formas de codificar URLs en JavaScript, aprenderemos a elegir la herramienta correcta para cada tarea y veremos ejemplos reales de la vida de un desarrollador web. ¡Allá vamos!

¿Qué es la codificación de URL y para qué sirve?

Antes de escribir código, entendamos la teoría. Una URL (Localizador Uniforme de Recursos) tiene una estructura estricta. Solo se permiten ciertos caracteres: letras latinas, números y algunos caracteres especiales (-, _, ., ~). En cambio, los espacios, el cirílico, los caracteres &, ?, # y otros están prohibidos.

Cuando intentamos pasar estos caracteres en una URL, el navegador o el servidor pueden interpretar incorrectamente la solicitud. Por ejemplo, el carácter & en la cadena de consulta separa los parámetros entre sí. Si aparece dentro del valor de un parámetro, la lógica se rompe.

La solución es la codificación de URL (codificación porcentual). Los caracteres prohibidos se reemplazan por una secuencia del tipo %XX, donde XX es el código hexadecimal del carácter en codificación UTF-8. Por ejemplo, un espacio se convierte en %20, y la letra cirílica «а» se convierte en %D0%B0.

En JavaScript, hay tres mecanismos integrados para esto. Analicemos cada uno.

Método 1: encodeURI() — para URLs completas

La función encodeURI() está diseñada para codificar una URL completa. Reemplaza todos los caracteres excepto aquellos que forman parte de la sintaxis de URI: :, /, ?, #, &, = y otros.

Sintaxis

encodeURI(uri)

Ejemplo

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";
const encoded = encodeURI(url);
console.log(encoded);
// Resultado: "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"

Observa: encodeURI() codificó los espacios, pero no tocó los caracteres &, ? y =. Esto es correcto para una URL completa, pero peligroso para los parámetros. Si en nuestra consulta hubiera un carácter & dentro del valor de un parámetro, se quedaría como está y rompería la cadena de consulta.

Cuándo usarlo

• Cuando necesitas codificar una URL completa (por ejemplo, para pasarla a window.location)
• Cuando la URL no contiene datos de usuario con caracteres potencialmente peligrosos

Cuándo NO usarlo

• Para codificar parámetros de consulta individuales
• Si la URL incluye entrada del usuario (formularios, búsqueda, comentarios)

Método 2: encodeURIComponent() — para parámetros y valores

Esta es tu herramienta principal para el día a día. encodeURIComponent() codifica todos los caracteres excepto letras, números y -, _, ., ~. Codificará incluso aquellos caracteres que forman parte de la sintaxis de URI — &, ?, =, # y demás.