正则表达式的限定符

  • 写在普通元字符字符符号的后面修饰前面 一个符号 出现的次数
    • 1、* 表示出现 0 ~ 多次(包括0次)
    • 2、+ 表示出现 1 ~ 多次(包括1次)
    • 3、? 表示出现 0 ~ 1次(包括0次)
    • 4、{n} 表示出现 n 次(包括n次)
    • 5、{n,} 表示出现 n ~ 多次(包括n次)
      • =>{0,} 等价于 *
      • =>{1,} 等价于 +
    • 6、{n,m} 表示出现 n ~ m(包括n次)
      • =>{0,1} 等价于 ?

代码展示:

// 1、 *
// 表示你的字符串里面需要出现一个 0 ~ 多个 的数字组成的片段
// 即只要出现了数字就符合要求,不出现也算,0次
const res = /\d*/;
console.log(res.test('1hdjkha'));//ture

// 表示你的字符串只能由 0 ~ 多个数字组成
const res1 = /^\d*$/
console.log(res1.test(''));//ture 0次也算
console.log(res1.test('212131'));//ture
console.log(res1.test('2132sssk'));//false

// 2、 +
// 表示你的字符串里面需要出现一个 1 ~ 多个 的数字组成的片段
// 即只要出现了一个数字就符合要求
const a = /\d+/;
console.log(a.test('1hdjkha'));//ture

// 表示你的字符串只能由 0 ~ 多个数字组成
const a1 = /^\d+$/
console.log(a1.test(''));//false
console.log(a1.test('212131'));//ture
console.log(a1.test('2132sssk'));//false

// 3、 ?
// 表示你的字符串里面需要出现一个 0 ~ 1个 的数字组成的片段
// 即只要出现了数字就符合要求,不出现也算,0次
const b = /\d?/;
console.log(b.test('121hdjkha'));//ture

// 表示你的字符串只能由3个数字组成
const b1 = /^\d?$/
console.log(b1.test(''));//true 0个数字组成
console.log(b1.test('2'));//ture 1个数子组成
console.log(b1.test('2132sssk'));//false

// 4、 {n}
// 表示你的字符串里面需要出现一个 n个 的数字组成的片段
// 即只要出现了n个数字组成的片段就符合要求
const c = /\d{3}/;
console.log(c.test('1hd123jkha'));//ture

// 表示你的字符串只能由 3个数字组成
const c1 = /^\d{3}$/
console.log(c1.test(''));//false
console.log(c1.test('212'));//ture
console.log(c1.test('2132sssk'));//false

// 5、 {n,}
// 表示你的字符串里面需要出现一个 n个以上 的数字组成的片段,(包括n个)
// 即只要出现了n个数字或以上组成的片段就符合要求
const d = /\d{3,}/;
console.log(d.test('1hd123jkha'));//ture

// 表示你的字符串只能由 3个数字组成
const d1 = /^\d{3,}$/
console.log(d1.test(''));//false
console.log(d1.test('212'));//ture
console.log(d1.test('2132'));//true

// 5、 {n,m}
// 表示你的字符串里面需要出现一个 n ~ m 个数字组成的片段,(包括n个)
// 即只要出现了n ~ m 个数字或以上组成的片段就符合要求
const f = /\d{3,6}/;
console.log(f.test('1hd123jkha'));//ture

// 表示你的字符串只能由 3个数字组成
const f1 = /^\d{3,6}$/
console.log(f1.test(''));//false
console.log(f1.test('212'));//ture
console.log(f1.test('213212131321'));//false 超过范围

结果展示:

image

正则表达式验证数字范围

  • 一般不用正则表达式来验证数字范围,因为过于复杂,逻辑过于难懂

这里就展示一下验证逻辑

/*
正则验证数字范围
验证:0-255
思路:
=》把 0 - 255 的数字分成几类
=》一位数 \d 0-9
=》两位数 \d{2} 10-99
=》1 开头的三位数 1\d{2} 100-199
=》2 开头的 十位位0-4的三位数 2[0-4]\d 200-249
=》2 开头 5位十位的三位数 25[0-5] 250-255

正则:
=》/^(\d|\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/
*/

const reg = /^(\d|\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/;
console.log(reg.test('5'));//true
console.log(reg.test('56'));//true
console.log(reg.test('156'));//true
console.log(reg.test('234'));//true
console.log(reg.test('255'));//true

结果展示:

image

正则的贪婪和非贪婪性

  • 正则的贪婪性(默认)与非贪婪性
    • 贪婪性:
      • 当你给一个符号使用限定符的时候,在你捕获的时候,它会尽可能的多去捕获内容,我们管这个特性叫做正则的贪婪特性
    • 非贪婪性
      • 正则在捕获的时候尽可能的按照最小值来捕获,在写限定符的时候,在后面多加一个 ?

代码展示:

// 贪婪性例子
const a = /\d+/;
// 在捕获的时候他会捕获它能够捕获的最大长度,就是 '121231231'
console.log(a.exec('abc121231231abc'));//['121231231', index: 3, input: 'abc121231231abc', groups: undefined]

// 非贪婪性例子
const b = /\d*?/;
// 在捕获的时候他会捕获它能够捕获的最大长度,就是 '',包括0个
console.log(b.exec('abc121231231abc'));//['', index: 0, input: 'abc121231231abc', groups: undefined]
console.log(b.exec('121231231abc'));//

结果展示:

image

正则的预查

  • 1、正向预查
    • =》正向肯定预查
      • -> 当我们在捕获一个内容时,后面必须跟着的是我选择的某一个才可以
      • -> 符号(?=)
    • =》正向否定预查
      • -> 当我们在捕获一个内容时,后面必须跟着的不是我选择的某一个才可以
      • -> 符号(?!)
  • 2、负向预查
    • =》负向肯定预查
      • -> 当我们在捕获一个内容时,前面必须跟着的是我选择的某一个才可以
      • -> 符号(?<=)
    • =》负向否定预查
      • -> 当我们在捕获一个内容时,前面必须跟着的不是我选择的某一个才可以
      • -> 符号(?<!)

代码展示:

// 例子:'ES2015 ES2016 ES2017'

// 1、正向肯定预查(我要捕获后面必须写着的是2015或者2016的ES)
const a1 = /ES(?=2015|2016)/;
console.log(a1.exec('ES2015'));
console.log(a1.exec('ES2016'));
console.log(a1.exec('ES2017'));//null

// 2、正向否定预查(我要捕获后面不能写着的是2015或者2016的ES)
const a2 = /ES(?!2015|2016)/;
console.log(a2.exec('ES2015'));//null
console.log(a2.exec('ES2016'));//null
console.log(a2.exec('ES2017'));

// 3、负向肯定预查(我要捕获前面必须写着的是2015或者2016的ES)
const a3 = /(?<=2015|2016)ES/;
console.log(a3.exec('2015ES'));
console.log(a3.exec('2016ES'));
console.log(a3.exec('2017ES'));//null

// 3、负向否定预查(我要捕获前面必须写着的是2015或者2016的ES)
const a4 = /(?<!2015|2016)ES/;
console.log(a4.exec('2015ES'));//null
console.log(a4.exec('2016ES'));//null
console.log(a4.exec('2017ES'));

结果展示:

image
image