location.search

location.search 是一个 JavaScript 属性，用于获取当前 URL 的查询字符串部分。它返回的是从问号（?）开始到 URL 结尾的部分，包括问号本身。

语法

JavaScript

复制

var queryString = location.search;

 

示例

假设当前页面的 URL 是：

https://example.com/page.html?name=John&age=30

 

使用 location.search 可以获取查询字符串部分：

JavaScript

复制

console.log(location.search); // 输出: ?name=John&age=30

 

使用场景

location.search 常用于获取和解析 URL 中的查询参数。以下是一些常见的使用场景：

1. 获取查询参数

可以通过 location.search 获取查询字符串，并使用 URLSearchParams 来解析查询参数。

JavaScript

复制

// 获取查询字符串
var queryString = location.search;

// 使用 URLSearchParams 解析查询参数
var urlParams = new URLSearchParams(queryString);

// 获取特定参数的值
var name = urlParams.get('name'); // 输出: John
var age = urlParams.get('age');   // 输出: 30

console.log(name); // John
console.log(age);  // 30

 

2. 修改查询参数

可以通过 URLSearchParams 修改查询参数，然后更新 location.search。

JavaScript

复制

// 获取查询字符串
var queryString = location.search;

// 使用 URLSearchParams 解析查询参数
var urlParams = new URLSearchParams(queryString);

// 修改参数
urlParams.set('age', 31);

// 更新查询字符串
location.search = urlParams.toString();

// 新的 URL: https://example.com/page.html?name=John&age=31

 

3. 添加新的查询参数

可以通过 URLSearchParams 添加新的查询参数。

JavaScript

复制

// 获取查询字符串
var queryString = location.search;

// 使用 URLSearchParams 解析查询参数
var urlParams = new URLSearchParams(queryString);

// 添加新的参数
urlParams.append('gender', 'male');

// 更新查询字符串
location.search = urlParams.toString();

// 新的 URL: https://example.com/page.html?name=John&age=30&gender=male

 

4. 删除查询参数

可以通过 URLSearchParams 删除查询参数。

JavaScript

复制

// 获取查询字符串
var queryString = location.search;

// 使用 URLSearchParams 解析查询参数
var urlParams = new URLSearchParams(queryString);

// 删除参数
urlParams.delete('age');

// 更新查询字符串
location.search = urlParams.toString();

// 新的 URL: https://example.com/page.html?name=John

 

注意事项

1. 兼容性：URLSearchParams 是一个较新的 API，可能在某些旧版本的浏览器中不支持。如果需要支持旧浏览器，可以使用 location.search 结合正则表达式来解析查询参数。
2. 编码问题：在处理查询参数时，确保对参数值进行适当的编码和解码，以避免特殊字符导致的问题。

示例：使用正则表达式解析查询参数

如果需要支持旧浏览器，可以使用正则表达式来解析查询参数。

JavaScript

复制

function getQueryParams(queryString) {
    var params = {};
    var pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i].split('=');
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
    }
    return params;
}

// 获取查询字符串
var queryString = location.search;

// 解析查询参数
var params = getQueryParams(queryString);

// 获取特定参数的值
var name = params['name']; // 输出: John
var age = params['age'];   // 输出: 30

console.log(name); // John
console.log(age);  // 30

 

通过这些方法，您可以灵活地使用 location.search 来处理 URL 中的查询参数。