Cómo manejar URLs en JS: Uso detallado del objeto URL

En el desarrollo web moderno, las URLs (Localizadores Uniformes de Recursos) son una parte central para interactuar con los recursos de la web. JavaScript ofrece el objeto URL, que facilita la tarea de analizar, modificar y construir URLs. Este artículo proporciona una guía completa sobre cómo usar el objeto URL, ayudando a los desarrolladores a manejar URLs de manera eficiente.

1. Crear un objeto URL

Puedes utilizar el constructor URL para crear un nuevo objeto URL, que acepta una cadena de URL como parámetro.

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2
console.log(url);

Este objeto url contiene la información completa de la URL, incluyendo el protocolo, nombre del host, ruta, cadena de consulta y la parte de hash.

2. Propiedades comunes

El objeto URL ofrece muchas propiedades útiles para acceder a diferentes partes de la URL:

• href: Devuelve la cadena completa de la URL.
• protocol: Devuelve la parte del protocolo de la URL, como https:.
• hostname: Devuelve el nombre del host de la URL, sin incluir el puerto.
• port: Devuelve el número de puerto de la URL (si lo tiene).
• pathname: Devuelve la parte del camino de la URL.
• search: Devuelve la cadena de consulta de la URL (incluyendo ?).
• hash: Devuelve la parte de hash de la URL (incluyendo #).

Ejemplo:

1
const url = new URL("https://www.example.com:8080/path/name?query=test#hash");
2

3
console.log(url.href); // https://www.example.com:8080/path/name?query=test#hash
4
console.log(url.protocol); // https:
5
console.log(url.hostname); // www.example.com
6
console.log(url.port); // 8080
7
console.log(url.pathname); // /path/name
8
console.log(url.search); // ?query=test
9
console.log(url.hash); // #hash

3. Modificar una URL

Las propiedades del objeto URL son modificables, por lo que puedes cambiar fácilmente las diferentes partes de la URL.

1
const url = new URL("https://www.example.com/path/name");
2
url.pathname = "/new/path";
3
url.search = "?search=query";
4
url.hash = "#newhash";
5

6
console.log(url.href); // https://www.example.com/new/path?search=query#newhash

Al modificar las propiedades como pathname, search y hash, puedes actualizar fácilmente la URL.

4. Manejar los parámetros de consulta (searchParams)

La propiedad searchParams del objeto URL proporciona un objeto URLSearchParams, lo que facilita la manipulación de la cadena de consulta.

Agregar parámetros de consulta

1
url.searchParams.append("newParam", "value");
2
console.log(url.href); // https://www.example.com/new/path?search=query&newParam=value

Obtener parámetros de consulta

1
console.log(url.searchParams.get("search")); // query

Modificar parámetros de consulta

1
url.searchParams.set("search", "newQuery");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery&newParam=value

Eliminar parámetros de consulta

1
url.searchParams.delete("newParam");
2
console.log(url.href); // https://www.example.com/new/path?search=newQuery

URLSearchParams ofrece métodos simples para agregar, obtener, modificar y eliminar parámetros de consulta.

5. Manejar URLs relativas

Al proporcionar una URL base al constructor URL, JavaScript puede resolver automáticamente las rutas relativas.

1
const relativeUrl = new URL("/relative/path", "https://www.example.com");
2
console.log(relativeUrl.href); // https://www.example.com/relative/path

6. Codificación y decodificación de URLs

Al manejar los parámetros de consulta de una URL, es posible que necesites codificar o decodificar caracteres especiales. JavaScript proporciona los siguientes métodos:

• encodeURIComponent(): Codifica un componente de la URL.
• decodeURIComponent(): Decodifica un componente codificado de la URL.

Ejemplo:

1
const param = "name=John Doe";
2
const encoded = encodeURIComponent(param);
3
console.log(encoded); // name%3DJohn%20Doe
4

5
const decoded = decodeURIComponent(encoded);
6
console.log(decoded); // name=John Doe

Estos métodos garantizan que las cadenas transmitidas en una URL no contengan caracteres no válidos.

Conclusión

El objeto URL proporciona a los desarrolladores una herramienta poderosa para analizar, modificar y generar URLs. Ya sea al manejar URLs generadas dinámicamente o procesar URLs de entrada del usuario, el objeto URL y su objeto asociado URLSearchParams son muy útiles.

Ya sea para analizar parámetros de consulta, modificar rutas o construir nuevas URLs, el objeto URL ayuda a los desarrolladores a completar estas tareas de manera eficiente y confiable.