Como Editar Los Parámetros de Una URL con JavaScript

3 minuto(s)

En esta página:

Modificar la cadena (string) de consulta de una URL en JavaScript es bastante común. Si bien el enfoque ingenuo de editar directamente la URL como una cadena (string) a menudo funciona, es una solución frágil que puede romperse fácilmente. Esto es especialmente cierto cuando se trabaja con codificación, fragmentos hash y otras complejidades similares. En este Post te compartiré Como Editar Los Parámetros de Una URL con JavaScript, vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web” y “5 Habilidades que Debe Tener un Desarrollador Backend” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Editar Los Parámetros de Una URL con JavaScript.

Como Editar Los Parámetros de Una URL con JavaScript

La forma más sólida de editar una URL es usar la interfaz URL para analizar la cadena de URL original y editarla según sea necesario. De esta forma, el navegador se encargará de todos los detalles complicados y hará que el código sea más fácil de leer y mantener.


const urlruta = 'https://paginaweb.com?p=186&desde=index#descripcion';
const url = new URL(urlruta);

// Eliminar un parámetro
const removerParametro = 'desde';
url.searchParams.delete(removerParametro);

// Editar/Agregar un parámetro
const nuevosParametros = {
  p: 36,
  pista: 'ninguna'
};
Object.keys(nuevosParametros).forEach(key => {
  url.searchParams.set(key, nuevosParametros[key]);
});

// Editar el fragmento hash 
const nuevoHash = 'nuevo';
url.hash = nuevoHash;

console.log(`${url}`); 
// Obtenemos: https://paginaweb.com?p=36&pista=ninguna#nuevo

const urlruta = 'https://paginaweb.com?p=186&desde=index#descripcion';

const url = new URL(urlruta);

// Eliminar un parámetro

const removerParametro = 'desde';

url.searchParams.delete(removerParametro);

// Editar/Agregar un parámetro

const nuevosParametros = {

p: 36,

pista: 'ninguna'

};

Object.keys(nuevosParametros).forEach(key => {

url.searchParams.set(key, nuevosParametros[key]);

});

// Editar el fragmento hash

const nuevoHash = 'nuevo';

url.hash = nuevoHash;

console.log(`${url}`);

// Obtenemos: https://paginaweb.com?p=36&pista=ninguna#nuevo

Como puedes ver en el ejemplo, la interfaz URL proporciona varios métodos para editar la URL. Los más utilizados son URL.searchParams y URL.hash. El primero es un objeto URLSearchParams que proporciona métodos para editar la cadena de consulta de la URL, mientras que el segundo es una cadena que contiene el fragmento hash de la URL. Además de estos dos, la interfaz URL también proporciona métodos para editar el protocolo, host, puerto, ruta, etc. de la URL.

Conclusión

En este Post hemos aprendido no solo a editar, si no también a eliminar y agregar parámetros a una URL con el lenguaje de programación JavaScript. Espero te sea de mucha utilidad y puedas usarlo en tus proyectos. Existen otras formas de editar los parámetros una URL, el que te compartí en este Post es una de ellas.