正则之基本入门

以前看了许许多多的正则教程,收货并不多,往往都是蜻蜓点水,一点就过。事实上,正则用处真的超级大,比如匹配innerHTML的内容,以及表单验证,也是非他莫属。这里,我结合js,对正则进行一个简单的介绍吧。 如有纰漏欢迎指出,希望大家多多包涵。


js与正则的关系

在js中定义一个正则有两种方法,一个是实例化,一个是字面量。

分别看一下:

//实例化
varre=/\w+/;//这两者等价
//字面量
varre=newRegExp('\\w+');

如果想添加一些flags也是没有问题的。

比较常用的flag有。/i,/g,/ig,/m.


/i(忽略大小写,ignore)
/g(全文查找出现的所有匹配字符,global)
/m(多行查找,multiLine)
/ig(全文查找、忽略大小写,ignore+global)

所以,使用flag之后可以这样写.

varreg=^\d{5,12}\i$;//表示忽略大小写,匹配;
//或者
varreg=newRegExp(^\d{5,12}\i$);

正式入门正则

正则其实就是用来匹配字符串的。他用一个简洁表达了,完成了你需要写很多代码的事,就和md(markdown)语法是一个道理。 用的人多了,自然成标准,这也是规则吧。


正则预定字符

预定字符,就是用程序比较难表达的一些字符,比如回车键,tab键(通过空格来区分达到的效果).

常用的有:


字符 效果

\t 制表符,其实就是一个“Tab”键

\r 回车符,如果你使用过word应该之后,在一个段落后面那个东西吧。 :)

\n 换行符,他和\r是有故事的,等下说,我们继续

恩,大部分就是这几个了。 上面提到 \r和\n,他们到底有什么却别。 没错,看字面量,感觉return 不就是换行吗? 其实,这样说没错,但是得区分系统,在Unix为扩展的系统,在每行的结尾只有"\n",而在window下则是:"\n\r"(顺序不能换). 所以,为了解决系统的差异,就出现了两种: \r || \n.

所以一般,我们匹配换行需要使用.\r||\n一起使用.

varreg=/[\r\n]/g;

这样就能保证系统的兼容性.


字符类

所谓的字符类同样也是将你平常要花很多时间做出来的,集成为一个简洁表达。(相当于写库)。

常用的字符类有如下几个。


字符 效果

.匹配换行符以外的任意字符
\d匹配所有数字
\D匹配非数字
\s匹配一个空格符
\S匹配非空格
\w匹配字母数字下划线=>其实就是匹配单词word(简单易懂)
\W匹配!字母数字下划线=>就是不匹配单词

来我们看几个例子

console.log(/\s+/.test(""));//true
console.log(/\d+/.test("1234231"));//true
console.log(/\D+/.test(""));//true

其他的如上。


锚字符

这个应该算是正则里面,取名最好理解的一个。使用正则就是停船一样,你需要设置你停的位置,我也需要设置我的边界。

常用的有一下几个:


锚字符 效果

^匹配字符串的开头,在多行检索中,匹配一行的开头
$匹配字符串的结尾,在多行检索中,匹配一行的结尾
\b匹配一个单词的边界
\B匹配非单词边界

这几个应该算是我平常用的最多的几个吧。

如果你想匹配整个字符串,就可以组合使用"^ $";


var reg = /^\d+$/; //匹配整个字符串为数字

量词字符

"望文生义",这类字符使用来限定某某出现的次数的。

常用的有:


代码 / 语法 说明

*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次

这个应该不用多说了。 直接看例子吧


console.log(/^\d+$/.test("123")); //true

上面说了这么多内置的字符,那我想使用特定字符类怎么办嘞。其实也很简单。使用"\"转义字符。

比如我想匹配大括号."{}".我可以这样用:


console.log(/\{.+\}/.test("{123}")); //true

但事实上,量词还分为3种,有贪婪量词,惰性量词,支配性量词。

区分的依据是根据引擎的解析不同而形成。

贪婪量词

这类量词指的就是上文所说的: *,+,?。

他的匹配方法就是,全文匹配,如果不成功,则,将末尾的最后一个字符减去,再匹配,如果还不成功,则,再减一次。只到为0。 接着,往中间移动一位,再进行匹配,同样的匹配模式。


