对于正则表达式的妙用

  转载：好多关于正则表达式的都是介绍语法的，这个告诉你正则表达式有什么用处。

对于正则表达式，在很多人脑海中就是一堆完全不知所云的特殊符号，看了第一眼，就不想再看第二眼，学习难度可想而知，其实这种看法完全是因为多余正则表达式没有过多的接触，如果花时间去了解正则表达式，你会发现，其实他没有那么难学，也没有那么难理解，唯一难的就是组合起来之后，可读性比较差，当然本文并不是旨在讲解如何入门正则表达式，如果你对正则表达式的基础知识尚有所欠缺，可以点击这里先去了解一下基础知识。下面讲一下在使用正则表达式过程中的一些巧妙用法。

一、解析url参数

对于解析url参数我们以前的做法都是遍历location对象中search中的所有参数，并取出我们想要的参数，如下代码：

function getqueryString(name) {
    var search = location.search.substr(1),
        pArr = search.split('&'),
        length = pArr.length;
    for (var i=0; i<length; i++) {
        var arr = pArr[i].split('='),
            key = arr[0],
            value = arr[1];
        if (key === name) {
            return decodeURIComponent(value);
        }
    }
    return null;
}

这种方式比较容易理解，但是由于有双层循环，所以执行效率可能比较低，下面介绍如何使用正则表达式来解析url参数，先上代码：

function getqueryString(name) {
    var reg = new RegExp('[?&]' + name +'=([^&$]*)');
    if (reg.test(location.search)) {
        return decodeURIComponent(RegExp.$1);
    }
    return null;
}

代码是不是瞬间减少了不少，而且效率也提升了，但是如何理解呢？我们先构造一个search参数，?name=dean&site=www.deanhan.cn

在这种情况下，如果我们想取出name的值，正则表达式可以这么写：

/\?name=([^&]*)/

由于name参数及其值后面还有参数site中间还有连接符&，所以我们只需要匹配以?name=开头，到下一个&符号之间的所有字符就是我们需要的值，这里需要注意的是?在[]外面是需要加\转义，因为\在[]外面是有特殊含义的，表示零个或者一个，而在[]则不需要转义。

继续，如果我们需要取出site的值，正则表达式又该怎么写呢？

/&site=([^$]*)/

为什么和第一个不一样呢？因为site参数前面还有name参数及其值，中间以&符分割，而site的值后面再没有别的参数，所以我们需要匹配的是以&site=开始到字符串结束之间的这部分内容。

综合上面两种情况，加上参数名是动态的，所以我们使用动态生成的表达式：

new RegExp('[?&]' + name +'=([^&$]*)')

二、千位分割

千位分割就是将数字价格左右到左按照三个一个千位添加","，比如12345678，千位分割后12,345,678。先看一下代码：

function segment(s, seg) {
    var seg = seg || ",";
    if (typeof s === "number") {
        s += "";
    }
    return s.replace(/\B(?=(\d{3})+\b)/g, seg);
}

其中\b代表的是单词边界，\B则是区分，匹配所有的非单词边界，这里面还使用了一个知识点是正向断言，如果你想了解更多关于断言的知识，可以点击这里,整个表达式表示找到所有后面包含三个数字和单词边界的非单词边界并替换为","，有点绕，但是就是这么个意思，可以细细体会一下。

使用：

console.log(segment(12345678,',')); // 12,345,678

三、驼峰命名转换

将以"-"符号连接的字符串转换成驼峰命令的方式，如ab-cd-ef-gh转换成abCdEfGh，代码如下：

function toCamel(str) {
    return str.replace(/[\-](\w)/g, function(s0, s1){
        return s1.toUpperCase();
    });
}

这个比较简单就是将"-"符后面的字母替换为大写就好了，这里有一点建议，[]中的"-"最好加上转义符"\"，虽然不加也不会报错，但是容易和[a-zA-Z0-9]中的-混淆。

使用：

console.log(toCamel('ab-cd-ef-gh')); //abCdEfGh

四、模版生成HTML

将预先定义好的html模版传入参数生成html，方法代码：

function template(template, data) {
  return template.replace(/<%=([^%]*)%>/g, function(s, m) {
    return data[m];
  });
};

使用：

var TEMPLATE = 'http://www.deanhan.cn/ajax.php?name=<%=name%>&site=<%=site%>';
var data = {
   name: 'deanhan',
   site: 'www.deanhan.cn'
};
console.log(template(TEMPLATE, data)); // http://www.deanhan.cn/ajax.php?name=deanhan&site=www.deanhan.cn

这个没太多要介绍的，就是将特定的模版标志为替换为正式的数据。

好了，暂时就记这么多，如果想到更好的也会同步更新在这里哦。