JS获取URL传的值与解决获取URL中的中文参数出现乱码

Posted 2020-10-21 小C说猿

大家好，我是小C，

我们在项目开发中有时需要页面与页面之间的传值，那我们可能会选择用地址栏传递参数，那另外的那个页面就需要获取地址栏里的参数，今天分享下关于地址栏怎么传递参数与获取中文参数出现乱码的解决方法。请看代码：

 1 /**
 2  * 取地址栏的参数
 3  * 
 4  * @param key 
 5  * key为传递的参数名称 例如 http://localhost/test/test.html?id=1&name=张三,key就是id和name
 6  *
 7  * @returns
 8  */
 9 function getUrlParam(key){
10     // 获取参数，取到的是一串带参数的字符串，如：?id=1&name=张三
11     var url = window.location.search;        
12     // 用正则筛选地址栏
13     var reg = new RegExp("(^|&)"+ key +"=([^&]*)(&|$)");
14     // 匹配目标参数
15     var result = url.substr(1).match(reg);
16     //返回参数值
17     return result ? decodeURIComponent(result[2]) : null;
18 }

知道上面这个代码的原理，那用起来就显得很简单了，当我们需要获取地址栏参数的时候，可以直接调用方法 getUrlParam(key) 就可以了，并且很好的解决了中文参数的乱码问题。大家可以动手试试结果：

getUrlParam("id")   // 结果是 1
getUrlParam("name")  // 结果是 张三  

有不足的地方，请多多指教。