如何从 JavaScript 中的 URL 中删除查询字符串

目录

Remove a Query String from a URL using JavaScript

1. 从 JavaScript 中的 URL 中删除查询字符串
2. 从 JavaScript 中的 URL 中删除查询字符串和哈希
3. 使用从 URL 中删除查询字符串split()
4. 使用从 URL 中删除查询字符串indexOf()

从 JavaScript 中的 URL 中删除查询字符串

要从 URL 中删除查询字符串：

1. 使用URL()构造函数创建URL对象。
2. 将对象search的属性设置URL为空字符串。
3. 使用该toString()方法将URL对象转换为字符串。

const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

urlObj.search = '';

const result = urlObj.toString();

// 👇️ https://bobbyhadz.com/books#hash
console.log(result);

URL ()
构造函数返回一个新创建的URL对象，该对象表示作为参数传递的 URL。

您可以使用
URL 对象的搜索属性来访问或更新查询字符串。

const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

console.log(urlObj.search); // 👉️ ?page=10

该search属性返回一个字符串，其中包含一个?后跟 URL 的参数。

search您可以通过将该属性设置为空字符串来从 URL 中删除查询字符串。

const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

urlObj.search = '';

const result = urlObj.toString();

// 👇️ https://bobbyhadz.com/books#hash
console.log(result);

URL.toString
()
方法返回一个包含整个 URL 的字符串。

如果您必须经常这样做，请定义一个可重用的函数。

function removeQueryString(url) {
  const urlObj = new URL(url);

  urlObj.search = '';

  return urlObj.toString();
}

const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = removeQueryString(url);
console.log(result); // 👉️ https://bobbyhadz.com/books#hash

该函数将 URL 作为参数并从 URL 中删除查询字符串。

从 JavaScript 中的 URL 中删除查询字符串和散列

You can use the same approach to remove the hash from the URL.

Simply set the hash property on the URL object to an empty string.

const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

urlObj.search = '';
urlObj.hash = '';

const result = urlObj.toString();

// 👇️ https://bobbyhadz.com/books
console.log(result);

The URL.hash
property is a string containing a # followed by the fragment identifier of the
URL

The property can be used to access or set the hash.

const url = 'https://bobbyhadz.com/books?page=10#hash';

const urlObj = new URL(url);

console.log(urlObj.hash); // 👉️ #hash

Setting the hash property to an empty string removes it from the URL, just
like setting the search property removes the query string.

Remove the query string from a URL using split() #

This is a three-step process:

1. Use the split() method to split the string on a question mark.
2. Access the array element at index 0.
3. The first element is the part of the URL before the query string.

const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = url.split('?')[0];
console.log(result); // 👉️ "https://bobbyhadz.com/books"

The
String.split
method takes a separator and splits the string into an array on each occurrence
of the provided delimiter.

The String.split() method takes the following 2 parameters:

const url = 'https://bobbyhadz.com/books?page=10#hash';

// 👇️ ['https://bobbyhadz.com/books', 'page=10#hash']
console.log(url.split('?'));

This solution also handles the scenario where the URL doesn’t contain a query
string.

const url = 'https://bobbyhadz.com/books';

const result = url.split('?')[0];
console.log(result); // 👉️ "https://bobbyhadz.com/books"

If you pass a substring that is not contained in the string, the split()
method returns an array containing the entire string.

An alternative approach is to use the
String.indexOf
method to get the index of the question mark.

Remove the query string from a URL using indexOf() #

This is a two-step process:

1. Use the indexOf() method to get the index of the question mark in the
   string.
2. Use the slice() method to get the part of the string before the question
   mark.

const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = url.slice(0, url.indexOf('?'));
console.log(result); // 👉️ "https://bobbyhadz.com/books"

The
String.slice
method extracts a section of a string and returns it, without modifying the
original string.

The String.slice() method takes the following arguments:

This is a potential edge case that you need to handle if you pick this approach.

const url = 'https://bobbyhadz.com/books';

let result = url;

if (url.includes('?')) {
  result = url.slice(0, url.indexOf('?'));
}

console.log(result); // 👉️ "https://bobbyhadz.com/books"

Our if statement handles the condition where the URL doesn’t contain a query
string.

Remove the query string but preserve the hash #

If you need to remove the query string, but want to preserve the hash,
concatenate two calls to the slice method.

const url = 'https://bobbyhadz.com/books?page=10#hash';

const result = url.slice(0, url.indexOf('?')) + url.slice(url.indexOf('#'));

console.log(result); // 👉️ "https://bobbyhadz.com/books#hash"

The first call to the slice() method gets the part of the URL before the query
string.

The second call contains the string from the hash onwards.

When only a single argument is passed to the String.slice() method, the slice
goes to the end of the string.