本次笔记主要分享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属性的标签
结果：
推荐调试工具
方便调试的一款在线工具~
作者：小精灵
原文链接： https://mp.weixin.qq.com/s/k754tibpODIL0W05OuYd2w
欢迎关注本人微信公众号【前端体系】， 回复【礼物】即可获得“微信小程序”学习资料~ “领干货” 一起提升技能！
未经授权，不得转载。
网友评论