首頁  >  文章  >  web前端  >  如何使用 JavaScript 操作和修改 URL 參數?

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

Barbara Streisand
Barbara Streisand原創
2024-11-10 04:31:02622瀏覽

How Can I Manipulate and Modify URL Parameters Using JavaScript?

使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn