走近正则:仿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=/<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   '));

将得到如下结果:

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

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

如果你已在路上,就勇敢的向前吧!

原文来自:花满楼(http://www.famanoder.com/boke...

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


jquery.validate使用攻略(表单校验) 目录 jquery.validate使用攻略1 第一章&#160;jquery.validate使用攻略1 第二章&#160;jQuery.validate.js API7 Custom selectors7 Utilities8 Validato
/\s+/g和/\s/g的区别 正则表达式/\s+/g和/\s/g,目的均是找出目标字符串中的所有空白字符,但两者到底有什么区别呢? 我们先来看下面一个例子: let name = &#39;ye wen jun&#39;;let ans = name.replace(/\s/g, &#39;&#3
自整理几个jquery.Validate验证正则: 1. 只能输入数字和字母 /^[0-9a-zA-Z]*$/g jQuery.validator.addMethod(&quot;letters&quot;, function (value, element) { return this.optio
this.optional(element)的用法 this.optional(element)是jquery.validator.js表单验证框架中的一个函数,用于表单控件的值不为空时才触发验证。 简单来说,就是当表单控件值为空的时候不会进行表单校验,此函数会返回true,表示校验通过,当表单控件
jQuery.validate 表单动态验证 实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码 )。 也可
自定义验证之这能输入数字(包括小数 负数 ) &lt;script type=&quot;text/javascript&quot;&gt; function onlyNumber(obj){ //得到第一个字符是否为负号 var t = obj.value.charAt(0); //先把非数字的都
// 引入了外部的验证规则 import { validateAccountNumber } from &quot;@/utils/validate&quot;; validator.js /*是否合法IP地址*/ export function validateIP(rule, value,cal
VUE开发--表单验证(六十三) 一、常用验证方式 vue 中表单字段验证的写法和方式有多种,常用的验证方式有3种: data 中验证 表单内容: &lt;!-- 表单 --&gt; &lt;el-form ref=&quot;rulesForm&quot; :rules=&quot;formRul
正则表达式 座机的: 例子: 座机有效写法: 0316-8418331 (010)-67433539 (010)67433539 010-67433539 (0316)-8418331 (0316)8418331 正则表达式写法 0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d
var reg = /^0\.[1-9]{0,2}$/;var linka = 0.1;console.log (reg.test (linka)); 0到1两位小数正则 ^(0\.(0[1-9]|[1-9]{1,2}|[1-9]0)$)|^1$ 不含0、0.0、0.00 // 验证是否是[1-10
input最大长度限制问题 &lt;input type=&quot;text&quot; maxlength=&quot;5&quot; /&gt; //可以 &lt;input type=&quot;number&quot; maxlength=&quot;5&quot; /&gt; //没有效
js输入验证是否为空、是否为null、是否都是空格 目录 1.截头去尾 trim 2.截头去尾 会去掉开始和结束的空格,类似于trim 3.会去掉所有的空格,包括开始,结束,中间 1.截头去尾 trim str=str.trim(); // 强烈推荐 最常用、最实用 or $.trim(str);
正则表达式语法大全 字符串.match(正则):返回符合的字符串,若不满足返回null 字符串.search(正则):返回搜索到的位置,若非一个字符,则返回第一个字母的下标,若不匹配则返回-1 字符串.replace(正则,新的字符串):找到符合正则的内容并替换 正则.test(字符串):在字符串中
正整数正则表达式正数的正则表达式(包括0,小数保留两位): ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+\d)|0)$正数的正则表达式(不包括0,小数保留两位): ^((0{1}.\d{1,2})|([1-9]\d.{1}\d{1,2})|([1-9]+
JS 正则验证 test() /*用途:检查输入手机号码是否正确输入:s:字符串返回:如果通过验证返回true,否则返回false /function checkMobile(s){var regu =/[1][3][0-9]{9}$/;var re = new RegExp(regu);if (r
请输入保留两位小数的销售价的正则: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ 1.只能输入英文 &lt;input type=&quot;text&quot; onkeyup=&quot;value
判断价格的正则表达式 价格的正则表达式 /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; 1 解析:价格符合两种格式 ^ [1-9]\d*(.\d{1,2})?$ : 1-9 开头,后跟是 0-9,可以跟小数点,但小数点后要带上 1-2 位小数,类似 2,2
文章浏览阅读106次。这篇文章主要介绍了最实用的正则表达式整理,比如校验邮箱的正则,号码相关,数字相关等等,本文给大家列举的比较多,需要的朋友可以参考下。_/^(?:[1-9]d*)$/ 手机号
文章浏览阅读1.2k次。4、匹配中的==、an==、== an9、i9 == "9i"和99p==请注意下面这部分的作用,它在匹配中间内容的时候排除了说明:当html字符串如下时,可以匹配到两处,表示匹配的字符串不包含and且不包含空白字符。说明:在上面的正则表达式中,_gvim正则表达式匹配不包含某个字符串
文章浏览阅读897次。【代码】正则表达式匹配a标签的href。_auto.js 正则匹配herf