原文地址:http://www.cnblogs.com/season-huang/p/3322561.html

我们知道,"GET"请求中,通常把参数放在URL后面,比如这样
http://www.cnblogs.com/season-huang/index?param=yes&article=1
其中,红色部分便是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),所以每次进行这么一个过程很浪费资源,所以有了下面这个方法。

方法二

var urlParams;
(window.onpopstate = function() {
var match,
pl = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function(s) {
return decodeURIComponent(s.replace(pl, " "));
},
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();

  //urlParams的结果
urlParams = {
param: "yes",
article: "1"
} console.log(urlParams["param"]); // -> "yes"
console.log("article" in urlParams); // -> true

这段代码比较简单,唯一要说明的是 pl = /\+/g, s.replace(pl, " ")); 之所以会有这么一句,是因为在URL规范里面,加号(+)会被编码为空格,所有在decode的时候,需要把加号转回空格去。

这个方法里面,当页面加载完成时,会把URL中所有参数放在urlParams这个对象里面。之后只需要查找这个对象的属性就可以找到相应的结果了。

在实际工作中,个人认为,这种方法比第一种可取。

方法三

var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));

qs["param"]; // yes
  qs["article"]; // 1
  qs["nothere"]; // undefined (object)

比较简单明了,这里对代码就不做解释了。和方法二一样,把结果存储在qs这个对象里面。

方法四

function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

如果是在一个页面里偶尔用一次,并且对代码的字节数有强迫症的人,可以使用这个方法。

最后,有一些jQuery插件也实现了这样的功能。不过个人认为这种小方法写成插件形式并不是很有必要的感觉,所以在这里就不列举出来了,可以自行谷歌。

本文参考 : http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values

(转)通过Javascript得到URL中的参数(query string)的更多相关文章

  1. 通过Javascript得到URL中的参数(query string)

    我们知道,"GET"请求中,通常把参数放在URL后面,比如这样http://www.cnblogs.com/season-huang/index?param=yes&art ...

  2. javascript对URL中的参数进行简单加密处理

    javascript的api本来就支持Base64,因此我们可以很方便的来进行编码和解码. var encodeData = window.btoa("name=xiaoming&a ...

  3. javaScript获取url中的参数

    var urlTools = { //获取RUL参数值 getUrlParam: function(name) { /*?videoId=identification */ var params = ...

  4. javascript 删除 url 中指定参数,并返回 url

    // 删除url中某个参数,并跳转function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin + ...

  5. 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = ...

  6. 使用javascript获取url中的参数

    方法一: //取url参数 var type = request("type") function request() { var query = location.search; ...

  7. javascript获取url中对应参数的方法

    利用正则表达式和location.search方法,可以简便的获取到对应的参数:   function getQueryString(name) {var reg = new RegExp(" ...

  8. JavaScript:隐藏Url中的参数

    <script type="text/javascript"> function submitForm(url, data) { var eleForm = docum ...

  9. JavaScript如何获取网页url中的参数

    我们可以自定义一个公共函数来实现网页url中的参数获取,返回的是一个数组 GetUrlRequest: function () { var url = decodeURI(location.searc ...

随机推荐

  1. Python学习系列(五)(文件操作及其字典)

    Python学习系列(五)(文件操作及其字典) Python学习系列(四)(列表及其函数) 一.文件操作 1,读文件      在以'r'读模式打开文件以后可以调用read函数一次性将文件内容全部读出 ...

  2. FPGA中的“门”

    逻辑门 在ASIC的世界里,衡量器件容量的常用标准是等效门.这是因为不同的厂商在单元库里提供了不同的功能模块,而每个功能模块的实现都要求不同数量的晶体管.这样在两个器件之间比较容量和复杂度就很困难. ...

  3. ffmpeg综合应用示例(一)——摄像头直播

    本文的示例将实现:读取PC摄像头视频数据并以RTMP协议发送为直播流.示例包含了 1.ffmpeg的libavdevice的使用 2.视频解码.编码.推流的基本流程 具有较强的综合性. 要使用liba ...

  4. angular 三大核心函数

    1.$watch  angular监听   由于angular一直在实时监听,所以比react和vue效率要低 $scope.$watch('aModel', function(newValue, o ...

  5. xunsearch安装使用

    目录 1.下载 2.进入,安装 3.安装成功后,启动后台服务 4.安装PHP-SDK 安装步骤 1.下载 wget http://www.xunsearch.com/download/xunsearc ...

  6. thread_local变量

    thread_local变量是C++ 11新引入的一种存储类型.它会影响变量的存储周期(Storage duration),C++中有4种存储周期: automatic static dynamic ...

  7. UE4动画功能整理

    转自:http://blog.ch-wind.com/ue4%E5%8A%A8%E7%94%BB%E5%8A%9F%E8%83%BD%E6%95%B4%E7%90%86/ 工欲善其事必先利其器,最近一 ...

  8. Linux学习笔记 -- Shell 变量

    定义变量 语法: 变量名=值 myVal= 需要注意一下变量明德规则: 首个字符必须为字母(a-z,A-Z). 中间不能有空格,可以使用下划线(_). 不能使用标点符号. 不能使用bash里的关键字( ...

  9. MAPREDUCE的原理和使用

    简介: Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分 ...

  10. Python基础学习六 操作Redis

    import redis r = redis.Redis(host=',db=1) #set get delete setex 都是针对string类型的 k-v # r.set('louis_ses ...