摘要：正则学起来说真的，不去正儿八经的学正则，对付一般的工作是没啥问题的，虽然我们可能会经常用到，但毕竟度娘能提供大多时候你想要的可当我看一些框架的源码，总会被里面一长串一长串的正则给吓到之前一篇博客里有关于简单的爬虫实践，其实离达到我预期的效果

说真的，不去正儿八经的学正则，对付一般的工作是没啥问题的，虽然我们可能会经常用到replace，但毕竟度娘能提供大多时候你想要的；可当我看一些框架的源码，总会被里面一长串一长串的正则给吓到；之前一篇博客里有关于简单的爬虫实践，其实离达到我预期的效果就差一批正则（Nodejs，不一样的爬虫实践）；所以，一般的正则毫无压力，非一般的情况下的正则，令人望而生畏；简直就是语言界的一朵小奇葩！

正则其实就是用一串字符去描述一套规则，所以，首先得自个儿很清楚要实现的正则具备哪些规则，然后用一串字符组合搭配去描述它；以下正则，能力有限，暂不考虑性能问题，仅供参考；

指定一个子表达式，用小括号包括起来；

参与结果的分组：结果保存在$1-$9中：

"abc-123".replace(/(w+)-(d+)/,"$2-$1");
// "123-abc"

不参与结果的分组：(?:reg) reg参与匹配规则，匹配到的结果不参与分组的结果

var str1="abc123";
var str2="abc";
var reg=/w+(?:d+)?/;
reg.test(str1);    // true
reg.test(str2);    // true

反向引用：对相同的分组简写为对第一个分组结果的引用

// 匹配h1-h6的标签
var reg=/.*?/i;

"
hhhhh1111
".test(reg)   // true
"
hhhhhaaaa
".test(reg)   // true

// 如果像这样确实可以匹配到一般的h1-h6，
// 但其实它也会匹配
....
这种前后不对等的情况，
// 使用分组，反向引用就能避免这种情况

var reg=/.*?/i;
// 1即是对第一个分组([1-6])的引用

"
hhhhh1111
".test(reg)   // true
"
hhhhhaaaa
".test(reg)   // false

贪婪模式与非贪婪模式只影响用次数修饰的子表达式，贪婪模式在整个表达式匹配成功后会继续向后尽可能多的匹配，非贪婪模式在表达式首次匹配成功后即返回结果；？除了表示匹配0次或1次之外，还有在次数修饰的子表达式后面表示是否启用贪婪模式；

// 过滤html标签
var str1="abc
cde
hf";
var reg=//ig;      // 贪婪模式
var reg1=//ig;  // 非贪婪模式

str1.replace(reg,"");                  // hf
str1.replace(reg1,"");                // abccdehf

// 可以看到非贪婪模式下的结果才是我们过滤标签后想要的结果

在JS里只支持向前断言，也就是向前查找；

(?=reg) 零宽正向先行断言

(?!reg) 零宽负向先行断言

这两种断言里的reg只作为整个表达式的一个必要条件，而不返回匹配结果，同样不能与分组弄混淆；一般小括号用来划分一个子表达式，(?:reg)的reg匹配的结果不参与整个表达式结果的分组；断言的reg只作为一个必要条件，参与整个表达式匹配的判断，匹配的内容却不参与整个表达式匹配的结果；

向前查找即从断言开始的位置的右边开始匹配；

var str="abc123cdef456...........";

// 匹配数字后面跟着字母的内容，
//“跟着字母”仅作为一个条件，这个条件匹配到的结果不参与整个表达式匹配的结果
str.match(/d+(?=[a-z]+)/g);     // 123 而不是 456
str.match(/d+(?!w+)/g);          // 456

其他基础如：s S w W b B d D [0-9a-zA-Z_] 等基础符号组合应该相对好理解，作为很基础的部分，必须牢记咯；

其实绝大多数人都用过正则，但我更相信大多数人用的正则都是度娘提供的，为了真正的走近正则，而不只是道听途说，必须全面的过一遍，并且尽可能的用到实际工作中，比如：验证个url，过滤个标签等，相信自己弄出来一串字符的话，肯定别有一番意思；如下Url模块，对于前端来说基本上是多余的，因为浏览器有location；parse方法的作用在于对非location情形下的自定义url或可认为是url的字符串进行解析；比如：用户输入一串url，首先验证是否符合url规则，然后提取协议类型，提取域名等，这些就是location做不到的，而且对于简单的爬虫操作替换或补全url，该方法就派上用场了；

Url.parse(url)；//返回一个object

如果不带url参数，则默认为location.href；这时返回的结果和location能取到的一样；

如果带上url，无论是否自定义的，都将重新用正则解析，并返回一个和location能获取到的一样的结果集，包括格式化后的query；

Url.normalize(url)；//返回url

首先对接收的url去空白字符，尝试将多个连续的/符合替换为一个，将多个.去掉(../或./的情况)，相当于放宽url的限定规则；

Url.isAccessUrl(url)；//返回true|false

验证是否符合正确的url规范；

Url.query；//返回 object

取得url上的查询参数，{name:value}格式，如：Url.query.id取得url上id=123的值即返回123；

var Url=function(loc){
    var urlUtils=function(){
        return {
            trim:function(url){
                return url.replace(/^s+|s+$/,"");
            },
            norProtocol:function(url){
                if (!/https?:///i.test(url)) throw url+" http or https protocol needed !";
                return url.replace(/(https?://)/+/,"$1");
            },
            getProtocol:function(url){
                return this.norProtocol(url).match(/(https?://)/)[1];
            },
            tryOnce:function(url){
                return this.getProtocol(url)+
                       this.norProtocol(url).substring(this.getProtocol(url).length)
                       .replace(/.+(?=/)/g,"")
                       .replace(//+/g,"/");
            },
            normalize:function(url){
                var nor=this.tryOnce(this.trim(url));
                return nor.match(/https?://(w+(?:.w+)+)(:d{2,5})?$/)?nor+="/":nor;
            },
            isAccessUrl:function(url){
                return /https?://(?:w+(?:.w+)+|localhost)(?::d{2,5})?/S*/i.test(this.normalize(url));
            },
            convertQs:function(qs){
                var qs=qs||loc.search.substring(1);
                if(!qs) return null;
                var qsArr=qs.split(/&/),qsPar={};
                for(var i=0;i
将得到如下结果：

正则研究的不太深，该模块难免会有BUG，或繁琐的地方，个人认为在实际工作中还是有用武之地的，后续慢慢修复吧；
正则这朵小奇葩还是挺有意思的，相信更加熟练后在以后的前端之路上会带给我意想不到的收获！
如果你已在路上，就勇敢的向前吧！
原文来自：花满楼（http://www.famanoder.com/boke...）