Home >Web Front-end >JS Tutorial >How Can I Dynamically Manipulate Query String Parameters in JavaScript?
In the realm of web development, it's often necessary to add or update query string parameters in URLs. These parameters serve as a crucial means of passing data between the client and server. JavaScript, a versatile programming language for web applications, provides robust capabilities for manipulating query strings.
Adding or Updating Parameters
To add a query string parameter if it doesn't exist or update its value if it's already present, you can utilize the following function:
function updateQueryStringParameter(uri, key, value) { // Define a regular expression to match the parameter var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); // Determine the URL separator (? for existing parameters, & for new ones) var separator = uri.indexOf('?') !== -1 ? "&" : "?"; // Check if the parameter already exists if (uri.match(re)) { // Update the existing parameter return uri.replace(re, '' + key + "=" + value + ''); } else { // Add the new parameter return uri + separator + key + "=" + value; } }
Example Usage
To illustrate how to use this function, let's consider the following example:
var url = "https://example.com/search"; // Add or update the "page" parameter with value "2" var updatedUrl = updateQueryStringParameter(url, "page", 2);
After executing the above code, the updated URL will be:
https://example.com/search?page=2
If the "page" parameter already existed in the original URL with a different value, it will be replaced with the new one.
By leveraging this function, you can dynamically manipulate query string parameters on the client side, offering flexibility and enhanced control over URL modification.
The above is the detailed content of How Can I Dynamically Manipulate Query String Parameters in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!