Remove URL parameter with Javascript

Asked

Viewed 2,361 times

2

I am creating a functionality for a system and I came across the need to manipulate URL parameters in this way I would like to know, how to delete a certain parameter from the URL?

Follow a clearer example:

http://site.com.br?c=cliente&a=editar&id=31228

I need to remove the parameter a=editar of the URL, I tried to do as follows:

var urlReplace = document.URL.replace('&a=editar','');

or

var urlReplace = document.URL.replace(/&a=editar/g,'');

However, neither of the two ways worked!!!

  • What gives you document.URL? I don’t see why var urlReplace = document.URL.replace('&a=editar',''); doesn’t work, that’s correct...

  • `Document.URL returns the full URL of my site. And it doesn’t work, as I presented above.

  • And you tested window.location = urlReplace;?

3 answers

2


If you do so it works:

window.location = document.URL.replace('&a=editar','');

Remembering that the page will be reloaded.

2

I had a similar problem, I solved it as follows.

First assign the url to a variable

url = new URL(window.location.href);

Second, I removed the Variable parameter, in the case of the above example is a=edit url site.com.br?c=cliente&a=editar&id=31228

url.searchParams.delete("a")

Last I rewrote the URL without the parameter

window.history.pushState('object or string', 'Title', url)

The whole code went like this

url = new URL(window.location.href);
url.searchParams.delete("a")
window.history.pushState('object or string', 'Title', url)
  • 1

    +1 for suggesting the URL. I recommend you adjust the code to use window.Location instead of pushState, because the question isn’t about history.pushState, it’s just about removing parameter and actually directing.

2

In modern browsers this operation can be done with the help of the interface URL, Internet Explorer should still use the polyfill. Behold Compatibility table with the browsers.

The interface URL represents an object that provides static methods used to create Urls.

Use the constructor URL() to return an object URL defined by a string.
This object has the property URL.searchParams which allows access to query parameters that the URL possesses.

Two methods of URL.searchParams will be helpful:

//Cria uma instância de url a partir dum string.
const url = new URL('http://site.com.br?c=cliente&a=editar&id=31228'); 

console.log(`URL original: ${url}`);     //Imprime a url original.


let params = url.searchParams;           //Obtém os parâmetros de consulta da url. 
//Verifica se o parâmetro a existe...
if (params.has('a')) params.delete('a'); //Se o parâmetro existir o remove.

console.log(`URL modificada: ${url}`);   //Imprime a url modificada

  • 1

    Great, much simpler than writing something with regex (I’m not saying it doesn’t work, only it’s simpler), presenting the basic properties useful to the cases, has and delete and putting in an example "TESTABLE" with a single click +1 ... I’ll +1 for Willian because he suggested the same thing, although he added irrelevant things like pushState.

  • @Guilhermenascimento I accompanied him in this +1 for Willian.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.