正则表达式

概念

• 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑

目的

• 给定的字符串是否符合正则表达式的过滤逻辑（称作“匹配”）：
• 可以通过正则表达式，从字符串中获取我们想要的特定部分。

正则表达式在前端的应用场景

• 表单验证
• 验证手机号
• 验证邮箱
• 验证车牌号
• 其中的一些符号 可实现对字符串的高效操作

js中正则的创建

• 字面量形式

  var expression = /pattern/flags
  // eg.
  var p = /acc/g

• 构造函数法

var p1 = new RegExp('alex', 'g')

正则验证网站

元字符

• 匹配所有字符

/./ 

• 匹配数字 字母和下划线

\w 匹配数字 字母 下划线 等价 [A-Za-z0-9_]
\W 取非

• 匹配数字

\d 匹配数字
\D 取非

• 匹配空白字符

\s 匹配空白字符
\S 取非

• [] 匹配区间的任意字符

1. [a-zA-Z0-9]     // 匹配大小写字母和数字
2. [\u4e00-\u9fa5] // 匹配所有中文 
3. [^a-zA-Z0-9]    // ^用在[ ] 中就是取非的意思

• 重复匹配 + (匹配一次或者多次)

\mj+\g

mj
mjjj


\[mM][jJ]+\g
mj
mjj
MJ
MJJ
MjJJJ

• +匹配1次或多次@
• *匹配0次或者多次
• ?匹配0次或者1次(可有可无)
• () 分组匹配
• ?: 不捕获(在分组中使用)

分组匹配

/(http|https):\/{2}w{3}.[a-z]+.(com|cn)/g

https://www.baidu.com
http://www.google.com
http://www.mi.cn
https://www.ape.com

分组后 用tools 可以获取
RegExp.$1
https
http
http
https

RegExp.$2
com
com
cn
com 

// 不捕获 (?:http|https) 
RegExp.$1
com
com
cn
com 
```js
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

// 具名组匹配

const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

正向预查(数字后要跟着'元' 但是'元'不包括)

/\d+(?=元)/g

200元   // 匹配200
2000元  // 匹配2000
200刀   // 不匹配
2000磅  // 不匹配

// 否定(数字后不能跟'元', 且这个'元'不包括)
/\d+(?!元)/g

200元   // 匹配20
2000元  // 匹配200
200刀   // 匹配200
2000磅  // 匹配2000

反向预查 ('元'开头 但是'元'不包括)

/(?<=元)\d/g

元200   // 匹配200
元2000  // 匹配2000
刀200   // 不匹配
磅2000  // 不匹配

// 否定 = 换成 !

重复类

/\d{4, 8}/g
// 最多8 最少4

/\d{4}/g
// 匹配4个

正则实例对象的一些方法

• .test() 返回一个 boolean

var p = /acc/g

var str = 'acc'

p.test(str) // true, false

'''

- .exec() 返回匹配的结果 返回一个数组 没有的话 返回 null
```js
RegExpObject.exec(string)

字符串的方法

• match()
  对字符串进行正则匹配 返回匹配的结果

var str = 'hello world'
undefined
str.match(/l/)
=>> ["l", index: 2, input: "hello world", groups: undefined]
str.match(/l/g)
=>>["l", "l", "l"]
str.match(/a/g)
=>>null

• search()
  返回第一个满足条件的匹配结果在整个字符串中的位置 , 如果没有任何匹配, 返回 -1

var str = 'hello world'
undefined
str.search(/l/)
=>> 2
str.search(/llo/)
=>> 2
str.match(/l/g)
=>>2
str.match(/a/)
=>>-1

• replace(regexp/substr,replacement)
  可以替换匹配的值, 它接受两个参数,
  • 第一参数是正则表达式或字符串(表示搜索模式),
  • 第二个是匹配的内容 一个字符串值。替换文本的函数(要有return)
    • 在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

'2019.10.05'.replace(/\./g, '-')
=>> '2019-10-05'

let data = {
    name: '小明',
    message: '消息'
}
let str = "<p>{{name}}-{{message}}</p>"
let exp = /\{\{(.+?)(\})\}/g
let result = str.replace(exp, (a, $1, $2, index, strObj) => {
    // 根据 str 的特征 此回调调用两次 注意 $1, $2 .... 和 正则的分组要一致
    console.log(a)  // {{name}} {{message}}
    console.log($1) // name message
    console.log($2) // } }
    console.log(index) // 3 12
    console.log(strObj) // "<p>{{name}}-{{message}}</p>" "<p>{{name}}-{{message}}</p>"
    return data[$1] // 返回值就是要替换的
})
console.log(str)    // <p>{{name}}-{{message}}</p>
console.log(result) // <p>小明-消息</p>

实际应用

检查用户账号

• 规则:
  1. 由数字,字母,下划线组成
  2. 字母开头
  3. 长度 4-16位

/^[a-zA-Z]\w{3,15}$/

匹配手机号

• 规则
  1. 1开头
  2. 第二位是 34578
  3. 其他9位是 0-9 并结尾

/^1[3|4|5|7|8][0-9]{9}$/

验证电话号

• 规则:
  1. 0开头
  2. 拼接 2或3位数字
  3. 拼接 - 可有可无
  4. 拼接 7或8位数字
  5. 01088888888 010-7777777 0375-7777777 03757777777

/^0\d{2,3}-?\d{7,8}$/g

匹配身份证号

• 规则:
  1. 15或者18位
  2. 15位全是数字
  3. 18位 前17是数字 最后一位 [0-9|x|X]

/(^\d{15}$)|(^\d{18}$)|(^[0-9]{17}[\d|x|X])/

匹配邮箱

• 规则
  1. 第一部分@ 第二部分.com|cn|net

/[a-zA-Z0-9_.-]+@[a-zA-Z0-9_.-]+\.(com|cn|net)$/