西北马二最代码的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);

打赏

分享到:

最近浏览
zjl123昨天
暂无贡献等级
wd123E22前天
暂无贡献等级
wk96257192011月15日
暂无贡献等级
weienqing11月14日
最代码贡献等级说明
暂无贡献等级
187819792311月13日
暂无贡献等级
junwuxie11月13日
最代码贡献等级说明
xmjiangbin11月13日
最代码贡献等级说明
kevindel11月13日
暂无贡献等级
mySong11月13日
最代码贡献等级说明
Watson11月13日
最代码贡献等级说明
kaka2299111月13日
最代码贡献等级说明
nsq000611月13日
最代码贡献等级说明
uuu121011月13日
最代码贡献等级说明
程序猿全敏 LV311月13日
最代码贡献等级说明
a104873318011月12日
暂无贡献等级
狐言不语11月11日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友