console.log(/.+/.test("abcd")); //true

惰性量词

使用方法: 基本量词 ?

该量词和贪婪量词就像,一个是消极怠工,一个是积极工作。 惰性量词一开始只会匹配一个字符,如果不成功,则在进行匹配。


console.log(/\d+?/.test("1fjkdf")); //true

这里阐述一些惰性和贪婪匹配的区别。

我们也通常把惰性称为最少重复匹配。

举个例子:

我们现在需要匹配blablablabla. 中的b~a间的词。

使用贪婪匹配:

varstr="blablablabla";
console.log(str.match(/(b.*a)/g));//["blablablabla"]

我们最少重复匹配(惰性匹配)

console.log(str.match(/(b.*?a)/g));//["bla","bla","bla"]

支配性量词

使用方法: 基本量词 +;

该量词就是只匹配一次,如果不符合则不匹配。

但是由于js不支持,所以,这里也不做过多的介绍。


正则: /\d*+/;

其实上面只要留个印象就可以,只有当你真正使用的时候,你才会有感触。

OK!!!基本内容说完了,现在轮到真正的进阶,big boom~


中括号的用法

我们从小学学过来,老师告诉我们,我们使用括号有3种,一个是( ),一个是[],一个是{}.

而在正则里面,大括号已经被量词字符给强占了,只剩下[]和(). 这里我们来说一下,中括号.

[],在正则里面代表的是一个单元字符,或者我宁愿叫他"或"括号. 因为他起到的主要作用就是,你可以匹配这个或者匹配那个或者...

吃个栗子:

varreg=/[abc]/;
console.log(reg.test("a"));//true

可以看出,reg可以匹配 a|b|c. 平常使用的时候,可以直接向一个字符使用就可以了。

异或表达

这里会出现一个问题,比如,我不想匹配a,b,c中的任意一个该怎么办呢? 其实,只需要在"[]"里面加上"^"即可。

console.log(/[^abc]/.test("c"));//false

范围字符

范围字符,就是可以省略一些周所周知的。 比如匹配26英文字母可以直接使用:a-z. 因为我们已经都知道了这个的意义。

其实,上面所说的字符类完全就可以使用中括号来代替。

\d=>[0-9]
\w=>[0-9a-zA-Z_]
\S=>[^\t\n\x0B\f\r](\f标识分页符)

...

另外这个范围字符还有一个好处,就是匹配中文。(电脑都是外国人发明的呀。)

console.log(/[\u4e00-\u9fa5]{1}/.test("艹"));//true

这就是中括号的常用用法。


小括号使用

小括号的主要作用其实就是分组。平常是用来提取匹配到的字符串。

分组使用

使用()对内容进行区分。

console.log(/(jimmy)+/.test("jimmy"));//true

而且,配合使用match方法,可以获得匹配到的内容.

varname="MynameisJimmy";
console.log(name.match(/(Jimmy)/g));//["Jimmy"]

需要注意在括号里面写正则和没有括号的时候,是没有区别的。我们可以在()内嵌套你想加的。(如果你想嵌套()的话,Sorry,这样并没有什么卵用).

varname="MynameisJimmyJimy";
console.log(name.match(/(Jimm?y)/g));//["Jimmy","Jimy"]

候选(或)

这个就相当于将括号加上一个或的功能. 即,在()里面使用"|"进行分隔。

varname="MynameisJimmysam";
varreg=/(jimmy|sam)+?/ig;
console.log(name.match(reg));//["jimmy","sam"]

反向引用

这个名字我真心不理解,什么"反向"... 我宁愿叫做,给分组加上标识符。这个的主要功能,就是给匹配到的小括号加上数字,来表明他是第几个匹配到的。如果不加,则默认从左到右的顺序为1,2,3...

varreg=/(100)\1/;
varreg2=/(100)(99)(101)\1\2\3/;//1=>100,2=>99,3=>101

在js中,通常是和replace搭配,才有威力。

varreg=/(100)(99)/;
varstr="10099";
console.log(str.replace(reg,"$2$1"));//99100

非捕获分组

