js提取地址栏参数

  • 时间:2018-06-06 01:57 作者:web前端经验分享 来源:web前端经验分享 阅读:210
  • 扫一扫,手机访问
摘要:提取地址栏参数是前台开发中经常遇到的问题,方法也有多种,其中比较方便简洁的是正则法,本文主要讲解使用正则法提取地址栏中的参数。参数提取函数上图中的方法应该是网上最常见的一种提取url参数的方法,简单实使用。但是笔者相信还是会有部分人仅仅是把这段代码复制过来直接使用而没有真正的去弄懂它。上图中代码量虽

提取地址栏参数是前台开发中经常遇到的问题,方法也有多种,其中比较方便简洁的是正则法,本文主要讲解使用正则法提取地址栏中的参数。

js提取地址栏参数

参数提取函数

上图中的方法应该是网上最常见的一种提取url参数的方法,简单实使用。但是笔者相信还是会有部分人仅仅是把这段代码复制过来直接使用而没有真正的去弄懂它。上图中代码量虽少,涉及的知识点却不少。主要有:

1、js中RegExp类型及正则表达式;2、window.location对象的使用法;3、stringObject的substr()和match()方法,以及match()函数返回值问题;4、JavaScript 全局函数unescape();

上图函数解析:

行3:实例化一个RegExp对象,来看传递给RegExp构造函数的参数:

(^|&)了解为匹配字符直接开始或者者以&开始,如匹配name=xx或者&name=xx

([^&]*)了解为不包含&的任意字符串(方括号表达式中用,此时它表示不接受该字符集合)

(&|$)了解为匹配字符直接结束或者者以&开始,如匹配tom或者&tom

行4:window.location.search返回url的查询字符串,这个字符串以问号开头。

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。使用法:stringObject.substr(start,length),假如省略了length参数,那么返回从 stringObject 的开始位置到结尾的字串。

假设浏览器地址栏url为http://www.baidu.com?name=tom&age=20,则:

window.location.search="?name=tom&age=20"

window.location.search.substr(1)="name=tom&age=20"

match() 方法可在字符串内检索指定的值,或者找到一个或者多个正则表达式的匹配。使用法:stringObject.match(searchvalue)或者stringObject.match(regexp)。前者检索字符串,后者匹配正则表达式。

match方法的匹配结果为一个数组。这个数组分为4部分,依次为:

  1. 整个正则表达式匹配的字符串

  2. 括号匹配的子串,每一对括号对应一个子串

如下图:

js提取地址栏参数

match()

行5:由match()的返回值可知,r[2]即为对应参数的value值。unescape() 函数对由 escape() 编码的字符串进行解码。

至此,地址栏url参数提取函数GetQueryString()的内部过程已经清晰;需要提取什么参数,直接调使用GetQueryString('参数名')就可。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部