nodejs正则获取html url,走近正则：仿Nodejs的Url模块到前端

正则学起来

说真的，不去正儿八经的学正则，对付一般的工作是没啥问题的，虽然我们可能会经常用到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=/.*?/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

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

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

// 过滤html标签

var str1='abc

cde

hf';

var reg=//ig; // 贪婪模式

var reg1=//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

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 '));

将得到如下结果：

正则研究的不太深，该模块难免会有BUG，或繁琐的地方，个人认为在实际工作中还是有用武之地的，后续慢慢修复吧；

正则这朵小奇葩还是挺有意思的，相信更加熟练后在以后的前端之路上会带给我意想不到的收获！

如果你已在路上，就勇敢的向前吧！