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:
- Como Verificar Si Una URL Es Correcta (Validar URL) con JavaScript
- Como Detectar Si El Usuario Está en Línea con JavaScript
- Como Detectar Si El Usuario Cambia de Pestaña En El Navegador Con JavaScript
- Como Crear Un PDF con window.print() de JavaScript
- Como Generar Un ID Único (Unique Key) con JavaScript
- 5 Expresiones Regulares Que Deberías Conocer en JavaScript
- Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)
- Como Verificar si 2 Contraseñas Coinciden o son Iguales con JavaScript
- 5 Cosas que Talvez no Sabías sobre try-catch-finally en JavaScript
- Cual es la Diferencia entre == vs === en JavaScript
- Qué Son los Eventos Bubbling en JavaScript
- Puedes leer más en la categoría JavaScript
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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.
Nota (s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.