通过 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 无论是否分割成功,都会返回数组,所以最合适处理这样的问题。

 /**
* 获取 QueryString
* @param {string} [name] 参数名,可空
* @param {string} [search] search部分值,可空
* @return {string|object} 值或整个对象
*/
function getQueryString(name, search) {
var url = search || location.search;
var params = {}; if (url.indexOf('?') != -1) {
var arr = url.substring(1).split('&'); // 分割参数
for(var i = 0, l = arr.length; i < l; i ++) { // 遍历参数
var kv = arr[i].split('='); // 分隔键值对
params[kv.shift()] = kv.length ? decodeURIComponent(kv.join('=')) : undefined; // 如果有值就解码存储
}
} return name ? params[name] : params; // 输出 name 的值或整个参数对象
} // 假设 search 值为 ?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG
console.log( getQueryString() ); // => {uid: "KB1R+qyhl24II350DQ=", name: "abc", DEBUG: undefined}
console.log( getQueryString('uid') ); // => KB1R+qyhl24II350DQ=
// 或
console.log( getQueryString('name', '?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG') ); // => abc
 /**
* 获取 pathname
* @param {string} [name] 参数名,可空
* @param {string} [path] pathname部分值,可空
* @return {string|object} 值或整个对象
*/
function getPathNmae(name, path) {
var params = {};
path = (path || location.pathname)
.split('.html')[0] // 获取 .html 之前的部分
.split('/'); // 分隔目录 while (path.length) { // 从后遍历数组
var val = path.pop(); // 得到值
var key = path.pop(); // 得到键 if (key) {
params[key] = decodeURIComponent(val); // 解码存储
}
} return name ? params[name] : params; // 输出name的值或整个参数对象
} // 假设 pathname 值为 /index/id/22/name/abc.html
console.log( getPathNmae() ); // {id: "22", name: "abc"}
console.log( getPathNmae('name') ); // abc
// 或
console.log( getPathNmae('name', '/index/id/22/name/abc.html') ); // abc

Js中split()方法的正确使用的更多相关文章

  1. js中split()方法得到的数组长度

    js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...

  2. JS中split使用方法和数组中元素的删除

    JS中split使用方法和数组中元素的删除 JS中split使用方法 <script language="javascript"> function spli(){ d ...

  3. JS中split用法和数组中元素的删除

    JS中split用法 <script language="javascript"> function spli(){ datastr="2,2,3,5,6,6 ...

  4. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  5. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  6. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

  7. paip.编程语言方法重载实现的原理及python,php,js中实现方法重载

    paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...

  8. js中settimeout方法加参数

    js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript"> ...

  9. 关于JS中的方法是否加括号的问题

    js中的方法什么时候加括号什么时候不加括号呢,我们有时候经常就搞不清楚,记住下面这几点就好理解了. 1.函数做参数时都不要加括号. function fun(a){ alert(a); } funct ...

随机推荐

  1. virgo-tomcat-server最大并发连接数的修改

    首先,我们如果需要修改tomcat 7的最大连接数,我们可以去tomcat官方网站,查看Documentation 进入tomcat的官方网站http://tomcat.apache.org我们点击左 ...

  2. 【CF878E】Numbers on the blackboard 并查集

    [CF878E]Numbers on the blackboard 题意:给你一个长度为n个数列,你每次可以进行如下操作: 选取两个相邻的数x,y(x在y左面),然后将这两个数去掉,用x+2y替换它. ...

  3. iOS开发过程中使用Core Data应避免的十个错误

    原文出处: informit   译文出处:cocoachina Core Data是苹果针对Mac和iOS平台开发的一个框架,主要用来储存数据.对很多开发者来说,Core Data比较容易入手,但很 ...

  4. Android 国内集成使用谷歌地图

    extends:http://blog.csdn.net/qduningning/article/details/44778751 由于众做周知的原因在国内使用谷歌地图不太方便,在开发中如果直接使用会 ...

  5. Java虚拟机九 java.lang.String在虚拟机中的实现

    在Java中,Java的设计者对String对象进行了大量的优化,主要有三个特点: 1.不变性: 不变性是指String对象一旦生成,则不能再对它进行改变.String的这个特点可以泛化成不变(imm ...

  6. 神奇的thrust::device_vector与nvcc编译选项

    在C++的GPU库thrust中,有两种vector thrust::device_vector<int> D; //GPU使用的内存中的向量 thrust::host_vector< ...

  7. Git - 使用BitBucket和SourceTree进行源代码管理遇到POST git-receive-pack (chunked)

    我使用的是SourceTree Mac版,提交到BitBucket时出现 一直处于 POST git-receive-pack (chunked)  状态,经过百度,解决问题 在使用SourceTre ...

  8. 构建一个基于UIView的类别

    很多时候,如果我们想给我们的控件赋值,例如给控件的长度.宽度等赋值,很麻烦 需要先获取到当前frame,再整个临时frame来保存,修改赋值后再还给当前的frame,这都是重复性高的苦力活,解决方法就 ...

  9. cocoa 的大招(KVC的几点强大应用记录)

    1.利用KVC可以修改系统的只读变量 简单的KVC和我们平常通过一个“类名.属性”赋值一般: teacher.name = @"灭绝师太"; [teacher setValue:@ ...

  10. Java开发之上帝之眼系列教程前言&目录

    前言 如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝的角度去观察(了解)Java体系. ...