正则表达式不要背

大家好，我是faith，不废话，我说下背景，在2021年面试阿里4面，TL直接说，能写一个正则Email嘛？我xxxx，我内心自白【正则这个东西在工作就使用的频率比较低，需要的时候CV就可以，或者使用Vscode的插件any-rule快速生成，你让我写个正则，来，你现场给我写一个】最后我反思完毕，总结出以下2个问题，读完文章你就再也不怕正则！！！

1、正则是需要背吗（ps：很少背，根据规律写正则，本篇你认真阅读完应该能应对这类问题）？

2、为什么每次我记了就忘记，需要形象记忆比如： 0011口诀，其实代表的是 * ? + 的含义。

本篇文章的精髓：6个常用正则没事刷刷，特别email，背下正则断言公式(?<=x)x，.* .*?区别，正则特马上替换成一个美女，15个需要转义的正则字符；

跟我一起来学习吧！

正则相关的5个方法（正则2+3美女）

ps：咱就记着5个方法，2正则3字符，正则2+3美女，正则有2个方法分别是test与exec，字符串有3个与正则相关的方法 match serach replace，靠，我记不住怎么办我也记不住他们的规律？MD，我想出来一个方法：正则特马上替换成一个美女。

解释：正则特马上替换成一个美女

特：te的发音，t想到了test，e想到了exec

马上：mashang就是ms，match，search

替换：replace

嘿嘿，我们学会了正则的5个方法来收获了一个美女，并且te是2个方法，马上替换是3个方法，正则2+3美女


正则上的2个方法
regExp.test // 返回true false
regExp.exec // 查找匹配结果并返回，没有匹配到返回null

字符串与正则相关的3个方法
str.match(regExp) // 不会改变原str，与test效果一样
str.replace(regExp, '') // 替换，不会改变原str
str.search(Regex) // 返回匹配子串起始位置，没有则返回 -1

正则常识

\d{5}  匹配5个数字
g 全局模式匹配
i 忽略大小写
() 分组，$1就是获取分组的第一项
* ? + (0011)

正则表达式有15个字符需要转义

记忆口诀:0011 3对括号加6个字符，6个字符分别是 ^ $ . / \ | 0011代表的意思分别是0和01和1，0 代表大于等于0的*，01代表出现0次与1次的？，1代表出现大于等于1次的+

.* .*? 的区别

.* . 表示匹配除换行符\n之外的任何单字符，表示0次或者多次，所以 .* 在一起表示任意字符出现0次或者多次。没有？ 表示贪婪模式，比如 a.*b ,它将匹配最长以a开始，以b结束的字符串,例子: aabab如果是 a.*b 就会匹配到 aabab。
.*? ? 跟在 或者+后面表示懒惰模式，也称非贪婪模式。就是尽可能匹配少的字符。例子： aabab如果是 a.*?b 就会匹配到 aab

零宽度断言正后顾

口诀: (?<=x)x

为什么要用这个公式，场景：比如我们现在有一个class="a b c" 其实现在我们只想匹配 "a b c" 但是此刻我们要根据 class 作为一个标志，正常我们会写 /class=".*?"/ 但是此刻我们匹配的是 class="a b c" 如下图所示：】

因此我们可以使用零宽度断言正后顾，(?<=class=)".*?"

6个常用的正则表达式

如何 ng-if >> className

正则: /ng-if="(.*?)"/g

测试代码:
<b ng-if="modalProps.startType == 2">设置</b>

执行:
'<b ng-if="modalProps.startType == 2">设置</b>'.replace(/ng-if="(.*?)"/g,`className={ ($1) ? '' : styles.none }`)

结果:
"<b className={ (modalProps.startType == 2) ? '' : styles.none }>设置</b>"

验证Email

// bin.zha02@taoao.com
// bin_zha02@tao-ao.com
// 不要死记硬背，先自己写出来2个通用的email，然后根据规律来写正则表达式

let regEmail = /^[a-zA-Z0-9]+([_\.][a-zA-Z0-9]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,6}$/;

let emailArr = ['73936@qq.com', 'bin.zha02@taoao.com', 'bin_zha02@tao-ao.com'];
emailArr.forEach(item => console.log(regEmail.test(item)))

验证手机号

let regPhone = /^1[3456789][0-9]{9}$/;

regPhone.test(14637794541); // true

验证url

https?  ?代表前面的字符出现0次或者1次,所以https?能够匹配 http 和 https

/^(https?|ftp|file)$/.test('https') // true
/^(https?|ftp|file)$/.test('http') // true
/^(https?|ftp|file)$/.test('file') // true
/^(https?|ftp|file)$/.test('ftp') // true
/^(https?|ftp|file)$/.test('ftp1') // false

整数验证

const intReg = /^[-+]?\d*$/

字符串长度n的校验

// 字符串长度n = 2的校验
let regStr = new RegExp(`^.{${2}}$`)

regStr.test('234') //false
regStr.test('23') // true

可视化网站

regexper.com/

总结

6个常用正则没事刷刷，特别email，背下正则断言公式(?<=x)x，.* .*?区别，正则特马上替换成一个美女，15个需要转义的正则字符；

正则特替换成一个美女了