正则表达式 _ 基础版

雨季mo浅忆

于 2021-08-19 22:11:22 发布

阅读量738

点赞数

分类专栏：前端文章标签：前端正则表达式

本文链接：https://blog.csdn.net/weixin_58099903/article/details/119808151

版权

前端专栏收录该内容

159 篇文章 29 订阅

订阅专栏

1. 认识正则表达式 - Regular Expression

1. 认识正则表达式 - Regular Expression

+ JS 中的数据类型, 是一个 复杂数据类型
+ 作用: 专门用来验证 **字符串** 是否符合规则
正则表达式的创建
1. 字面量方式创建正则表达式
=> 语法: var reg = /abcd/
// 1. 字面量方式创建正则表达式
// 意思: 当你使用这个 reg 正则去验证字符串的时候, 
// 要求字符串中必须包含 abcd 这个字符片段
// 验证: 'hjdasghjdabcd'  true
// 验证: 'sadadfbasdadc'  false
var reg = /abcd/
console.log(reg)
2. 内置构造函数创建正则表达式
=> 语法: var reg = new RegExp('abcd')
// 2. 内置构造函数创建正则表达式
var reg2 = new RegExp('abcd')
console.log(reg2)
正则表达式两种创建方式的区别:

0. 语法不一样
1. 标识符的书写
=> 字面量方式, 直接书写在正则的最后面
=> 内置构造函数方式, 需要书写在第二个参数的位置
// 1. 标识符的书写
var reg = /abcd/gi
console.log(reg)
// var reg1 = /abcd/ig
// console.log(reg1)  // 打印 => /abcd/gi

var reg2 = new RegExp('abcd', 'ig')
console.log(reg2)     // 打印 => /abcd/gi
2. 字符串拼接
=> 字面量方式无法拼接字符串
=> 内置构造函数, 因为第一个参数位需要字符串格式, 所以可以使用字符串拼接
// 2. 拼接字符串
var s = 'HH'
var s2 = 'MM'
// 字面量方式不能进行字符串拼接 , 不能解析变量
var reg = /(HH|MM)/
console.log(reg)		// 打印 => /(HH|MM)/

// 内置构造函数可以拼接字符串
// 因为第一个参数就是需要你以 字符串 的形式传递
// 所以可以拼接字符串
var reg2 = new RegExp('(' + s + '|' + s2 + ')')
console.log(reg2)	   // 打印 => /(HH|MM)/
3. 基本元字符的书写
=> 字面量方式的时候, 直接书写 \s\d\w
=> 内置构造函数书写的时候, 需要书写 \\s\\d\\w
// 3. 书写基本元字符
var reg = /\s\d\w/
console.log(reg)	// 打印 => /\s\d\w/

var reg2 = new RegExp('\\s\\d\\w')
console.log(reg2)	// 打印 => /\s\d\w/
为什么内置构造函数书写基本元字符需要双斜线

+ 字符串
=> 被引号包裹的所有内容叫做字符串
=> 在字符串内有一个特殊的符号叫做斜线 ( \ ) => 表示转义符号
=> 会把紧挨着他的一个内容转换
-> 如果是有意义的内容转换成没有意义的内容
-> 如果是没有意义的内容转换成有意义的内容
=> 你书写了一个字符串 '\s\d\w'
-> 在这个字符串内把 s 给转换成有意义的内容
-> 因为 \s 是没有特殊意义的
-> 其实就是一个 s 普通文本
-> '\s\d\w' 其实就是 'sdw'
-> 例子: n 是一个没有意义的字母
+ 当 n 和转义符在一起的时候, 就表示换行

+ new RegExp()
=> 第一个参数需要一个字符串
=> 你写的字符串就是正则内部的内容
=> 如果你想得到 /\s\d\w/
=> 那么你要给他的字符串里面写上 \s\d\w
=> 但是, 因为在字符串中 \ 是转义符
=> 当你书写字符串 '\s' 的时候, \ 就会把 s 转换成有意义的特殊内容
-> 可是字符串中确实没有 \s 组成的特殊意义字符, 所以就变成了一个单独的字母 s

