JS 从 URL 中删除查询参数 - Javascript

有时候，我们需要从 URL 字符串中删除指定的查询参数。这个任务可以通过 JavaScript 来完成。在本文中，我们将讨论如何使用 JavaScript 从 URL 中删除查询参数。

什么是查询参数？

在 URL 中，查询参数是指在问号（?）之后的部分。这部分通常包含键值对，用于向服务器传递参数。例如，下面是一个包含查询参数的 URL：

https://example.com/search?q=javascript&page=2

在这个 URL 中，查询参数是 q=javascript&page=2。其中，q 和 page 是参数名，而 javascript 和 2 是对应的参数值。

如何从 URL 中删除查询参数？

要从 URL 中删除查询参数，我们需要执行以下几个步骤：

1. 将 URL 字符串转换为 URL 对象。
2. 检查 URL 对象中是否包含要删除的查询参数。
3. 如果存在，从 URL 对象中删除查询参数。
4. 将已修改的 URL 对象转换回字符串形式。

下面是一个完整的 JavaScript 函数，用于从 URL 中删除指定的查询参数：

function removeQueryParam(url, param) {
  // Step 1: Convert URL string to URL object
  const urlObj = new URL(url);
  
  // Step 2: Check if URL object contains query parameters
  if (urlObj.search) {
    // Step 3: If parameter exists, remove it from URL object
    const searchParams = new URLSearchParams(urlObj.search);
    searchParams.delete(param);
    urlObj.search = searchParams.toString();
  }
  
  // Step 4: Convert URL object back to string
  return urlObj.href;
}

上面的代码中，removeQueryParam 函数接受两个参数：url 和 param。url 是要操作的 URL 字符串，而 param 则是要从 URL 中删除的查询参数的名称。

函数的第一步是将 URL 字符串转换为 URL 对象。这可以通过创建一个新的 URL 对象来完成。接着，我们检查 search 属性是否存在，如果存在，则说明 URL 对象中包含查询参数。

函数的第三步是从查询参数中删除指定的参数。我们首先将查询参数转换为 URLSearchParams 对象，然后使用 delete 方法删除指定的参数。

在最后一步中，我们将 URL 对象转换回字符串形式，并返回结果。

如何使用这个函数？

要使用 removeQueryParam 函数，只需要调用它并传递要操作的 URL 和要删除的参数名称即可。例如：

const url = 'https://example.com/search?q=javascript&page=2';
const newUrl = removeQueryParam(url, 'page');
console.log(newUrl); // 'https://example.com/search?q=javascript'

上面的代码中，我们使用 removeQueryParam 函数从 url 中删除 page 这个查询参数。函数的返回结果是一个已修改过的 URL 字符串，该字符串不包含 page 这个参数。

总结

本文介绍了如何使用 JavaScript 从 URL 中删除查询参数。通过创建 URL 对象、检查查询参数、删除指定的参数并将 URL 对象转换回字符串形式，我们可以轻松地删除 URL 中的任何查询参数。