js分解url參數(shù)（面向?qū)ο?極簡(jiǎn)主義法應(yīng)用）
更新時(shí)間：2012年08月09日 16:53:04 作者：
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡(jiǎn)主義法)和一個(gè)分解url參數(shù)面試題，我作了一下修改，記錄下來(lái)
修改前：
<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>
感謝 草根程序猿很厲害把這個(gè)方法重寫了一下，更嚴(yán)密，高效了，最后面在些再學(xué)習(xí)一下?。。?
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取，比我之前的split()方法效率高
}
var result = {}, //創(chuàng)建一個(gè)對(duì)象，用于存name，和value
queryString =url || location.search.substring(1), //location.search設(shè)置或返回從問(wèn)號(hào) (?) 開(kāi)始的 URL（查詢部分）。
re = /([^&=]+)=([^&]*)/g, //正則，具體不會(huì)用
m;
while (m = re.exec(queryString)) { //exec()正則表達(dá)式的匹配，具體不會(huì)用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對(duì)編碼后的 URI 進(jìn)行解碼
}
return result;
}
// demo
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c");
alert(myParam.key1);
</script>
注：
1、substr()與substring(start,stop) ，提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
重要事項(xiàng)：與 slice() 和 substr() 方法不同的是，substring() 不接受負(fù)的參數(shù)。
參見(jiàn)http://www.dbjr.com.cn/w3school/js/jsref_substring.htm
2、location.search.substring(1) ，location.search設(shè)置或返回從問(wèn)號(hào) (?) 開(kāi)始的 URL（查詢部分）。
參見(jiàn)http://www.dbjr.com.cn/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于檢索字符串中的正則表達(dá)式的匹配。太強(qiáng)大了，還不會(huì)用
參考http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對(duì)編碼后的 URI 進(jìn)行解碼。
參見(jiàn)http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
復(fù)制代碼 代碼如下:
<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>
修改后：
復(fù)制代碼 代碼如下:
<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>
感謝 草根程序猿很厲害把這個(gè)方法重寫了一下，更嚴(yán)密，高效了，最后面在些再學(xué)習(xí)一下?。。?
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取，比我之前的split()方法效率高
}
var result = {}, //創(chuàng)建一個(gè)對(duì)象，用于存name，和value
queryString =url || location.search.substring(1), //location.search設(shè)置或返回從問(wèn)號(hào) (?) 開(kāi)始的 URL（查詢部分）。
re = /([^&=]+)=([^&]*)/g, //正則，具體不會(huì)用
m;
while (m = re.exec(queryString)) { //exec()正則表達(dá)式的匹配，具體不會(huì)用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對(duì)編碼后的 URI 進(jìn)行解碼
}
return result;
}
// demo
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c");
alert(myParam.key1);
</script>
注：
1、substr()與substring(start,stop) ，提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
重要事項(xiàng)：與 slice() 和 substr() 方法不同的是，substring() 不接受負(fù)的參數(shù)。
參見(jiàn)http://www.dbjr.com.cn/w3school/js/jsref_substring.htm
2、location.search.substring(1) ，location.search設(shè)置或返回從問(wèn)號(hào) (?) 開(kāi)始的 URL（查詢部分）。
參見(jiàn)http://www.dbjr.com.cn/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于檢索字符串中的正則表達(dá)式的匹配。太強(qiáng)大了，還不會(huì)用
參考http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對(duì)編碼后的 URI 進(jìn)行解碼。
參見(jiàn)http://www.dbjr.com.cn/w3school/js/jsref_exec_regexp.htm
相關(guān)文章
前端開(kāi)發(fā)之JS生成32位隨機(jī)數(shù)的方法舉例
最近有個(gè)需求,是需要生成32位長(zhǎng)度的隨機(jī)數(shù),下面這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)之JS生成32位隨機(jī)數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)拖拽照片墻，實(shí)現(xiàn)照片互換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
原生JS檢測(cè)CSS3動(dòng)畫是否結(jié)束的方法詳解
這篇文章主要介紹了原生JS檢測(cè)CSS3動(dòng)畫是否結(jié)束的方法,結(jié)合實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)css3屬性檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
第七篇Bootstrap表單布局實(shí)例代碼詳解(三種表單布局)
Bootstrap提供了三種表單布局：垂直表單，內(nèi)聯(lián)表單和水平表單。接下來(lái)通過(guò)本文給大家介紹Bootstrap表單布局實(shí)例代碼詳解，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JS實(shí)現(xiàn)的駝峰式和連字符式轉(zhuǎn)換功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)的駝峰式和連字符式轉(zhuǎn)換功能,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)字符串的駝峰式與連接符式轉(zhuǎn)換的實(shí)現(xiàn)技巧,涉及js字符串遍歷、轉(zhuǎn)換及正則表達(dá)式相關(guān)操作方法,需要的朋友可以參考下2016-12-12
js 如何實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的增刪改查
JavaScript操作數(shù)據(jù)庫(kù)JS操作Access數(shù)據(jù)庫(kù)，跟其他語(yǔ)言操作差不多，總結(jié)了一下習(xí)慣代碼，需要的朋友可以參考下2012-11-11
JavaScript new對(duì)象的四個(gè)過(guò)程實(shí)例淺析
這篇文章主要介紹了JavaScript new對(duì)象的四個(gè)過(guò)程,結(jié)合實(shí)例形式簡(jiǎn)單分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中new對(duì)象的四個(gè)過(guò)程相關(guān)原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
2018-07-07 
js 函數(shù)的執(zhí)行環(huán)境和作用域鏈的深入解析
在js中對(duì)象的外在表現(xiàn)形式為函數(shù)。
2009-11-11 
JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern)實(shí)例詳解
這篇文章主要介紹了JavaScript編程設(shè)計(jì)模式之觀察者模式(Observer Pattern),簡(jiǎn)單說(shuō)明了觀察者模式的概念、原理并結(jié)合實(shí)例形式詳細(xì)給出了觀察者模式的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下
2017-10-10