为什么双斜线好使 :
=> 在字符串内, 斜线是有特殊意义的转义符
=> 使用转义符( \ ) 把有意义的转义符 ( \ ) 转换成没有意义的斜线文本 \
=> 当你书写 '\\s\\d\\w' 的时候, 实际对应的字符串就是 '\s\d\w'

当你创建正则表达式的时候
=> new RegExp('\s\d\w')
=> new RegExp('sdw')
// 没有意义的 n 文本内容
console.log('n')
// 使用转义符号把 n 转换成有特殊意义的内容
// 变成换行符号了
console.log('\n')
console.log('s')      // 打印 => s
console.log('\s')     // 打印 => s
// 用 转义符 把 转义符 给 转义
// 第一个 斜线是表示转义符, 把紧挨着他的内容转换
// 紧挨着第一个斜线的又是一个斜线
console.log('\\s')    // 打印 => \s
// 小明说: "小红告诉他: '今天早上起晚了'。"
var str = '小明说: "小红告诉他: \'今天早上起晚了\'。"'
console.log(str)
console.log('\s\d\w')// 其实 这个字符串就是 'sdw'

2. 正则表达式的常用方法

1. test( ) 匹配
2. exec( ) 捕获

1. test( ) 匹配
+ 语法: 正则表达式.test('要检测的字符串')
+ 返回值: 一个布尔值
=> 如果字符串满足正则要求, 那么就是 true
=> 如果字符串不满足正则要求, 那么就是 false
// 1. test() 匹配
// 意义: 字符串中必须包含 abcd 字符串片段
var reg = /abcd/
var res = reg.test('1324abcd2345tgfs')
console.log(res)		// true
2. exec( ) 捕获
+ 语法: 正则.exec(要捕获的字符串)
=> 作用: 从字符串中把满足正则条件的部分获取出来
+ 返回值:
2-1. 如果原始字符串中没有满足正则表达式要求的字符串片段内容
=> 那么就是返回 null
2-2. 如果原始字符串中有满足正则表达式片段的内容
2-2-1. 正则没有 ( ) 也没有 全局标识符 g
=> 返回结果是一个数组
=> 索引 [0] 位置就是从字符串中捕获出来的满足正则要求的第一个内容
=> 注意 : 不管捕获多少次 , 你的每一次捕获都是从原始字符串的索引 0 开始去查找
2-2-2. 正则有全局标识符 g
=> 返回值是一个数组
=> 索引 [0] 位置就是从字符串中捕获出来满足正则要求的第一个内容
=> 注意 : 第二次捕获是从第一次捕获的结束位置开始向后查找
=> 直到最后捕获不到为止(找到为 null ), 再下一次时又是从字符串索引[0] 开始查找
2-2-3. 有 ( )
=> 返回结果是一个数组
=> 索引 [0] 位置就是从字符串中捕获出来的满足正则要求的第一个内容
=> 从索引 [1] 开始, 依次是正则表达式中的每一个小括号的单独内容
+ 注意: 按照小括号的开始标志, 来数是第几个小括号

扩展:
   + 括号  ( ) 有两个意义
   => 一个整体
   => 单独捕获
   + 如果你想只使用一个意义, 整体的所用, 不想在捕获的时候单独捕获出来
   => 你可以写成 (?:)
   => 匹配但不捕获
