Editing the query string of a URL in JavaScript is pretty common. While the naive approach of directly editing the URL as a string often works, it’s a fragile solution that can break easily. This is especially true when working with encoding, hash fragments and other such intricacies.
The most robust way to go about editing a URL is using the URL
interface to parse the original URL string and edit it as necessary. This way, the browser will take care of all the complicated details and make the code easier to read and maintain.
代码实现
const urlString = 'https://mysite.com?p=42&from=home#details';
const url = new URL(urlString);
// Delete a parameter
const removedParam = 'from';
url.searchParams.delete(removedParam);
// Edit/add parameters
const newParams = {
p: 57,
track: 'none'
};
Object.keys(newParams).forEach(key => {
url.searchParams.set(key, newParams[key]);
});
// Edit the hash fragment
const newHash = 'new';
url.hash = newHash;
console.log(`${url}`); // https://mysite.com?p=57&track=none#new
As you can see in the example, the URL
interface provides a number of methods to edit the URL. The most commonly used ones are URL.searchParams
and URL.hash
. The former is a URLSearchParams
object that provides methods to edit the query string of the URL, while the latter is a string that contains the hash fragment of the URL. Apart from these two, the URL
interface also provides methods to edit the protocol, host, port, path, etc. of the URL.