使用 JavaScript 从 URL 中删除查询字符串

JavaScript 2年前 62

要从 url 中删除查询字符串，请使用 split() 方法在问号上拆分字符串并访问索引 0 处的数组元素，例如 url.split('?')[0]。 split 方法将返回一个包含 2 个子字符串的数组，其中第一个元素是查询字符串之前的 url。

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

// ✅ Remove querystring
const result1 = url.split('?')[0];
console.log(result1); // 👉️ "https://example.com/books"

// ✅ Remove querystring
const result2 = url.slice(0, url.indexOf('?'));
console.log(result2); // 👉️ "https://example.com/books"

// ✅ Preserve hash
const index = url.indexOf('?');
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));
console.log(result3); // 👉️ "https://example.com/books#hash"

我们传递给 String.split 方法的唯一参数是我们要拆分字符串的分隔符。

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

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

该方法返回一个包含 2 个字符串的数组 – 问号之前的一个和问号之后的一个。

此解决方案还处理 url 不包含查询字符串的情况。

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

// 👇️ ['https://example.com/books']
console.log(url.split('?'));

如果我们传递一个不包含在字符串中的子字符串，split() 方法将返回一个包含整个字符串的数组。

另一种方法是使用 String.indexOf 方法获取问号的索引。

要从 url 中删除查询字符串，请在 url 上调用 slice() 方法并获取从索引 0 到字符串中问号索引的字符。 slice 方法将返回一个不包含查询字符串的新字符串。

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

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

我们传递给 String.slice 方法的 2 个参数是：

start 索引 – 要包含在字符串中的第一个字符的索引
stop 索引 – 上升到但不包括该索引
indexOf 方法返回子串在字符串中第一次出现的索引，如果子串不在字符串中则返回 -1。

如果选择这种方法，这是我们需要处理的潜在边缘情况。

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

let result2 = url;

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

console.log(result2); // 👉️ "https://example.com/books"

我们的 if 语句处理 url 不包含查询字符串的情况。

如果我们需要删除查询字符串，但又想保留散列，请将对 slice 方法的两次调用连接起来。

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

// // ✅ Preserve hash
const result3 = url.slice(0, url.indexOf('?')) +
                url.slice(url.indexOf('#'));

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

对 slice 方法的第一次调用获取查询字符串之前的 url 部分。

第二次调用包含从散列开始的字符串。

如果将单个参数传递给 slice 方法，它会将字符包含到字符串的末尾。

我们可能需要处理 url 不包含查询字符串或哈希的情况。

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

let result3 = url;

if (url.includes('?') && url.includes('#')) {
  result3 = url.slice(0, url.indexOf('?')) +
            url.slice(url.indexOf('#'));
}

console.log(result3);