How to dynamically modify URL parameters using JavaScript?

Dynamic URL Parameter Manipulation with JavaScript

JavaScript provides versatile ways to modify and specify URL parameters, empowering developers with dynamic control over webpages. Let's explore a technique to achieve this functionality.

Changing Existing Parameters

Consider the URL "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc." To change the 'rows' parameter value to, say, 10, we can use the following JavaScript code:

var newURL = updateURLParameter(window.location.href, 'rows', 10);

The updateURLParameter function takes three parameters: the original URL, the parameter name ('rows'), and the new value (10). It constructs a new URL with the updated parameter and returns it.

Adding Parameters

If the 'rows' parameter doesn't exist, we can add it to the end of the URL using the same function:

var newURL = updateURLParameter(window.location.href, 'rows', 10) || window.location.href + '&rows=10';

The code first tries to update the existing 'rows' parameter (if it exists). If it doesn't exist, it appends '&rows=10' to the URL.

Additional Considerations

To maintain the state in the browser's history, you can use the replaceState function:

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

The above updates the URL in the browser's address bar while preserving the history.

Advanced Handling

To support URLs with anchors (e.g., "#mytarget"), an extended version of the code handles anchors separately:

function updateURLParameter(url, param, paramVal) {
  // Handle anchors
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    var tmpAnchor = additionalURL.split("#");
    var TheParams = tmpAnchor[0];
    var TheAnchor = tmpAnchor[1];
    if (TheAnchor) additionalURL = TheParams;
    tempArray = additionalURL.split("&");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split("=")[0] != param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&amp;";
      }
    }
  }

  // Update/add parameter
  if (TheAnchor) paramVal += "#" + TheAnchor;
  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

This ensures that anchors are properly maintained when modifying URL parameters.

The above is the detailed content of How to dynamically modify URL parameters using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!