如何使用 JavaScript 操作和修改 URL 參數？

使用JavaScript 更改URL 參數並指定預設值

隨著動態產生的URL 變得越來越流行，靈活地操作URL參數至關重要高效。在本文中，我們將探討如何使用 JavaScript 修改和新增參數到 URL。

更改參數值

假設您有一個與以下 URL 類似的URL提供：

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

要將'rows' 參數修改為特定值，例如10，可以使用以下程式碼:

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

updateURLParameter函數檢查 'rows' 參數是否存在。如果是，它將用指定的值替換其值。如果不存在，則會將該參數新增至 URL 末端。

新增參數

或者，如果'rows' 參數不存在存在於初始URL 中，您可以使用相同的函數來新增它，如下所示：

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

此程式碼使用'rows' 參數建立一個新URL，並將其值設為10。

函數實作

這是updateURLParameter 函數的完整功能實作：

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;
}

要使用此函數，只需傳入目前URL，即您想要的參數修改或新增及其值。該函數將傳回一個經過指定更改的新 URL。

利用這些 JavaScript 技術，您可以動態操作 URL 參數，從而輕鬆自訂和控制 Web 應用程式的行為。

以上是如何使用 JavaScript 操作和修改 URL 參數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！