How Can I Manipulate and Modify URL Parameters Using JavaScript?

Change URL Parameters and Specify Defaults Using JavaScript

With dynamically generated URLs becoming increasingly prevalent, it's crucial to have the flexibility to manipulate URL parameters efficiently. In this article, we'll explore how to modify and add parameters to a URL using JavaScript.

Changing Parameter Values

Suppose you have a URL similar to the one provided:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

To modify the 'rows' parameter to a specific value, say 10, you can use the following code:

const newUrl = updateURLParameter(window.location.href, 'rows', 10);

The updateURLParameter function checks if the 'rows' parameter exists. If it does, it replaces its value with the specified one. If it doesn't exist, it adds the parameter to the end of the URL.

Adding New Parameters

Alternatively, if the 'rows' parameter doesn't exist in the initial URL, you can add it using the same function as follows:

const newUrl = updateURLParameter(window.location.href, 'rows', 10);

This code creates a new URL with the 'rows' parameter and its value set to 10.

Function Implementation

Here's a fully functional implementation of the updateURLParameter function:

function updateURLParameter(url, param, paramVal) {
  const newAdditionalURL = "";
  const tempArray = url.split("?");
  const baseURL = tempArray[0];
  let additionalURL = tempArray[1];
  let temp = "";

  if (additionalURL) {
    const tmpAnchor = additionalURL.split("#");
    additionalURL = tmpAnchor[0];
    additionalURL = additionalURL.split("&");

    for (const key in additionalURL) {
      if (additionalURL[key].split('=')[0] !== param) {
        newAdditionalURL += temp + additionalURL[key];
        temp = "&";
      }
    }
  }

  const rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

To use this function, simply pass in the current URL, the parameter you want to modify or add, and its value. The function will return a new URL with the specified changes made.

With these JavaScript techniques, you can manipulate URL parameters dynamically, making it easy to customize and control the behavior of your web applications.

The above is the detailed content of How Can I Manipulate and Modify URL Parameters Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!