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

雨点打透心脏的1/2处 2021-06-24 15:58 810阅读 0赞

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"));等

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

调用：

**var Param= new Object();**

**Param= getUrlParam();**

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

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