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