如何使用 JavaScript 操作和修改 URL 参数？-js教程-PHP中文网

如何使用 JavaScript 操作和修改 URL 参数？

Barbara Streisand

发布： 2024-11-10 04:31:02

原创

647 人浏览过

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("&amp;");

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

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

登录后复制

要使用此函数，只需传入当前 URL，即您想要的参数修改或添加及其值。该函数将返回一个经过指定更改的新 URL。

利用这些 JavaScript 技术，您可以动态操作 URL 参数，从而轻松自定义和控制 Web 应用程序的行为。

以上是如何使用 JavaScript 操作和修改 URL 参数？的详细内容。更多信息请关注PHP中文网其他相关文章！