首页手记走近正则：仿Nodejs的Url模块到前端

走近正则：仿Nodejs的Url模块到前端

标签：

Node.js JavaScript 前端工具

正则学起来

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

能自己动手，就不劳烦度娘了

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

1、分组

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

参与结果的分组：结果保存在$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=/<h[1-6]>.*?<\/h[1-6]>/i;

'<h1>hhhhh1111</h1>'.test(reg)   // true
'<h2>hhhhhaaaa</h5>'.test(reg)   // true

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

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

'<h1>hhhhh1111</h1>'.test(reg)   // true
'<h2>hhhhhaaaa</h5>'.test(reg)   // false

2、贪婪模式与非贪婪模式：

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

// 过滤html标签
var str1='<b class="aa" data-value="1">abc</b><div class="a">cde</div>hf';
var reg=/<\/?\w+.*>/ig;      // 贪婪模式
var reg1=/<\/?\w+.*?>/ig;  // 非贪婪模式

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

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

3、断言

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

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

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

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

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

var str='abc123cdef456...........';

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

4、其他

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

用正则仿一把Nodejs的Url模块

其实绝大多数人都用过正则，但我更相信大多数人用的正则都是度娘提供的，为了真正的走近正则，而不只是道听途说，必须全面的过一遍，并且尽可能的用到实际工作中，比如：验证个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<qsArr.length;i++){
                    if (qsArr[i]) {
                        var nm=qsArr[i].split(/=/);
                        qsPar[decodeURIComponent(nm[0])]=decodeURIComponent(nm[1]||'');
                    }
                }
                return qsPar;
            }
        }
    }();
    function parse(url){
        var url=url||loc.href;
        var noredUrl=urlUtils.normalize(url);
        if (!urlUtils.isAccessUrl(url)) throw url+' is not access URI !';
        var medUrl=noredUrl.match(/https?\:\/\/(\w+(?:\.\w+)+|localhost)(?:\:(\d{2,5}))?(\/(?:[^#?]+)?)(?:\?([^#]+))?(?:#{1}(.+))?/i);
        console.log(medUrl)
        return {
            href:medUrl[0],
            protocol:urlUtils.getProtocol(noredUrl).replace(/\/\//,''),
            query:urlUtils.convertQs(medUrl[4]),
            host:medUrl[1],
            port:medUrl[2]||'80',
            pathname:medUrl[3],
            search:medUrl[4]||null,
            hash:medUrl[5]||null
        };
    }
    return {
        parse:parse,
        normalize:urlUtils.normalize,
        isAccessUrl:urlUtils.isAccessUrl,
        query:urlUtils.convertQs(null)      //{name:value}
    }
}(location);

module.exports=Url;
如：console.log(Url.parse('http:////www.famanoder.com/../dsvdsk?ds=w3q&&cdsvds=00   '));

将得到如下结果：