通过 js 获取 QueryString (location.search部分) 参数很常见,网上代码也满天飞。
不过现在的框架,基本上都通过路由伪静态了,把以前的 QueryString 变成了
pathname (location.pathname部分) 路径参数了。
例如:/index.html?id=22&name=abc
很多框架都是渲染为 /index/id/22/name/abc.html
那么怎么获取 pathname 级的参数呢?有人觉得改下 QueryString 代码的正则即可。
虽然可以,但是比较麻烦,而且正则写的不严谨,可能匹配不精确,导致有些参数匹配不到。
其实无论是 QueryString,pathname,用正则都不是最合理的,而应该采取 split 大法。
为什么这么说呢,我举个例子,大家就会明白了。
例如 /index.html?id=22&name=abc&DEBUG
例如 /index/id/22/name/ab.cd?DEBUG
正则都很难处理这的情况,QueryString 到还好,pathname 的,就纠结的要死了。
这种情况,我们就应该祭出 split 大法来处理这些烦人的问题了。
由于 split 无论是否分割成功,都会返回数组,所以最合适处理这样的问题。
1 /**2 * 获取 QueryString3 * @param {string} [name] 参数名,可空4 * @param {string} [search] search部分值,可空5 * @return {string|object} 值或整个对象6 */
7 functiongetQueryString(name, search) {8 var url = search ||location.search;9 var params ={};10
11 if (url.indexOf('?') != -1) {12 var arr = url.substring(1).split('&'); //分割参数
13 for(var i = 0, l = arr.length; i < l; i ++) { //遍历参数
14 var kv = arr[i].split('='); //分隔键值对
15 params[kv.shift()] = kv.length ? decodeURIComponent(kv.join('=')) : undefined; //如果有值就解码存储
16 }17 }18
19 return name ? params[name] : params; //输出 name 的值或整个参数对象
20 }21
22 //假设 search 值为 ?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG
23 console.log( getQueryString() ); //=> {uid: "KB1R+qyhl24II350DQ=", name: "abc", DEBUG: undefined}
24 console.log( getQueryString('uid') ); //=> KB1R+qyhl24II350DQ=
25 //或
26 console.log( getQueryString('name', '?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG') ); //=> abc
1 /**2 * 获取 pathname3 * @param {string} [name] 参数名,可空4 * @param {string} [path] pathname部分值,可空5 * @return {string|object} 值或整个对象6 */
7 functiongetPathNmae(name, path) {8 var params ={};9 path = (path ||location.pathname)10 .split('.html')[0] //获取 .html 之前的部分
11 .split('/'); //分隔目录
12
13 while (path.length) { //从后遍历数组
14 var val = path.pop(); //得到值
15 var key = path.pop(); //得到键
16
17 if(key) {18 params[key] = decodeURIComponent(val); //解码存储
19 }20 }21
22 return name ? params[name] : params; //输出name的值或整个参数对象
23 }24
25 //假设 pathname 值为 /index/id/22/name/abc.html
26 console.log( getPathNmae() ); //{id: "22", name: "abc"}
27 console.log( getPathNmae('name') ); //abc
28 //或
29 console.log( getPathNmae('name', '/index/id/22/name/abc.html') ); //abc