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

本次笔记主要分享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

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

欢迎关注微信公众号【一文插画】,回复【资源】即可获得学习资料~ “领干货” 一起提升技能!未经授权,不得转载。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,265评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,078评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,852评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,408评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,445评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,772评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,921评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,688评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,130评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,276评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,882评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2 348

推荐阅读更多精彩内容