Skip to content

毛俊的博客

javascript从URL地址栏获取参数名和参数值

javascript1 min read

Location

LocationWindow对象的一个部分,可通过window.location属性来访问。 属性 | 描述 ---- | ------ hash | 设置或返回从井号 (#) 开始的 URL(锚)。 host | 设置或返回主机名和当前 URL 的端口号。 hostname | 设置或返回当前 URL 的主机名。 href | 设置或返回完整的 URL。 pathname | 设置或返回当前 URL 的路径部分。 port | 设置或返回当前 URL 的端口号。 protocol | 设置或返回当前 URL 的协议。 search | 设置或返回从问号 (?) 开始的 URL(查询部分)。

window.location.search取值

URL中“?”之前有一个“#”:“https://maojun.xyz/index.html#/version?name=tomcat&release=8”,则使用window.location.search得到的就是空(“”)。 因为“?name=tomcat&release=8”是属于“#/version?name=tomcat&release=8”这个串字符的,也就是说查询字符串search只能在取到“?”后面和“#”之前这个区间的内容,如果“#”之前没有“?”,search取值为空。

正则表达式取值:

1function getUrlSearch(name) {
2 // 未传参,返回空
3 if (!name) return null;
4 // 查询参数:先通过search取值,如果取不到就通过hash来取
5 var after = window.location.search;
6 after = after.substr(1) || window.location.hash.split('?')[1];
7 // 地址栏URL没有查询参数,返回空
8 if (!after) return null;
9 // 如果查询参数中没有"name",返回空
10 if (after.indexOf(name) === -1) return null;
11
12 var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
13 // 当地址栏参数存在中文时,需要解码,不然会乱码
14 var r = decodeURI(after).match(reg);
15 // 如果url中"name"没有值,返回空
16 if (!r) return null;
17
18 return r[2];
19}
20
21// 调用方法
22getUrlSearch("参数名");
23
24// 举例1:若地址栏URL为:abc.html?id=123&name=池子&url=http://www.baidu.com
25console.log('地址栏参数id',getUrlSearch("id"));
26console.log('地址栏参数name',getUrlSearch("name"));
27console.log('地址栏参数url',getUrlSearch("ursl"));
28// 123
29// 池子(不解码此处是乱码)
30// null
31
32
33// 举例2:若地址栏URL为:abc.html
34console.log('地址栏参数id',getUrlSearch("id"));
35// null

传统方法

1<script type="text/javascript">
2function UrlSearch()
3{
4 var name,value;
5 var str=location.href; //取得整个地址栏
6 var num=str.indexOf("?")
7 str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ]
8
9 var arr=str.split("&"); //各个参数放到数组里
10 for(var i=0;i < arr.length;i++){
11 num=arr[i].indexOf("=");
12 if(num>0){
13 name=arr[i].substring(0,num);
14 value=arr[i].substr(num+1);
15 this[name]=value;
16 }
17 }
18}
19var Request=new UrlSearch(); //实例化
20alert(Request.id);
21</script>

(完)

© 2020 by 毛俊的博客. All rights reserved.
Theme by LekoArts