爬虫让前端飞我爱编程

最全的【正则表达式】入门教程

2018-05-03  本文已影响37人  一文插画

本次笔记主要分享javascript中比较难懂的正则表达式。正则表达式是烦琐的,但它是强大的,学会之后的应用会让你除了提高工作效率外,提升自身的技能,面试也不再害怕!

初次学正则表达式,都认为好难,今天分享干货笔记!记得收藏噢~

了解正则表达式

什么是正则表达式

用某种规则去匹配符合这种规则的字符串。就是说:使用单个字符串来描述、匹配一系列符合某个语法规则的字符串。

 就好比用模具做产品,而正则就是这个模具。

何时使用正则表达式?

验证字符串格式,查找关键字,替换关键字

比如:

银行卡密码:6位数字

用户名:字母,数字,_的组合

RegExp对象

RegExp对象:

专门封装一条正则表达式,javascript 通过内置对象RegExp来使用正则表达式。

实例化RegExp对象(2种)

字面量

构造函数

字面量

需求:匹配字母a,将小写a替换成大写A

replace是字符串的方法。

构造函数

修饰符:

g:global 全文搜索,如果不写g,只匹配搜索到第一个。

i:ignore case 可以忽略大小写匹配,默认是大小写敏感。

m:multiple lines 多行搜素匹配

例如:

将q开头的后面带数字的就替换成A。\n是换行符。使用gm的模式匹配

RegExp自带方法,2个

RegExp.prototype.test(str)

用于测试字符串参数中是否存在匹配规则表达式模式的字符串。

如果存在返回true,不存在返回false

例如:测试字符串是否有a。

RegExp.prototype.exec(str)

使用正则表达式模式对字符执行搜索,并将结果更新全局RegExp对象的属性以反映匹配结果

如果没有匹配的文本就返回 null,否则返回一个结果数组

index声明匹配文本的第一个字符的位置

input存放被检索的字符串 string

RegExp工具

Regexper是一个正则表达式的可视化开源工具,直接输入正则表达式就能用可视化显示出来

网址:https://regexper.com/

如何使用?

Regulex 能够即时可视化,方便调整。可视化效果好很多,注意红色方框可以方便勾选需要的匹配的模式。

网址:https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24

特殊含义字符

1、选择符号:[ ]

解释:

[ ] 包含一系列字符,能够匹配其中任意一个字符,必须多选一使用

[ ] 中写备选字符。

一个[],只能代表1位字符的规则!

我们可以用元字[ ]来构建符合某些特性的对象,是一个泛指。例如将正 则  表达 这样的文字归为一类,表达式可以匹配这类的字符。

例如:想匹配是否含“正则表达式”其中一个字符。

表达式写法:[正则表达式]

工具图解:

one of 表示包含其中一个。

2、[^xxxx]:表示除了xxxx都行!注意^ 符号必须放在[]中的第一个位置。否则,变为普通字符匹配。

工具图解:

此时,发现上边的英文变成None of,表示除了下面框框中的字。

3、-符号:字符的范围,备选字符连续的范围!

比如:[0-9] [a-z] [A-Z] [a-zA-Z]

汉字范围:[\u4e00-\u9fa5]

4、预定义字符集:使用简化的字符,定义常用字符集

比如:

5、如果规则正文中出现特殊符号,用\转译

例如:[\.正则]   可以包含一个点,要转译这个点。

工具图解:

6、数量词:规定前边一个字符出现次数的量词

语法:{min,max}

       {num}:固定长度

       {min,}至少min个,多了不限

例如:

手机号:\+86\s1[3578]\d{9}

工具图解:

1:+86中国的国际区号,对应正则里的 \+86\

2:white space表示空格,对应正则里的  \s 

3:"1"  手机号开始第一位,对应正则里的   1

4:表示手机号第2位,可以是3578中的一个,对应正则里的[3578]

5:表示手机号第3-11位,digit表示数字,8 times表示这个digit可以再循环8次。所以是9个数字,对应正则里的\d{9}

用户名:\w{8,16}  表示8到16位都行

重点:比较以下2种情况,区别是一个最少是8次一个是4次。

当贪婪模式匹配字符串的时候当已经不够最大次数的匹配的时候,会选择更小次数的匹配。

第一句:

'01234567regexp'.replace(/\w{8,10}/g,'T') 返回 "Tgexp",由于是global,能够匹配到最大次10次,即"01234567re",替换成"T",

第二句:

先匹配了10次,替换成"T",匹配到后并不会停止而是继续匹配,剩下'gexp'能被最小4次匹配到,再次被替换成"T"。所以最后是"TT"。

贪婪模式:默认先匹配整个字符串,再缩小范围!

懒惰模式

尽可能少的匹配,一旦匹配成功则不再继续匹配

在量词后面加上即可

以上就是一次4个4个的匹配。所以有3个"T"

7、特殊的数量词:+ * ?

?:可有可无,最多只能出现一次

比如:[正则]?简单吗

工具图解:

发现One of上面多了一个空分支。表示可以是 空。

正简单吗 (对),正正简单吗(错)

:可有可无,不限制出现次数

比如:[正则]*简单吗

工具图解:

发现One of 下面又多了一个闭合的分支。表示可以是无限循环。

正则简单吗(对)

正则则简单吗(对)

正简单吗(对)

+ :至少出现一次!

比如:正[确]+吗

工具图解:

空分支不见了,说明“确”字至少要出现一次。

正确吗?(对)

正吗?(错)

8、():分组:改变模式的匹配顺序

比如:

验证身份证号:  \d{15}(\d{2}[0-9Xx])?

工具图解:

老一代的身份证号是15位数,所以前面\d为15位数。后面的?号表示可有可无,最多只能出现一次。

新一代的身份证是18位的,有的最后一位是大小写的Xx。括号里的\d就可以是循环2次的数字。最后一位数可以是数字也可以是X或x,就表示成[0-9Xx]。

验证手机号: (\+86\s)?1[34578]\d{9}

+86 13145782963(对)

13145782963(对)

9、正则表达式的开始和结束

^:整个正则表达式的开头,表示以xxx开始

$:整个正则表达式的结尾,表示以xxx结束

\b:单词边界

\B:非单词边界

注意:^在方括号[ ]使用,和这里的含义不同,看上边第2点可以知晓。

综合例子:获取一段HTML文本中所有超链接href属性的标签

结果:

推荐调试工具

网址:http://jsbin.com

方便调试的一款在线工具~

作者:小精灵

原文链接: https://mp.weixin.qq.com/s/k754tibpODIL0W05OuYd2w

欢迎关注本人微信公众号前端体系】, 回复【礼物】即可获得“微信小程序”学习资料~ “领干货” 一起提升技能!

未经授权,不得转载。

上一篇下一篇

猜你喜欢

热点阅读