在jQuery中查询字符串是否包含某个子串，可通过JavaScript原生方法结合jQuery实现，首先获取目标字符串，如URL查询字符串可用window.location.search；然后使用indexOf()方法检测，若返回值≥0则表示包含，if (indexOf('目标') !== -1)，或用正则表达式/目标字符串/.test(字符串)返回布尔值，若需jQuery元素内容查询，可用$(selector).text().indexOf('目标')，结合filter()筛选包含指定文本的元素，注意区分大小写，忽略大小写可添加i`标志或转换单侧大小写。
jQuery 中查询字符串参数获取方法详解
在 Web 开发中，我们经常需要从 URL 的查询字符串（Query String）中获取特定参数的值，根据 URL 中的用户 ID 加载个人信息，或根据搜索关键词展示对应结果，虽然 jQuery 本身没有直接提供解析查询字符串的内置方法，但我们可以结合原生 JavaScript 或封装 jQuery 工具函数来实现这一需求，本文将详细介绍几种在 jQuery 环境下查询字符串参数的常用方法，并提供最佳实践建议。
认识查询字符串
查询字符串是 URL 中问号（"?"）之后的部分，以键值对的形式传递参数，多个参数用"&"符号分隔。
https://example.com?name=张三&age=25&role=admin
在这个 URL 中，name、age、role 是参数名（键），张三、25、admin 是对应的参数值（值），我们的目标是从中快速获取指定参数名的值。
需要注意的是,查询字符串中的特殊字符通常需要进行 URL 编码，例如空格会被编码为 %20 或 。
使用原生 URLSearchParams（现代浏览器推荐）
现代浏览器（Chrome、Firefox、Edge、Safari 等）原生支持 URLSearchParams API，它是专门用于解析查询字符串的接口，语法简洁且高效，虽然这不是 jQuery 方法，但可以在 jQuery 项目中直接使用，并且是目前最推荐的方法。
实现步骤：
- 获取当前 URL 的查询字符串：通过
window.location.search获取（结果包含"?"，如?name=张三&age=25） - 创建
URLSearchParams对象：将查询字符串传入构造函数 - 通过
get()方法获取参数值：传入参数名，返回对应的值（若参数不存在，返回null） - 处理参数不存在的情况：可以设置默认值
代码示例：
// 获取当前 URL 的查询字符串（如 "?name=张三&age=25"）
const queryString = window.location.search;
// 创建 URLSearchParams 对象
const params = new URLSearchParams(queryString);
// 获取指定参数的值
const userName = params.get('name'); // 返回 "张三"
const userAge = params.get('age'); // 返回 "25"
const userId = params.get('id'); // 参数不存在，返回 null
// 处理参数不存在的情况（设置默认值）
const defaultRole = 'guest';
const userRole = params.get('role') || defaultRole; // 若 role 不存在，返回 "guest"
console.log(`用户名：${userName}，年龄：${userAge}，角色：${userRole}`);
高级用法：
URLSearchParams 还提供了更多实用方法：
// 获取所有参数名
for (const param of params) {
console.log(param[0], param[1]); // 输出每个键值对
}
// 检查参数是否存在
if (params.has('name')) {
console.log('name 参数存在');
}
// 获取所有同名参数的值（当参数重复时）
const hobbies = params.getAll('hobby'); // 返回数组
使用正则表达式解析
在不支持 URLSearchParams 的旧浏览器中，可以使用正则表达式来解析查询字符串，这种方法兼容性好，但代码相对复杂。
实现步骤：
- 使用正则表达式匹配参数名和值
- 将匹配结果存储到对象中
- 提供获取参数的方法
代码示例：
// jQuery 插件方式封装
(function($) {
$.getQueryParam = function(name) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
};
})(jQuery);
// 使用示例
const userName = $.getQueryParam('name'); // 返回 "张三"
const userAge = $.getQueryParam('age'); // 返回 "25"
const userId = $.getQueryParam('id'); // 参数不存在，返回 null
优点：
- 兼容所有浏览器
- 可以处理 URL 编码的参数值
- 封装为 jQuery 方法后使用方便
缺点：
- 代码相对复杂
- 需要处理各种边界情况
- 性能不如
URLSearchParams
手动解析查询字符串
对于需要完全控制解析过程的场景,可以手动实现查询字符串解析。
实现步骤：
- 移除查询字符串开头的 "?"
- 按 "&" 分割成多个键值对
- 对每个键值对按 "=" 分割
- 处理 URL 编码
- 存储到对象中
代码示例：
// 手动解析函数
function parseQueryString(queryString) {
const params = {};
if (!queryString) return params;
// 移除开头的 "?"
queryString = queryString.substring(1);
// 分割键值对
const pairs = queryString.split('&');
for (let i = 0; i < pairs.length; i++) {
const pair = pairs[i].split('=');
const key = decodeURIComponent(pair[0]);
const value = pair[1] ? decodeURIComponent(pair[1].replace(/\+/g, ' ')) : '';
params[key] = value;
}
return params;
}
// 使用示例
const queryString = window.location.search;
const params = parseQueryString(queryString);
const userName = params.name; // 返回 "张三"
const userAge = params.age; // 返回 "25"
使用 jQuery 插件
社区有许多优秀的 jQuery 插件可以处理查询字符串，如 jquery-querystring、query-object 等。
安装和使用：
<!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入查询字符串插件 --> <script src="https://cdn.jsdelivr.net/npm/jquery.query-object@1.2.2/jquery.query-object.min.js"></script>
使用示例：
// 获取所有参数
const allParams = $.query.get(); // 返回包含所有参数的对象
// 获取特定参数
const userName = $.query.get('name'); // 返回 "张三"
// 设置参数
$.query.set('page', 2); // 修改 URL 中的 page 参数
// 获取当前完整的查询字符串
const queryString = $.query.toString();
最佳实践建议
- 优先使用
URLSearchParams：在现代浏览器中，这是最简洁高效的方法 - 处理 URL 编码：始终记得对获取的参数值进行解码
- 参数不存在时的处理：提供默认值，避免代码出错
- 参数重复的情况：考虑是否需要处理同名参数的多个值
- 性能考虑：对于频繁获取参数的场景，可以缓存解析结果
完整示例：
// 获取查询参数的通用函数
function getUrlParam(name, defaultValue = null) {
// 优先使用 URLSearchParams
if (window.URLSearchParams) {
const params = new URLSearchParams(window.location.search);
const value = params.get(name);
return value !== null ? decodeURIComponent(value) : defaultValue;
}
// 降级到正则表达式方法
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(window.location.href);
if (!results) return defaultValue;
if (!results[2]) return defaultValue;
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// 使用示例
$(document).
