本次笔记主要分享javascript中比较难懂的正则表达式。正则表达式是烦琐的,但它是强大的,学会之后的应用会让你除了提高工作效率外,提升自身的技能,面试也不再害怕!
初次学正则表达式,都认为好难,今天分享干货笔记!记得收藏噢~
了解正则表达式
什么是正则表达式
用某种规则去匹配符合这种规则的字符串。就是说:使用单个字符串来描述、匹配一系列符合某个语法规则的字符串。
就好比用模具做产品,而正则就是这个模具。
何时使用正则表达式?
验证字符串格式,查找关键字,替换关键字
比如:
银行卡密码:6位数字
用户名:字母,数字,_的组合
RegExp对象
RegExp对象:
专门封装一条正则表达式,javascript 通过内置对象RegExp来使用正则表达式。
实例化RegExp对象(2种)
字面量
构造函数
字面量
需求:匹配字母a,将小写a替换成大写A
replace是字符串的方法。
构造函数
修饰符:
g:global 全文搜索,如果不写g,只匹配搜索到第一个。
i:ignore case 可以忽略大小写匹配,默认是大小写敏感。
m:multiple lines 多行搜素匹配
例如:
将q开头的后面带数字的就替换成A。\n是换行符。使用g和m的模式匹配
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属性的标签
结果:
推荐调试工具
方便调试的一款在线工具~
欢迎关注微信公众号【一文插画】,回复【资源】即可获得学习资料~ “领干货” 一起提升技能!未经授权,不得转载。