JavaScript解析URL查询参数的三种实现方案对比

基础构造函数实现

初始方案采用了简单的构造函数模式。

 
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
function parseQueryString(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
} 
} 
var obj=new parseQueryString(url);
alert(obj.key1)
</script>

面向对象重构方案

在此基础上，进行了面向对象的重构，旨在提升代码的结构化程度。

 
<script type="text/javascript">
var url="www.taobao.com?key0=a&key1=b&key2=c";
var pQString={
createNew:function(url){
var str=url.split("?")[1],
items=str.split("&");
var arr,name,value;
for(var i = 0, l = items.length; i < l; i++){
arr=items[i].split("=");
name= arr[0];
value= arr[1];
this[name]=value;
} 
} 
} 
var obj=new pQString.createNew(url);
alert(obj.key1)
</script>

正则表达式高效解析

感谢草根程序猿的优化，该方法在严密性和效率上均有提升，值得深入学习。

 
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取，比我之前的split()方法效率高
} 
var result = {}, //创建一个对象，用于存name，和value
queryString =url || location.search.substring(1), //location.search设置或返回从问号 (?) 开始的 URL（查询部分）。
re = /([^&=]+)=([^&]*)/g, //正则，具体不会用
m;
while (m = re.exec(queryString)) { //exec()正则表达式的匹配，具体不会用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 对编码后的 URI 进行解码
} 
return result;
} 
// demo
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c");
alert(myParam.key1);
</script>

关键API与注意事项

关键知识点补充说明：

1、substr()与substring(start,stop) ，提取字符串中介于两个指定下标之间的字符。

重要事项：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。

参见https://www.jb51.net/w3school/js/jsref_substring.htm

2、location.search.substring(1) ，location.search设置或返回从问号 (?) 开始的 URL（查询部分）。

参见https://www.jb51.net/w3school/htmldom/prop_loc_search.htm

3、exec() 方法用于检索字符串中的正则表达式的匹配。太强大了，还不会用

参考https://www.jb51.net/w3school/js/jsref_exec_regexp.htm

4、使用 decodeURIComponent() 对编码后的 URI 进行解码。

参见https://www.jb51.net/w3school/js/jsref_exec_regexp.htm