js分解url參數(shù)(面向?qū)ο?極簡主義法應(yīng)用)
更新時間:2012年08月09日 16:53:04 作者:
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡主義法)和一個分解url參數(shù)面試題,我作了一下修改,記錄下來
修改前:
<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>
感謝 草根程序猿很厲害把這個方法重寫了一下,更嚴(yán)密,高效了,最后面在些再學(xué)習(xí)一下?。?!
<script type="text/javascript">
function getQueryString(url) {
if(url) {
url=url.substr(url.indexOf("?")+1); //字符串截取,比我之前的split()方法效率高
}
var result = {}, //創(chuàng)建一個對象,用于存name,和value
queryString =url || location.search.substring(1), //location.search設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)。
re = /([^&=]+)=([^&]*)/g, //正則,具體不會用
m;
while (m = re.exec(queryString)) { //exec()正則表達(dá)式的匹配,具體不會用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對編碼后的 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) ,提取字符串中介于兩個指定下標(biāo)之間的字符。
重要事項:與 slice() 和 substr() 方法不同的是,substring() 不接受負(fù)的參數(shù)。
參見http://www.dhdzp.com/w3school/js/jsref_substring.htm
2、location.search.substring(1) ,location.search設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)。
參見http://www.dhdzp.com/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于檢索字符串中的正則表達(dá)式的匹配。太強(qiáng)大了,還不會用
參考http://www.dhdzp.com/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對編碼后的 URI 進(jìn)行解碼。
參見http://www.dhdzp.com/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>
感謝 草根程序猿很厲害把這個方法重寫了一下,更嚴(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)建一個對象,用于存name,和value
queryString =url || location.search.substring(1), //location.search設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)。
re = /([^&=]+)=([^&]*)/g, //正則,具體不會用
m;
while (m = re.exec(queryString)) { //exec()正則表達(dá)式的匹配,具體不會用
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 對編碼后的 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) ,提取字符串中介于兩個指定下標(biāo)之間的字符。
重要事項:與 slice() 和 substr() 方法不同的是,substring() 不接受負(fù)的參數(shù)。
參見http://www.dhdzp.com/w3school/js/jsref_substring.htm
2、location.search.substring(1) ,location.search設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)。
參見http://www.dhdzp.com/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于檢索字符串中的正則表達(dá)式的匹配。太強(qiáng)大了,還不會用
參考http://www.dhdzp.com/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 對編碼后的 URI 進(jìn)行解碼。
參見http://www.dhdzp.com/w3school/js/jsref_exec_regexp.htm
淺談javascript六種數(shù)據(jù)類型以及特殊注意點
這篇文章主要介紹了javascript六種數(shù)據(jù)類型以及特殊注意點,有需要的朋友可以參考一下
2013-12-12
javascript實現(xiàn)將文件保存到本地方法匯總
本文給大家匯總介紹了3中使用javascript實現(xiàn)將文件保存到本地的方法,非常的簡單實用,有需要的小伙伴可以參考下。
2015-07-07
js實現(xiàn)網(wǎng)頁圖片延時加載 提升網(wǎng)頁打開速度
這篇文章主要為大家介紹了js實現(xiàn)網(wǎng)頁圖片延時加載,提升網(wǎng)頁打開速度,感興趣的小伙伴們可以參考一下
2016-01-01
uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07 
