js怎么获取路径后面带过来的参数？

1.js怎么获取路径后面带过来的参数？

博主这里提供三种方法，但是推荐第二种和第三种方法，新手可以先从第一种方法学习，后续再学第二种和第三种。

路径：https://域名/xxx/xxx/xxx.html?参数id=12&参数name=34&参数type=56&参数value=78

第一种：利用split进行处理（简单，用于入门）

首先在$(document).ready(function(){}中写下获取路径后面所有参数的方法，

即var urlParam = decodeURI(window.location.href.split("?")[1]);

其中window.location.href获取链接，然后split在？处进行截断，

即window.location.href.split("?")[1]获取的是路径后面所有参数的字符串；window.location.href.split("?")[0]获取的是路径链接（这个链接后面不带参数）

即获取到的是：参数id=12&参数name=34&参数type=56&参数value=78，

decodeURI是因为浏览器会对参数自动加密，所以该方法是解密的过程。

然后，下面接下来具体获取每个参数的值，因为路径后面往往携带的不止一个参数，

var 参数id = urlParam.split("参数id=")[1].split("&")[0];

将获取到的字符串进一步拆分，这句代码意思是获取第一个参数的值，

即取出"参数id="和"&"之间的字符串，结果为"12"，

后面的参数照葫芦画瓢：

var 参数name = urlParam.split("参数name=")[1].split("&")[0];

var 参数type = urlParam.split("参数type =")[1].split("&")[0];

var 参数value = urlParam.split("参数value =")[1].split("&")[0];

这样就获取所有的参数字符串了，但是这种方法比较局限，在项目开发中不建议使用。

第二种：利用正则进行处理（难，光理解就比较耗时）

路径：https://域名/xxx/xxx/xxx.html?参数id=12&参数name=34&参数type=56&参数value=78

因为我们知道路径后面携带的参数可以为多个，只需要在url后面的“？”添加形如：参数名=参数值 就可以了，如果有多个参数，那么只需要在前一个参数值的后面添加上&字符，再加上形如参数名=参数值 就可以实现携带多个参数和值了。

下面我直接给出代码：

function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); //匹配目标参数
      if(r != null){
          return decodeURIComponent(r[2]);
//这里为什么是从第三个字符解析呢？不知道这样理解对不对，因为路径后面的参数形式为参数名=参数值，而第一个字符为参数名，第二个为=，第三个就为参数值了。。。因为下面调用的时候得出的就是参数值
      }
      return null;//返回参数值
}

函数里面的正则是寻找&+name(路径后面携带的参数名)+=值（参数名对应的值）+&，其中字符&可以不存在（注意：这里的&符号不存在，指的是后面的&字符可以不存在（因为路径后面的最后一个参数值得后面是没有&字符的），不是前面的）

上述正则寻找的对象简写为：参数名=参数值

这里我解释下这段代码：

首先在获取路径参数函数getUrlParam里面构造一个含有目标参数的正则表达式对象，其中正则（^|&）表示的是匹配字符串开头或者&字符，一般情况下，&这个字符只会出现在路径“？”后面，而“？”后面一般拼接的就是前一个页面携带的参数和对应的值；

然后后面加上name（name是getUrlParam函数的参数，为了匹配路径后面的参数！），再然后又是一个正则=([^&]*)(&|$)，意思是匹配=字符后面开头的任意字符，&字符可以不存在（因为*表示匹配任何包含零个或多个&字符），^表示匹配字符开头，$表示匹配字符的末尾；前面的/符号和后面的/符号分别表示正则表达式的开始和结束。

随后开始匹配目标参数，window.location.search上面也说过了，获取的是路径后面的“？”后面的所有字符串，包含“？”字符，然后再substr(1)获取的是“？”后面的所有字符串（substr()是字符串封装的一个方法，作用是从起始索引号提取字符串中指定数目的字符。这里的意思是获取？后面所有的字符串），然后对获取的字符串进行正则匹配，并赋值给r；

最后进行判断，如果r不为空，那么返回参数名的值，因为匹配到的r是这种形式：参数名=参数值，然而r[2]（r[0]是变量名，r[1]是=符号）意思是取第三个字段，也就是参数值，将取得的参数值并返回，所以每次调用的时候，只需要将参数名写进getUrlParam函数括号里并调用该函数就可以得到对应的参数值了。

调用方法：

alert(getUrlParam("参数名1"))；

alert(getUrlParam("参数名2"));等

第三种：字符串分割分析法（普通，最建议学习这个）

function getUrlParam() { 
    var url = location.search; //获取url中"?"符后的字符串包括‘？’ ，window.location.href获取的是url完整的字符串
    var theParam = new Object(); 
    if (url.indexOf("?") != -1) {
        var strs = url.substring(1);
        strs = strs.split("&"); //将获取到的字符串从&分割，输出参数数组，即输出[参数1=xx,参数2=xx,参数3=xx,...]的数组形式
        for(var i = 0; i < strs.length; i ++) { //遍历参数数组
            theParam[strs[i].split("=")[0]]=decodeURIComponent(strs[i].split("=")[1]);
        } 
    } 
    return theParam; //返回参数值
}

调用：

var Param= new Object();

Param= getUrlParam();

参数1 = Param['参数1'];

参数2 = Param['参数2'];