什么是正则表达式？

  • 正则表达式也叫规则表达式,是一个复杂的数据类型：object

作用：

  • 1、专门用于验证字符串是否符合规则
  • 2、从字符串中获取一部分符合规则的内容

语法：

  • =》使用一些特定的符号来组合成一个表达式
  • =》使用这个表达式去验证字符串，或者从字符串里面获取一些内容

创建正则表达式的两种方式:

  • 1、以字面量创建
  • 2、内置构造函数创建

代码展示:

// 1、以字面量创建
var a = /abcd/;
console.log(a);///abcd/
console.log(typeof a);//object

// 2、内置构造函数创建
var res = new RegExp('abcd');
console.log(res);// /abcd/

// 意义:字符串里面包含一段'abcd',字母即可，切记是一段字符串
    // =》aabbccdd  不包含'abcd'
    // =》aaabcdd   包含'abcd'

结果展示:

image

正则表达式的边界元字符

  • 1、 ^ ：表示字符串的开始 (写在转义符 \ 的前面)
  • 2、 $ ：表示字符串结束 (写在基础元字符的后面 例：\d$)

代码展示:

// 1、 ^
// 表示你的字符串需要以一个数字开头
const res = /^\d/;
console.log(res.test('asxd12131'));//false 因为这个字符串没有以数字开头
console.log(res.test('1sgskjhgka'));//ture

 // 2、 $
// 表示你的字符串需要以一个数字结尾
const res1 = /\d$/;
console.log(res1.test('asxd12131bhsb'));//false 因为这个字符串没有以数字结尾
console.log(res1.test('1sgskjhgka123'));//ture

// 特例：表示你的字符串从开头到结尾只能有一个数字
const a = /^\d$/;
console.log(a.test('2'));//true

结果展示:

image

正则表达式的基础元字符

  • 元字符：组成正则表达式的基本符号

    • =》以符号的形式来代替文本内容
    • =》把所有的文本内容归结成一些符号来代替

  • 1、\s 表示一个空格(只需有一个空格即可)

  • 2、\S 表示一个非空格(只需有一个非空格即可)

  • 3、\t 表示一个制表符(即我们常常按的tab键)

  • 4、\d 表示一个数字(只需要有一个数字即可)

  • 5、\D 表示一个非数字(即检测的字符串里面不能全是数字)

  • 6、\w 表示 数字 字母 下划线都可以

    • =》数字 字母 下划线 这三个当中选一个要有

  • 7、\W 表示 数字 字母 下划线以外

    • =》数字 字母 下划线以外任意一个都行

  • 8、(.) 表示非换行内容(即要检测的内容当中需要有一个非换行内容，就是不能全是换行内容)

  • 9、\(单个\) 表示转义符

    • =》把没有意义的内容转换成有意义的内容
    • =》把有意义的内容转换成没有意义的内容

代码展示:

// 1、 \s
// 表示字符串里面需要有一个 空格 字符
const reg =  /\s/;//  相当于 / /
console.log(reg.test('aaabbbcccddd'));//false
console.log(reg.test('aaab b b c ccddd'));//ture

// 2、 \S
// 表示字符串里面需要有一个 非空格 字符
const res =  /\S/;//  相当于 /非空格/
console.log(res.test('aaabbbcccddd'));//ture
console.log(res.test('  '));//false

// 3、 \t
// 表示字符串里面需要有一个 制表符(tab) 字符
const res1 =  /\t/;//  相当于 /  /里面其实不是空格键，是tab
console.log(res1);
console.log(res1.test('aaabbbcccddd'));//false
console.log(res1.test(' '));//false 这里是一个空格键
console.log(res1.test('	'));//true  这里是一个tab键(一个制表符)

// 4、 \d
// 表示字符串里面需要有一个 数字
const res2 =  /\d/;//  相当于 /数字/
console.log(res2.test(' '));//false
console.log(res2.test('  123shuia'));//true

// 5、 \D
// 表示字符串里面需要有一个 数字
const res3 =  /\D/;//  相当于 /数字/
console.log(res3.test('121231231231'));//false
console.log(res3.test('  123shuia'));//true

// 6、 \w
// 表示字符串里面需要有一个 数字 字母 下划线 三选一
const res4 =  /\w/;//  相当于 /三选一/
console.log(res4.test('##￥@￥￥%…………&'));//false
console.log(res4.test('1shhuj4545_'));//true

// 7、 \W
// 表示字符串里面需要有一个 数字 字母 下划线以外的
const res5 =  /\W/;//  相当于 /数字 字母 下划线以外的/
console.log(res5.test('##￥@￥￥%…………&'));//ture
console.log(res5.test('11212sghjghhjks__'));//false

// 7、 (.)
// 表示内容里面需要有一个非换行内容
const res6 =  /./;//  相当于 /不能全是换行内容/
console.log(res.test('\n\n\n\n'));//false
console.log(res6.test('11212sgh\njghhjks__'));//true

结果展示:

image

