通过Javascript得到URL中的参数(query string)
来源:互联网 发布:爱国者淘宝店没了? 编辑:程序博客网 时间:2024/06/15 13:40
其中,红色部分便是URL中的参数。
那么,如何通过Javascript得到它呢?而且怎么从这么一堆字符串中找到我所需要的参数所对应的值呢?
方法一:
function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results == null ? "": decodeURIComponent(results[1]);}console.log(getParameterByName("param")) //yes
先来解释下这段代码吧:
1:定义一个 getParameterByName 函数,接收需要查询的参数的key,然后返回这个参数的value
2:name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
这句代码的作用是把 "[" 换成 "\[" , 把 "]" 换成 "\]" ,之所以做这么一个转换,是因为下面需要使用name这个变量去构造一个正则表达式,而 [ 和 ] 在正则中是关键字,所以需要转义。
3 var regex = new RegExp("[\\?&]" + name + "=([^&#]*)")
这句代码比较简单,匹配 ? 或者 & 然后是 name 然后是 = 和 非(&或者#)。
4 results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1]);
这两句放一起看把,首先 location.search 拿到全部的查询字符串(即文章最开头给的范例URL中红色部分),然后使用正则的exec方法去匹配出结果,这个方法会返回一个数组,在这个例子里面,results这个数组为["?params=yes","yes"]。这里要说明下,因为在正则中,给匹配出yes的部分加了个括号分组,所以结果中数组的第二项(results[1])为yes。
这个函数的确写的很优雅,很强大。但是呢,有一个缺点,就是每次我需要查询的一个参数的时候,都需要进行这么一个过程,构造正则,匹配location.search,返回结果。但是很明显,当我们页面载入完成的时候,URL是固定的,不会变得(不考虑html5 history api),所以每次进行这么一个过程很浪费资源,所以有了下面这个方法。
方法二
这段代码比较简单,唯一要说明的是 pl = /\+/g, s.replace(pl, " ")); 之所以会有这么一句,是因为在URL规范里面,加号(+)会被编码为空格,所有在decode的时候,需要把加号转回空格去。
这个方法里面,当页面加载完成时,会把URL中所有参数放在urlParams这个对象里面。之后只需要查找这个对象的属性就可以找到相应的结果了。
在实际工作中,个人认为,这种方法比第一种可取。
方法三
比较简单明了,这里对代码就不做解释了。和方法二一样,把结果存储在qs这个对象里面。
方法四
function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' '));}
如果是在一个页面里偶尔用一次,并且对代码的字节数有强迫症的人,可以使用这个方法。
最后,有一些jQuery插件也实现了这样的功能。不过个人认为这种小方法写成插件形式并不是很有必要的感觉,所以在这里就不列举出来了,可以自行谷歌。
- 通过Javascript得到URL中的参数(query string)
- 得到 URL 中的 query 参数
- 通过javascript获取URL中的参数
- JavaScript Query String URL Parameters Tutorial
- 通过javascript获得url参数
- 通过javascript获得url参数
- 通过 javascript获得url参数
- 通过javascript获得url参数
- 通过javascript获得url参数
- 通过javascript获得url参数
- Javascript 得到url指定参数的function
- AngularJS ui-router 中的query string参数
- Javascript获得Url中的参数
- Javascript获得Url中的参数
- javascript获得url中的参数
- javascript 获取url中的参数
- Javascript获取URL中的参数
- javascript获取url中的参数
- winform控件文本换行
- Office 2010每次打开都出现配置进度框的解决办法
- 堆和栈的区别(转过无数次的文章)
- 算法复杂度查表
- ext文件系统(我的翻译【本人英语不咋滴】)
- 通过Javascript得到URL中的参数(query string)
- OCP-1Z0-051-V9.02-113题
- linux修改系统时间
- 两道概率题求解(半原创)
- 经典java代码找错题
- CSS3之渐变Gradient
- Spring事务配置的五种方式
- HDU 2457 DNA repair(AC自动机 + DP 入门)
- shopt nullglob, failglob, extglob, globstar用法