西北马二最代码的gravatar头像
西北马二最代码2017-11-11 12:27:03
JavaScript语言获取URL键值对的几种方法的整理

版权声明:该博文为博主原创文章,转载时请注明出处!

一、承上

    昨天在“详细解读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);

打赏

分享到:

最近浏览
wkc4月9日
暂无贡献等级
yxq3305211月26日
暂无贡献等级
LiangJiaWen2017年12月26日
最代码贡献等级说明
马小跳2017年12月15日
最代码贡献等级说明
Mingelam2017年11月27日
最代码贡献等级说明
偏偏遇见你2017年11月23日
暂无贡献等级
遇见, LV22017年11月20日
最代码贡献等级说明
hugege2017年11月20日
最代码贡献等级说明
zjl1232017年11月17日
最代码贡献等级说明
wd123E222017年11月16日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友