正则表达式

前言

学习好前端技术，想稍微深入一点扩展自己的技术，怎么也绕不开要学到它。很多前端人性化的交互，人性化的体现就在于各种智能的交互场景。比如，帮你补充需要输入的内容，帮你高亮模糊匹配你想要搜索的内容，帮你校验你输入的内容是不是一个电话号码或者邮箱地址等。

定义

正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则的字符串的一种文本模式。一版以双斜杠的形式出现，如：

// 从字符串 str 中提取数字部分的内容(匹配一次)：
const str = "abc123hhds"  
const pattern = /[0-9]+/   
document.write(str.match(pattern))  // 123

---

这里具体语法不再赘述，直接搬了，还有在线测试工具帮助快速掌握。请戳

---

一些值得注意的语法

• 限定符的贪婪写法和非贪婪写法，区别在于一个“?”。如：+?或*?，为非贪婪表达式，也叫做最小匹配，一般用于匹配一对符号（如：括号，尖括号等）下的所有内容。
• 用()可以为匹配单元分组，而在括号内最前面加上，?:则表示该分组为非捕获元之一，类似的非捕获元还有：?=、?<=、?!、?<! 。它们除了标记为非捕获元还有更多含义:
  • exp1(?=exp2)：查找 exp2 前面的 exp1。
  • (?<=exp2)exp1：查找 exp2 后面的 exp1。
  • exp1(?!exp2)：查找后面不是 exp2 的 exp1。
  • (?<!exp2)exp1：查找前面不是 exp2 的 exp1。

• 这里贴一个比较综合性的解析图，里面包含了很多语法和实用技巧：

  
  正则表达式解析
• 要想看懂一个正则表达式，运算优先级必须要知道，否则都不知道改怎么拆解一个长长的表达式，优先级由高到低依次是：
  • 转义符 \
  • 圆括号和方括号 (), (?:), (?=), []
  • 限定符 *, +, ?, {n}, {n,}, {n,m}
  • 定位点和序列 ^, $
  • 任何元字符(需要以\开头的字符)，普通字符
  • 替换，"或"操作符 |
    注意: 因为元字符或普通字符都比"或"操作符|优先级高，因此使得m|food匹配的是"m"或"food"。若要匹配"mood"或"food"，请使用括号创建子表达式，从而产生"(m|f)ood"

常用的正则表达式

1. URL链接地址

const isUrl = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/

2. 有效的密码：至少8个字符，不超过20位，包含至少1个字母，1个数字和1个特殊字符

const isValidPwd = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8, 20}$/

3. 邮箱地址：

const isEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/

4. 汉字:

const isChinese = /^[\U4E00-\U9FA5]{0,}$/

5. 身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：

const isIDCard = /^(\d{15})|(\d{18})|(\d{17}(\d|X|x))$/