How Can I Dynamically Manipulate Query String Parameters in JavaScript?

Manipulating Query String Parameters Dynamically 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!