正则表达式的两个方法:

  • 1、匹配：验证字符串是不是符合正则表达式
    • =》语法：正则.test(你要检测的字符串)
    • =》返回值：true ， false
  • 2、捕获：从字符串里面获取符合正则规则的那一部分片段
    • =》语法：正则.exec(你要捕获的字符串)
    • =》返回值：

      • 1、字符串里若是没有符合规则的片段

        • -》返回null

      • 2、基础捕获

        • -》返回值是一个数组
        • -》[0] 是捕获出来的片段
        • -》不过有多少个片段，都只是捕获第一个片段
        • -》不管捕获多少次，都只是捕获第一个片段

代码展示:

// 0、准备一个正则
// 表示字符串内需要有一个 abcd 的片段
const reg = /abcd/;

// 1、test()
console.log(reg.test('aaabbbcccddd'));//false  不符合
console.log(reg.test('aaabcddddddd'));//true    符合

// 2、exec()
const res = reg.exec('aaabbbcccddd');
console.log(res);//null   不符合

const res2 = reg.exec('aaabcdddddd');
console.log(res2 , typeof res2);//一个对象，里面有捕获的片段'abcd' , 片段的起始位置：index：2 ，片段来源：aaabcdddddd

结果展示:

image

正则表达式的特数符号

  • 1、()

    • 1-1、表示一个整体
    • 1-2、单独捕获
      • =》在你捕获一个字符串的时候
      • =》从左到右开始每一个小括号依次是数组里面的 [1] 开始的内容
      • =》从左到右依次书小括号的开始括号

  • 2、(?:)

    • 表示整体匹配但是不捕获

  • 3、| (表示或者)

    • =》占位符
    • =》表示左边或者右边都行
    • =》大部分时候和()连用，表示一个整体 或者 另一个整体
    • 注意：分开的是左边和右边的整个

  • 4、[]

    • =》表示[]里面存在的任意一个都可以

  • 5、[^]

    • =》表示[^]不能全部由里面的字符组成
    • =》即只要存在不是[^]内指定的字符即可

  • 6、-

    • =》表示从 到 或者 到
    • =》这是一个使用在[]里面的一个符号
    • =》表示哪一个字符到哪一个字符
    • =》前提是他们在ASCII码里面连着的(字母区分大小写)

  • 常见的组合形式

    • 1、[0-9a-zA-Z_] 等价于 \w (表示 数字 字母 下划线都可以 三者之一)
    • 2、[^0-9a-zA-Z_] 等价于 \W (表示 数字 字母 下划线以外)
    • 3、[0-9] 等价于 \d (表示一个数字(只需要有一个数字即可))
    • 4、[^0-9] 等价于 \D (表示一个非数字(即检测的字符串里面不能全是数字))
    • 5、[ ] 等价于 \s (表示一个空格(只需有一个空格即可))
    • 6、[^ ] 等价于 \S (表示一个非空格(只需有一个非空格即可))

  • 特殊说明：

    • =》当 点(.) 出现在[] 或者 [^ ] 里面时表示一个文本

代码展示:

// 1、()
// 1-1、表示一个整体
const a1 = /(abc){2}/;//表示abc出现两次
console.log(a1.test('abcabcasxd'));//ture
// 1-2、单独捕获(将括号内的东西单独捕获出来)
const a2 = /\d+(\s+)\d+/;//表示该字符串可以由 数字 + 空格 + 数字 组成
console.log(a2.exec('123 123'));
// 返回值：[123 123] ， 0: "123 123" 1: " "  将括号内的空格单独捕获出来，index值是1

// 2、(?:)
// 表示只是标志但是不捕获
const a3 = /\d+(?:\s+)\d+/;
console.log(a3.exec('123   123'));//[123  123]

// 3、| (占位或)
const a4 = /(abc|def)/;//(表示有c或者有d都可以)
console.log(a4.test('abc'));//true
console.log(a4.test('def'));//true
console.log(a4.test('abcdef'));//true
console.log(a4.test('a'));//false

// 4、[]
const a5 = /[abcd]/;//只要里面存在abcd中的任意一个都可以
console.log(a5.test('a'));//true
console.log(a5.test('ab'));//true
console.log(a5.test('cs'));//true
console.log(a5.test('s'));//false
// 小练习：要求只要是abcd中的任意一个字符且只能是一个
const a6 = /^[abcd]$/;
console.log(a6.test('b'));//true
console.log(a6.test('a'));//true
console.log(a6.test('ab'))//false

// 5、[^]
const a7 = /[^abcd]/;//表示字符串不能全部由[^]里面指定的字符组成
console.log(a7.test('a'));//false
console.log(a7.test('123'));//true

// 6、-
const a8 = /^[0-9]$/;//表示一位数字组成，这个数字可以是 0 - 9 中的任意一位
console.log(a8.test('5'));//true
const a9 = /^[a-z]$/;//表示一位字母组成，这个数字可以是 a - z 中的任意一位
console.log(a9.test('b'));//true


// 小练习
// 他表示只要是括号内两部分的一部分即可，不需要一定是相同的两个内容
const reg = /^(abc|def){2}$/;
console.log(reg.test('abcabc'));//true
console.log(reg.test('defdef'));//true
console.log(reg.test('abcdef'));//true

// 小练习2(常见的账号注册)
// 要求：验证一个字符，只能由数字字符和下划线组成，但是不能由下划线开头，6-12位
const res = /^[0-9a-zA-Z]\w{5,11}/;
console.log(res.test('abxd121321_'));//true
console.log(res.test('-123131sgdbd'));//false

结果展示:

image
image