本文详解利用jQuery获取URL参数的两种方法：原生JavaScript函数扩展与封装插件。重点解析正则表达式匹配逻辑，并针对中文参数乱码问题，指出encodeURI与decodeURI的对应关系。同时提供$.Request取值及$.UrlUpdateParams追加参数的完整代码实现。
在实际开发中，经常需要获取当前页面的URL地址以及解析其中的查询参数。本文将通过文字解析结合代码示例的方式，详细讲解如何使用jQuery及相关JavaScript技术完成这一任务。
获取完整URL地址
首先介绍如何获取完整的URL地址，这部分操作相对简单，核心代码如下：
复制代码
window.location.href;这里主要利用了JavaScript原生的window对象属性，并未涉及jQuery的特殊语法，直接访问location.href即可获取当前页面的完整链接。
使用正则表达式提取参数
相比之下，从URL中提取特定参数较为复杂，通常需要借助正则表达式。因此，掌握JavaScript正则表达式的应用至关重要。
我们先看纯JavaScript环境下如何提取URL中的某个参数值：
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}通过定义一个函数并传入目标参数名，即可获取对应的参数值。例如，假设当前URL为：
http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx
若要获取参数reurl的值，调用方式如下：
复制代码
var xx = getUrlParam('reurl');理解了原生JavaScript的提取逻辑后，我们可以将其封装为jQuery的扩展方法，从而通过jQuery链式调用获取参数。以下代码展示了如何为jQuery扩展getUrlParam()方法：
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
})(jQuery);完成扩展后，即可通过jQuery的选择器语法直接获取参数值，示例如下：
复制代码
var xx = $.getUrlParam('reurl');完整实现代码如下：
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//方法二：
(function ($) {
$.getUrlParam = function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
})(jQuery);
//方法二：
var xx = $.getUrlParam('reurl');
//方法一：
// var xx = getUrlParam('reurl');
alert(xx);
});
//方法一：
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
</script>
中文参数乱码问题与编码规范
2014-4-23 修改
在实际测试中发现，当URL中包含中文参数时，上述方法解析出的结果会出现乱码。经调试确认，问题在于传递参数时使用了encodeURI进行编码，而解析时却使用了unescape进行解码。将解码函数修改为decodeURI后，中文参数即可正常显示。
附：W3School相关文档说明：
JavaScript unescape() 函数
unescape() 函数用于对通过 escape() 编码的字符串进行解码操作。
| 参数 | 描述 |
|---|---|
| string | 必需。要解码或反转义的字符串。 |
说明
该函数通过识别形如 %xx 和 %uxxxx 的字符序列（其中x代表十六进制数字），将其替换为对应的Unicode字符 \u00xx 和 \uxxxx 来完成解码过程。
提示和注释
注意：ECMAScript v3 标准已移除 unescape() 函数并建议弃用，官方推荐使用 decodeURI() 和 decodeURIComponent() 替代。
综上所述，JavaScript中对参数进行编码和解码时，必须保持方法一致：
escape() 对应 unescape()
encodeURI() 对应 decodeURI()
encodeURIComponent() 对应 decodeURIComponent()
基于对象存储的取值与追加参数方法
此外，网上还有一种基于对象属性存储的JavaScript获取URL参数方法：
<script language="JavaScript" type="text/javascript">
function GetUrlParms()
{
var args=new Object();
var query=location.search.substring(1);//获取查询串
var pairs=query.split("&");//在逗号处断开
for(var i=0;i<pairs.length;i++)
{
var pos=pairs[i].indexOf('=');//查找name=value
if(pos==-1) continue;//如果没有找到就跳过
var argname=pairs[i].substring(0,pos);//提取name
var value=pairs[i].substring(pos+1);//提取value
args[argname]=unescape(value);//存为属性
}
return args;
}
var args = new Object();
args = GetUrlParms();
//如果要查找参数key:
if(args["id"]!=undefined)
{
//如果要查找参数key:
var value1 = args["id"] ;
alert(value1);
}</script>jQuery获取URL参数及在URL中追加参数的实现
(function ($) {
$.extend({
Request: function (m) {
var sValue = location.search.match(new RegExp("[\?\&]" + m + "=([^\&]*)(\&?)", "i"));
return sValue ? sValue[1] : sValue;
},
UrlUpdateParams: function (url, name, value) {
var r = url;
if (r != null && r != 'undefined' && r != "") {
value = encodeURIComponent(value);
var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");
var tmp = name + "=" + value;
if (url.match(reg) != null) {
r = url.replace(eval(reg), tmp);
}
else {
if (url.match("[\?]")) {
r = url + "&" + tmp;
} else {
r = url + "?" + tmp;
}
}
}
return r;
}
});
})(jQuery);具体使用方法如下：
dev.zhang.com/IOF.Signup/index_uscn_chs.html?act=1
1、取值操作：
$.Request("act") = 1
2、在URL中追加参数：
$.UrlUpdateParams(window.location.href, "mid", 11111),
执行后，window.location.href将变为包含?mid=11111的新地址。