// 2. exec() 捕获
var str = 'weixin123scf456abf789sdb000'
// 2-1. 没有符合正则要求的字符串片段
var reg = /\d{4}/
var res = reg.exec(str)
console.log(res)	//	null
// 2-2. 有符合正则表达式要求的内容
// 2-2-1. 没有 () 没有 g
var reg = /\d{3}/
var res = reg.exec(str)
console.log(res)    //  index: 6
// 2-2-2. 有全局标识符 g
var reg = /\d{3}/g
var res = reg.exec(str)
console.log(res)            // index: 6
console.log(reg.exec(str))  // index: 12
console.log(reg.exec(str))  // index: 18
// 2-2-3. 有()
// 第一个小括号: 省
// 第二个小括号: 市
// 第三个小括号: 县
// 第四个小括号: 年
// 第五个小括号: 月
// 第六个小括号: 日
// 第七个小括号: 性别
// 第八个小括号: 最后一位
var reg = /(\d{2})(\d{2})(\d{2})((\d{4})(\d{2})(\d{2}))\d{2}(\d)(?:\d|x)/
var res = reg.exec('我的身份证号是 : 11010820030711001x ^_^')
console.log(res)

3. 正则表达式的符号 - 基本元字符

正则表达式的组成部分
+ 文本
=> 没有特殊意义的文本
+ 元字符
=> 所有的文本内容
=> 有特殊意义的字符 , 用符号表示一类内容
+ 标识符
=> 书写在正则表达式的外面, 用来修饰整个正则表达式的

元字符 - 基本元字符
1. \d : 表示一位数字内容
2. \D : 表示一位 非数字 内容
// 1. \d
// 意义: 表示字符串中 必须至少包含一位 数字内容(0-9)
var reg = /\d/
var res = reg.test('ab2de')
console.log(res)	// true
// 2. \D
// 意义: 表示字符串中 必须至少包含一位 非数字内容
var reg = /\D/
var res = reg.test('1234%567')
console.log(res)	// true
3. \s : 表示一位空白内容 (空格/缩进/制表符/...)
4. \S : 表示一位 非空白 内容
// 3. \s
// 意义: 表示 字符串中 必须要含有至少一位 空白内容
var reg = /\s/
// 使用 reg 这个正则去检测 'abcd' 这个字符串是否符合 规则
// 如果符合返回 true
// 如果不符合返回 false
var res = reg.test('a bcd')
console.log(res)	// true
// 4. \S
// 表示 字符串 中必须包含一位 非空白内容
var reg = /\S/
var res = reg.test('  $ ')
console.log(res)	// true
5. \w : 表示一位数字(0-9)字母(a-zA-Z)下划线(_) 中的任意一个
6. \W : 表示一位非数字字母下划线的任意内容
// 5. \w
// 表示字符串中 必须包含一位 数字或者字母或者下划线
var reg = /\w/
var res = reg.test('!@#%^_^&*()!')
console.log(res)	// true
// 6. \W
// 表示字符串中必须包含一位 数字字母下划线 以外的内容
var reg = /\W/
var res = reg.test('123ab@_')
console.log(res)	// true
7. 点( . ) : 表示一位 非换行以外的任意内容都行
// 7. 点(.)
// 意义: 表示字符串中必须包含一位 非换行以外的任意内容
var reg = /./
// 在字符串内 \n 表示换行的意思
var res = reg.test(' \n ')
console.log(res)  // 打印 => true
// 小问题
// 我需要检测一个 小数
var reg = /\d.\d/
var res = reg.test('1.5')
console.log(res)	// true
8. \ : 表示 转义符
=> 把有意义的符号转换成没有意义的普通文本
=> 把没有意义的文本转换成有意义的符号
// 8. \
// 要求, 字符串中必须包含一个 点 文本
// 在正则里面, 点(.) 是有特殊意义的
// 使用转义符和 点(.) 连接
// 变成 \.  把有意义的 点 转换成没有意义的 点 文本
// 小测试
// 表示字符串中必须包含一位 点 文本内容
var reg = /\d\.\d/
var res = reg.test('2.5')
console.log(res)	// true

4. 元字符 - 边界符号

1. ^ : 表示字符串开头
2. $ : 表示字符串结尾
+ 注意: 当开头^ 和结尾$ 一起使用的时候
=> 表示的是 : 从开头到结尾

// 1. ^
// 表示字符串中至少包含一位数字
var reg1 = /\d/
// 表示字符串中必须以一个数字开头
var reg2 = /^\d/
console.log(reg1, 'a1b', reg1.test('a1b'))	// true
console.log(reg2, 'a1b', reg2.test('a1b'))	// false

