版权声明：该博文为博主原创文章，转载时请注明出处！
一、承上
昨天在“详细解读URL的组成”（http://www.zuidaima.com/blog/3627136266750976.htm）这篇博文中，我们学习了统一资源定位符的相关组成成分，写昨天的那篇博文也是为今天这篇博文的实现打下基础，希望对大家理解这一块儿内容有所帮助。
还是昨天我们那个例子中的URL地址： http://www.coder.com:8080/WebApp/WebApp1.aspx?sex=man&age=20#name
二、启下
在对URL进行操作时，我们首先要确定获取的是它的哪一组成部分，接下来，我们通过对照着例子中所给出的URL地址和梳理window.location的各种方法，来掌握如何进行URL各组成部分的获取；
1、window.location.href 获取到的是整个URL字符串，结合例子中的URL地址，则返回： http://www.coder.com:8080/WebApp/WebApp1.aspx?sex=man&age=20#name
2、window.location.protocol 获取到的是URL的协议部分，结合例子中的URL地址，则返回：http：
3、window.location.host 获取到的是URL的主机部分，结合例子中的URL地址，则返回：www.coder.com
4、window.location.port 获取到的是URL的端口部分，结合例子中的URL地址，则返回：“”，因为是默认端口，所以你即使添加了端口，也只是会返回一个空字符串，但是当你将端口重定义以后，那么返回的将是你重新定义后的端口号
5、window.location.pathname 获取到的是URL的文件路径部分，也就是文件地址，结合例子中的URL地址，则返回：/WebApp/WebApp1.aspx
6、window.location.search 获取到的是URL的查询参数部分，结合例子中的URL地址，则返回：?sex=man&age=20
7、window.location.hash 获取到的是URL的锚部分，可以用这个方法取到指定参数：function；结合例子中的URL地址，则返回：#name
三、撸几段代码来尝试获取URL地址的参数部分（这在面试过程中感觉是必问的问题呀，嘤嘤嘤！）
1、方法一：正则表达式法
百度一下，就会出现这个正则表达式的方法，而且这个方法可以准确的获取到你想要的参数部分的具体的值。
function getUrlString(){
//定义一个获取URL参数部分的函数
function getQueryString(name){
//这个正则表达式利用&符号和name来解析URL的参数部分
//不会正则表达式的同学可继续关注我后续的博客，会对正则表达式做一个总结
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
//通过window.location.search方法来定位到URL的参数部分
//window的location对象，search会定位到URL的？
//substr是从一个指定的位置开始返回一个指定长度的字符串，这里我们指定的是？，所以要想获取？之后的内容，则应该是substr(1)
//match就是你要匹配的内容
var r = window.location.search.substr(1).match(reg);
if(r!= null){
//要返回的值，这里就是我们获取到的URL的值的一个数组
return unescape(r[2]);
}
return null;
}
//定义一个判断函数，用来检测在上面的函数中获得的URL参数部分是否不为空
function getCompareString(){
var myurl = getQueryString("url");
if(myurl != null && myurl.toString().length > 1){
alert(getQueryString("url"));
}
}
}
2、方法二：将我们获取到的值直接塞进一个我们自己定义的数组当中，哈哈哈，先撸一段代码，哦，不对，我们先来定义一下我们的URL，还是利用上个博客提到那个例子
http://www.coder.com:8080/WebApp/WebApp1.aspx?sex=man&age=20#name
确定我们想要获取到的部分：?sex=man&age=20，现在可以开撸了
function getUrlString(){
var urlStr = window.location.search; //?sex=man&age=20
if (urlStr != null && urlStr.toString().length > 1){
var myUrlStr = urlStr.substr(1); //sex=man&age=20
var array1 = myUrlStr.split("&"); //["sex=man"],["age=20"]
var getString = {};
for(var i = 0; i < array1.length;i++){
getString[array1[i].split("=")[0]] = array1[i].split("=")[1]; //["sex","man"]["age","20"]
}
return getString;
}else{
console.log("无参数");
}
}
//调用方法
var gus = new getUrlString();
var usersex = gus.sex;
var userage = gus.age;
console.log(usersex);
最近浏览