我们直接使用 "(...)"进行的匹配是捕获分组。 我们来说一下什么叫捕获. 上文中我们使用match进行正则匹配,而返回的数组中的元素就是通过正则捕获的内容。 这就叫捕获。

那这里的非捕获,是什么意思呢? 其实很简单,就是通过match不会匹配到内容。但还是可以起到分组的效果。

格式为: (?:xxx)

它最常用的地方就是匹配html.

varstr=`<divclass="pin">
<divclass="box">
<imgsrc="http://cued.xunlei.com/demos/publ/img/P_001.jpg"/>
</div>
</div>`;
varreg=/<div(?:.|\r|\n)*div>/gi;
console.log(str.match(reg));

大家可以去试一试,说到正则匹配,我还有一个想说的,就是上文所说的惰性匹配(最少重复)和贪婪匹配。

可以看到 “/< div(?:.|\r|\n)*div>/gi” 我这里使用的是贪婪匹配。他的结果是,尽量匹配到最外层的< /div>标签。

即上面的结果为:

<divclass="pin">
<divclass="box">
<imgsrc="http://cued.xunlei.com/demos/publ/img/P_001.jpg"/>
</div>
</div>

可以看出,贪婪匹配,对于两个重复的/div 他会匹配到最外一层。

那我们使用惰性匹配试一试。

/<div(?:.|\r|\n)*?div>/gi

得到的结果为:

<divclass="pin">
<divclass="box">
<imgsrc="http://cued.xunlei.com/demos/publ/img/P_001.jpg"/>
</div>
</div>

可以看出少了一个< /div>,原因就是,惰性匹配尽量只会匹配到第一个重复的< /div>上面的。

所以,总结一下,在使用正则匹配的时候需要搞清楚到底什么时候用惰性,什么时候用贪婪,这点很重要。 贪婪会匹配最外层,惰性会匹配最里层。


前瞻(零宽断言)

前瞻分为正向前瞻和反向前瞻。(由于js只支持前瞻,所以后瞻只会提一下)。 他的作用就是,在匹配的字符后面,断言说后面一定符合我的正则。 (好饶~~)

算了,先说一下基本格式吧。


正则 名称 作用

(?=exp)正向前瞻匹配exp前面的位置
(?!exp)反向前瞻匹配后面不是exp的位置
(?<=exp)正向后瞻匹配exp后面的位置
(?<!exp)反向后瞻匹配后面不是exp的位置

看不懂了吧,我们来看一下详细的内容。

for instances:

varstr="happiedboring";
varreg1=/happ(?=ied)/g;
varreg2=/bor(?!ied)/;
console.log(str.match(reg1));//["happ"]
console.log(str.match(reg2));//["bor"]

从这个例子可以很容易看出前瞻后瞻到底是什么了。

回到上面的匹配html的例子。

这里我们有个需求,即只留下img标签,那么就可以使用前瞻.

varstr=`<divclass="pin">
<divclass="box">
<imgsrc="http://cued.xunlei.com/demos/publ/img/P_001.jpg"/>
</div>
</div>`;
varreg=/<(?!img)(?:.|\r|\n)*?>/gi;
console.log(str.replace(reg,""));

//得到的结果为:

<img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" />

另外,零宽断言还有另外一个作用,即匹配以xxx为结尾的单词。

这时候,你的leader对你有个要求,即,jimmy呀,你把ed结尾的单词找出来哦。(好呀~)

这时候就可以使用前瞻了。

varstr="heisaninterestedperson";
varreg=/\b\w+(?=ed\b)/ig;
console.log(str.match(reg));//["interest"]

结束语

关于正则的内容大概就是这些了。 其实正则的学习,不是只用看就能学会的,实践才是硬道理。 通过,理论的学习,在加上踩过的坑,自然会对正则有着莫名的好感。 不过,大神就是大神,取名字就是这么别扭。 什么 零宽断言,前瞻,后瞻,反向引用 blablabla... 在理解的同时可以根据自己的理解给这些名词冠上自己的idea.我这里只是 正则的冰山一角,正则在任意一门语言内,用处都是超级大的。这里安利一个 总结的比较好的正则库。正则库. 还有一个在线的regExp测试工具.Debuggex

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 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