// 2. $
// 表示字符串中至少包含一位数字
var reg1 = /\d/
// 表示字符串中必须以一个数字结尾
var reg2 = /\d$/
console.log(reg1, 'a1b', reg1.test('a1b'))	// true
console.log(reg2, 'ab1', reg2.test('ab1'))	// true

// 小测试:
// 规则: 字符串开头 一位数字 字符串结尾
// 表示: 字符串只能由一位数字组成
var reg = /^\d$/
console.log(reg.test('1'))		// true
console.log(reg.test('1a2'))	// false
console.log(reg.test('123'))	// false

// 问题:
// 需求: 验证一个 18 为的身份证号, 不考虑最后一位是 字母
var reg = /^\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d$/
// 此方法不合适

5. 元字符 - 修饰符 - 限定符

+ 注意 : 一个修饰符只是用来修饰符号前面 ** 一个 ** 内容的出现次数
1. * : 表示出现 0 ~ 多次

// 1. *  :  0 ~ 多次
// * 修改 \d 这个符号出现的次数
// 表示字符串从开头到结尾数字出现至少 0 次
var reg = /^\d*$/
console.log(reg.test(''))	// true
console.log(reg.test('1'))  // true
console.log(reg.test('12')) // true

2. + : 表示出现 1 ~ 多次

// 2. +  :  1 ~ 多次
// + 修改 \d 这个符号出现的次数
// 表示字符串从开头到结尾数字出现至少 1 次
var reg = /^\d+$/
console.log(reg.test(''))	// false
console.log(reg.test('1'))  // true
console.log(reg.test('12')) // true

3. ? : 表示出现 0 ~ 1 次

// 3. ?  :  0 ~ 1 次
// ? 修改 \d 这个符号出现的次数
// 表示字符串从开头到结尾数字出现 0 次或者 1 次
var reg = /^\d?$/
console.log(reg.test(''))	// true
console.log(reg.test('1'))  // true
console.log(reg.test('12')) // false

4. {n} : 表示出现 指定 n 次

// 4. {n}
// {n} 修改 \d 这个符号指定两次
// 表示字符串从开头到结尾数字出现 一次
var reg = /^\d{1}$/
console.log(reg.test(''))   // false
console.log(reg.test('1'))  // true
console.log(reg.test('12')) // false

5. {n,} : 表示出现至少 n 次, n ~ 多次
=> {0,} 等价于 * : 0 ~ 多次
=> {1,} 等价于 + : 1 ~ 多次

// 5. {n,}
// 表示字符串从开头到结尾数字至少出现 一次
var reg = /^\d{1,}$/
console.log(reg.test(''))   // false
console.log(reg.test('1'))  // true
console.log(reg.test('12')) // true

6. {n,m} : 表示出现 n ~ m 次
=> {0,1} 等价于 ? : 0 ~ 1 次

// 6. {n,m}
// 表示字符串从开头到结尾数字出现 1 ~ 2 次
var reg = /^\d{1,2}$/
console.log(reg.test(''))   // false
console.log(reg.test('1'))  // true
console.log(reg.test('12')) // true
console.log(reg.test('123'))// false

// 小练习
// 表示 字符串中 包含一个 两位数字 就行
var reg = /\d{2}/
console.log(reg.test('1'))        // false
console.log(reg.test('12'))       // true
console.log(reg.test('123'))      // true

// 问题 : 表示 字符串中 只能是 两位数字 组成
var reg = /^\d{2}$/
console.log(reg.test('1'))        // false
console.log(reg.test('12'))       // true
console.log(reg.test('123'))      // false

// 小练习2
// 这个 {2} 修饰符只是修饰前面一个 c
var reg = /^abc{2}$/
console.log(reg.test('abcabc'))  // false
console.log(reg.test('aabbcc'))  // false
console.log(reg.test('abcc')) // true