JavaScript解析URL GET参数有五种方法:一、用URLSearchParams API(需现代浏览器);二、手动分割字符串(兼容IE);三、正则匹配单个参数;四、封装为可复用函数;五、处理哈希后的查询参数(需双重解码)。

如果您在网页中需要读取URL中的GET参数,JavaScript提供了多种方式来解析查询字符串。以下是实现此功能的具体步骤:
一、使用URLSearchParams API解析
URLSearchParams是现代浏览器内置的接口,可直接解析URL查询字符串并提供键值对访问能力,兼容性良好(Chrome 49+、Firefox 44+、Edge 17+、Safari 10.1+)。
1、获取当前URL的查询部分:使用window.location.search获取以?开头的查询字符串。
2、创建URLSearchParams实例:将查询字符串传入new URLSearchParams()构造函数。
立即学习“Java免费学习笔记(深入)”;
3、通过get()方法获取指定参数值:例如params.get('id')返回id参数的值。
4、遍历所有参数:使用for...of循环配合entries()方法逐个读取键值对。
二、手动分割字符串解析
该方法不依赖浏览器API,适用于需支持老旧环境(如IE)的场景,原理是将查询字符串按&分割为键值对,再对每对按=分割提取键和值,并进行decodeURIComponent解码。
1、提取查询字符串:用location.href.indexOf('?')定位?位置,截取其后子串;若无?则为空字符串。
2、按&分割为参数数组:使用split('&')得到形如['name=张三', 'age=25']的数组。
3、遍历数组并拆分键值:对每个元素用indexOf('=')定位等号,分别取左侧为键、右侧为值,并用decodeURIComponent还原编码字符。
4、存入对象:将键值对写入空对象,如result[key] = value。
三、正则表达式匹配单个参数
当仅需获取某一个特定GET参数时,正则表达式可快速定位并提取其值,避免完整解析整个查询字符串,提升性能。
1、构造匹配模式:使用RegExp构造函数或字面量,例如new RegExp('[?&]' + key + '=([^&]*)'),确保匹配参数边界。
2、执行exec()方法:在location.href上执行正则匹配,捕获组[1]即为参数值。
3、判断匹配结果:若match存在且match[1]非undefined,则返回decodeURIComponent(match[1]);否则返回null。
四、封装为可复用函数
将上述任一解析逻辑封装为独立函数,便于多处调用,同时增强健壮性,例如自动处理空值、重复参数、编码异常等情况。
1、定义函数名及参数:如function getQueryParam(key) { ... },接收参数名作为唯一输入。
2、内部调用URLSearchParams或手动解析逻辑:优先尝试URLSearchParams,失败则降级至字符串分割法。
3、对返回值做空检查:若参数不存在,统一返回null或空字符串,避免undefined传播。
4、导出或挂载到全局:根据项目需求,可赋值给window.getQueryParam或通过ES模块导出。
五、处理URL中哈希后的查询参数
部分单页应用(SPA)将查询参数放在#之后(如index.html#?page=2),此时location.search为空,需从location.hash中提取并解析。
1、检测hash中是否包含?:使用location.hash.includes('?')判断。
2、截取hash中?及之后的内容:用location.hash.split('?')[1]获取真实查询字符串。
3、将该字符串传入标准解析逻辑:如new URLSearchParams(hashQuery)或手动分割流程。
4、注意双重编码风险:必须对从hash中提取的值执行两次decodeURIComponent,因浏览器会自动解码一次hash值。










