正则表达式

最新推荐文章于 2022-07-01 22:26:59 发布

我是打工人

最新推荐文章于 2022-07-01 22:26:59 发布

阅读量234

点赞数 1

文章标签：正则表达式

本文链接：https://blog.csdn.net/szydqq/article/details/123391974

版权

认识正则表达式 - Regular Expression

+ 目的: 验证字符串是否符合规则

+ 是一个复杂数据类型

正则表达式的创建

1. 字面量方式创建

=> 语法: var reg = /abcd/

2. 内置构造函数创建

=> 语法: var reg = new RegExp('abcd')

// 1. 字面量方式创建

const r1 = /abcd/

console.log(r1)

// 2. 内置构造函数创建

const r2 = new RegExp('abcd')

console.log(r2)

两种创建方式的区别

1. 书写标识符的区别

=> 字面量: 直接书写在正则的后面

+ const reg = /abcd/gi

=> 内置构造函数: 以第二个参数的形式书写

+ const reg = new RegExp('abcd', 'gi')

2. 拼接变量的能力

=> 字面量方式不能进行变量拼接的

=> 内置构造函数可以拼接

-> 因为内置构造函数的第一个参数是一个字符串类型数据

3. 书写基本元字符

=> 字面量: /\s\d\w/

=> 内置构造函数内: new RegExp('\\s\\d\\w')

代码：

// 1. 书写标识符

// const r1 = /abcd/ig

// const r2 = new RegExp('abcd', 'gi')

// console.log(r1, r2)

// 2. 拼接变量的能力

// const s = 'HH'

// 内置构造函数

// const reg = new RegExp('^' + s + '$')

// console.log(reg.test('HH'))

// 3. 书写基本元字符

const r1 = /\s\d\w/

console.log(r1)

const r2 = new RegExp('\\s\\d\\w')

console.log(r2)

正则表达式的常用方法

1. 匹配

+ 目的: 检测对还是不对

+ 语法: 正则表达式.test(字符串)

+ 返回值: 一个布尔值

=> 如果字符串满足正则表达式规则, 那么返回 true

=> 如果字符串不满足正则表达式规则, 那么返回 false

// 正则: 验证字符串中是否包含完整的 'abcd' 字符串片段

const reg = /abcd/

const res = reg.test('hfgasjhfgab cdsjhdagfjhk')

console.log(res)

2. 捕获

+ 目的: 从原始字符串中截取出符合正则表达式规则的部分字符串片段

+ 语法: 正则.exec(字符串)

+ 返回值:

1. 原始字符串内没有符合正则要求的字符串片段

=> 返回值就是 null

2. 原始字符串内有符合正则要求的字符串片段

=> 返回值是一个数组数据类型, [0] 位置就是从字符串内捕获出来的内容

2-1. 正则没有 () 没有全局标识符 g

=> 返回值数组只有 [0] 数据

=> 不管你捕获多少次, 正则都是从原始字符串开始位置进行检索

2-2. 正则有 ()

=> 返回值数组 [0] 依旧是捕获出来的完整字符串片段

=> 从 [1] 开始依次是每一个小括号的单独内容捕获

2-3. 正则有 g

=> 返回的数组 [0] 依旧是捕获出来的完整字符串片段

=> 但是从第二次开始, 会从第一次捕获结束位置开始检索

=> 以此类推, 直到找不到了为止, 返回 null

=> 再下一次又从字符串开始位置进行检索

匹配但不捕获

(?:)

// 1. 原始字符串内没有符合正则要求的字符串片段

// const str = 'abcdefgh'

// const reg = /a{2}/

// console.log(reg.exec(str))

// 2. 原始字符串内有符合正则要求的字符串片段

// 2-1. 正则没有 () 没有 g

// const str = 'sad123hgas456jkdgj789kas111dg'

// const reg = /\d{3}/

// console.log(reg.exec(str))

// 2-2. 正则有 ()

// const str = '我的身份证号是 : 11010820050223001x 你看对不对 ^_^'

// 11 省

// 01 市

// 08 县

// 2005 年

// 02 月

// 23 日

// 倒数第二位性别奇数男性偶数女性

// const reg = /(\d{2})(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})\d{2}(\d)(?:\d|x)/

// console.log(reg.exec(str))

// 2-3. 有全局标识符 g

const str = 'sad123hgas456jkdgj789kas111dg'

const reg = /\d{3}/g

console.log(reg.exec(str))

正则表达式的组成

+ 文本内容

+ 元字符：在正则表达式内用一个符号来表示一类内容

+ 标识符

元字符

1. \d 表示一位数字

2. \D 表示一位非数字

3. \s 表示一位空白内容(空格, 缩进)

4. \S 表示一位非空白内容

5. \w 表示一位数字字母下划线任意内容

6. \W 表示一位非数字字母下划线的任意内容

7. . 表示一位非换行的任意内容

8. \ 表示转义符

// 1. \d

// 表示字符串中必须包含一位数字(0-9)

// const reg = /\d/

// console.log(reg.test('sduygfkasgdfh'))

// console.log(reg.test('sduygfkasgdfh1'))

// console.log(reg.test('4sduygfkasgdfh'))

// console.log(reg.test('sduygfk6asgdfh'))

// 2. \D

// 表示字符串中必须包含一位非数字内容

// const reg = /\D/

// console.log(reg.test('1234567890'))

// console.log(reg.test('123456789 0'))

// console.log(reg.test('1234.567890'))

// console.log(reg.test('1234中文567890'))

// 3. \s

// 表示字符串中必须包含一位空白内容

// const reg = /\s/

// console.log(reg.test('sdukyf gyukasdgfv5645674764765^&%$^&%$^&'))

// 4. \S

// 表示字符串中必须包含一位非空白内容

// const reg = /\S/

// console.log(reg.test(' 1 '))

// 5. \w

// 表示字符串中必须包含一位数字(0-9) 或者字母(a-zA-Z) 或者下划线(_) 任意一个都行

// const reg = /\w/

// console.log(reg.test('!@#$%^&*()'))

// console.log(reg.test('!@#$%^&*(f)'))

// console.log(reg.test('!@#$%3^&*()'))

// console.log(reg.test('!_@#$%^&*()'))

// 6. \W

// const reg = /\W/

// console.log(reg.test('1234567^890_sdfghjkSDFGHJK'))

// 7. .

// 表示字符串中必须有换行以外的内容

// const reg = /./

// console.log(reg.test('\n\na\n'))

// 8. \

// 使用转义符把有意义的点(.) 转换成了没有意义的点文本

const reg = /\d\.\d/

console.log(reg.test('1.5'))

console.log(reg.test('1#5'))

console.log(reg.test('1@5'))

console.log(reg.test('1a5'))

元字符 - 边界元字符

1. ^ 表示字符串开始(开头)

2. $ 表示字符串结束(结尾)

注意: 当 ^ 和 $ 一起使用的时候, 表示从开始到结束

=> 没有 ^ 和 $ 叫做包含

=> 有 ^ 和 $ 叫做只能

// 1. ^

// 表示字符串必须以一位数字开头

// const reg = /^\d/

// console.log(reg.test('1abcdefg'))

// console.log(reg.test('12334abcdefg'))

// console.log(reg.test('abc1defg'))

// console.log(reg.test('abcdefg1'))

// 2. $

// const reg = /\d$/

// console.log(reg.test('1abcdefg'))

// console.log(reg.test('12334abcdefg'))

// console.log(reg.test('abc1defg'))

// console.log(reg.test('abcdefg1'))

// 3. ^ $

// 表示字符串从开头到结尾只能由一位数字组成

const reg = /^\d$/

console.log(reg.test('1'))

console.log(reg.test('12'))

console.log(reg.test('1a2'))

元字符 - 限定元字符

概念: 一个限定符只能修饰前面一个符号

1. * 表示重复出现 0 ~ 正无穷次

2. + 表示重复出现 1 ~ 正无穷次

3. ? 表示重复出现 0 ~ 1 次

4. {n} 表示重复出现 n 次

5. {n,} 表示重复出现 n ~ 正无穷次

6. {n,m} 表示重复出现 n ~ m 次

// // 1. *

// // 表示字符串只能有 0 ~ 多个数字组成

// const reg = /^\d*$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// // 2. +

// // 表示字符串只能有 1 ~ 多个数字组成

// const reg = /^\d+$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 3. ?

// 表示字符串只能有 0 ~ 1 个数字组成

// const reg = /^\d?$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 4. {n}

// 表示字符串只能有 3 个数字组成

// const reg = /^\d{3}$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 5. {n,}

// 表示字符串只能有 3 ~ 多个数字组成

// const reg = /^\d{3,}$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 6. {n,m}

// 表示字符串只能有 2 ~ 4 个数字组成

// const reg = /^\d{2,4}$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 小练习

// const reg = /\d{2,4}/

// console.log(reg.test('123'))

// console.log(reg.test('123456'))

// console.log(reg.test('abc123456789def'))

// {2} 修饰的只有 c 这个字母

// const reg = /^a{2}b{2}c{2}$/

// console.log(reg.test('abcabc'))

// console.log(reg.test('aabbcc'))

// console.log(reg.test('abcc'))

元字符 - 限定元字符

+ 概念: 一个限定符只能修饰前面一个符号

1. * 表示重复出现 0 ~ 正无穷次

2. + 表示重复出现 1 ~ 正无穷次

3. ? 表示重复出现 0 ~ 1 次

4. {n} 表示重复出现 n 次

5. {n,} 表示重复出现 n ~ 正无穷次

6. {n,m} 表示重复出现 n ~ m 次

// // 1. *

// // 表示字符串只能有 0 ~ 多个数字组成

// const reg = /^\d*$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// // 2. +

// // 表示字符串只能有 1 ~ 多个数字组成

// const reg = /^\d+$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 3. ?

// 表示字符串只能有 0 ~ 1 个数字组成

// const reg = /^\d?$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 4. {n}

// 表示字符串只能有 3 个数字组成

// const reg = /^\d{3}$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 5. {n,}

// 表示字符串只能有 3 ~ 多个数字组成

// const reg = /^\d{3,}$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 6. {n,m}

// 表示字符串只能有 2 ~ 4 个数字组成

// const reg = /^\d{2,4}$/

// console.log(reg.test(''))

// console.log(reg.test('1'))

// console.log(reg.test('12'))

// console.log(reg.test('123'))

// console.log(reg.test('1234'))

// console.log(reg.test('12345'))

// 小练习

// const reg = /\d{2,4}/

// console.log(reg.test('123'))

// console.log(reg.test('123456'))

// console.log(reg.test('abc123456789def'))

// {2} 修饰的只有 c 这个字母

// const reg = /^a{2}b{2}c{2}$/

// console.log(reg.test('abcabc'))

// console.log(reg.test('aabbcc'))

// console.log(reg.test('abcc'))

元字符 - 特殊元字符

1. ()

=> 含义1: 一个整体

=> 含义2: 单独捕获(欠着)

2. |

=> 或者

=> 一般和 () 连用

=> 只有 () 和 ^ 和 $ 能区分或的边界

3. []

=> 注意: 一个 [] 只占一位字符位置

=> 书写在 [] 内的任意一个字符都行

4. [^]

=> 注意: 一个 [^] 只占一位字符位置

=> 书写在 [^] 内的任意一个字符都不行

5. 中划线(-)

=> 表示至或者到

=> 一般和 [] 连用

=> 注意: 必须保证 ASCII 码是连续的

=> 特殊: \u4e00-\u9fa5 所有中文

// 1. ()

// {2} 修饰的是前面这个 ()

// const reg = /^(abc){2}$/

// console.log(reg.test('abcabc'))

// 2. |

// 表示内容可以是 abc 片段或者 def 片段

// const reg = /^(abc|def)$/

// console.log(reg.test('abc'))

// console.log(reg.test('def'))

// 表示字符串以 abc 开头或者以 def 结尾都可以

// /^abc/ 或者 /def$/

// const reg = /^abc|def$/

// console.log(reg.test('abcef'))

// console.log(reg.test('abdef'))

// console.log(reg.test('abcsdaasdsad'))

// console.log(reg.test('sdfsadfdsfsdfdef'))

// const reg = /^ab(c|d)ef$/

// console.log(reg.test('abcef'))

// console.log(reg.test('abdef'))

// console.log(reg.test('abcsdaasdsad'))

// console.log(reg.test('sdfsadfdsfsdfdef'))

// {2} 修饰的是 () 这个整体, 整体出现两次

// 整体可以是 abc 或者是 def, 但是没有要求两次必须一致

// const reg = /^(abc|def){2}$/

// console.log(reg.test('abcdef'))

// console.log(reg.test('abcabc'))

// console.log(reg.test('defdef'))

// console.log(reg.test('defabc'))

// 3. []

// 字符串从开头到结尾只能有一位字符组成, 这一位可以是 a 或者 b 或者 c 或者 d

// const reg = /^[abcd]$/

// console.log(reg.test('a'))

// console.log(reg.test('b'))

// console.log(reg.test('c'))

// console.log(reg.test('d'))

// console.log(reg.test('e'))

// console.log(reg.test('A'))

// 4. [^]

// 字符串从开头到结尾只能有一位字符组成, 这一位不能是 a 不能是 b 不能是 c 不能是 d

// const reg = /[^abcd]/

// console.log(reg.test('a'))

// console.log(reg.test('b'))

// console.log(reg.test('c'))

// console.log(reg.test('d'))

// console.log(reg.test('e'))

// console.log(reg.test('A'))

// 5. -

// 字符串从开头到结尾只能有一位字符组成, 这一位只要是数字就行

// const reg = /[0-9]/

// console.log(reg.test(0))

// console.log(reg.test(1))

// console.log(reg.test(2))

// console.log(reg.test(3))

// console.log(reg.test(4))

// console.log(reg.test(5))

// console.log(reg.test(6))

// console.log(reg.test(7))

// console.log(reg.test(8))

// console.log(reg.test(9))

// const reg = /^[\u4e00-\u9fa5]$/

// console.log(reg.test('你'))

元字符 - 重复元字符

1. \1 \2 \3 \4 \5 \6 \7 \8 \9

+ 重复出现

+ 需要第 n 个 () 出现的内容一模一样

+ 注意: 不是重复几次, 是重复第几个小括号

问题: 如何区分第几个小括号 ?

+ 在正则内按照小括号开始数数

// const reg = /^(abc|def){2}$/

// console.log(reg.test('abcabc'))

// console.log(reg.test('abcdef'))

// 表示在 \1 位置出现一个和第一个小括号一模一样的内容

// const reg = /^(abc|def)\1$/

// console.log(reg.test('abcabc'))

// console.log(reg.test('abcdef'))

// console.log(reg.test('defdef'))

// console.log(reg.test('defabc'))

// const reg = /^(ab|cd)(hh|mm)\1\2$/

// console.log(reg.test('abhhabhh'))

// const reg = /^((ab|cd)|(hh|mm))\2$/

// console.log(reg.test('abab'))

// console.log(reg.test('cdcd'))

元字符 - 预查元字符

1. 正向肯定预查

+ (?=内容)真实正则内容

2. 正向否定预查

+ (?!内容)真实正则内容

3. 负向肯定预查

+ (?<=内容)真实正则内容

4. 负向否定预查

+ (?!=内容)真实正则内容

// 1. 正向肯定预查

// const str = 'windows98 windows99 windows2000 win11 win10 win8 win7'

// const reg = /windows(?=\d{2})/g

// console.log(reg.exec(str))

// 2. 正向否定预查

// const str = 'windows98 windows99 windows2000 win11 win10 win8 win7'

// // 不能有两位数字前面包含一个 windows 字符串的内容

// const reg = /windows(?!\d{2})/g

// console.log(reg.test(str))

// // 3. 负向肯定预查

// const str = 'windows98 windows99 windows2000 win11 win10 win8 win7'

// const reg = /(?<=windows)\d{2}/g

// console.log(reg.exec(str))

// 4. 负向否定预查

// const str = 'windows98 windows99 windows2000 win11 win10 win8 win7'

// 不能出现 windows 后面带两个数字的情况

// const reg = /(?!=windows)\d{2}/g

// console.log(reg.exec(str))

标识符

书写在正则外面, 正则的后面

+用来修饰整个正则表达式使用的

1. g 全局标识符 globle

+ 欠着

2. i 忽略大小写 ignore

// 2. i 忽略大小写

const reg = /^[a-z]$/i

console.log(reg.test('a'))

console.log(reg.test('b'))

console.log(reg.test('z'))

console.log(reg.test('M'))

正则的两大特性

1. 懒惰性

=> 当你捕获内容的时候, 每一次都会默认从字符串的开头开始检索

=> 解决方案: 加一个全局标识符 g

2. 贪婪性

=> 贪婪匹配能拿多少拿多少尽可能多的捕获

=> 非贪婪匹配能拿多少拿多少尽可能少的捕获

=> 解决方案: 使用非贪婪限定符

贪婪匹配指的都是限定符

+ 贪婪限定符

=> *

=> +

=> ?

=> {n,}

=> {n,m}

+ 非贪婪限定符

=> *?

=> +?

=> ??

=> {n,}?

=> {n,m}?

const str = '我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容我是小说的内容'

// const reg = /<p.*>/ // 贪婪

const reg = /<p.*?>/ // 非贪婪

console.log(reg.exec(str))

字符串

+ 在字符串内, \ 也是表示转义符

+ 在字符串内书写 \s 这个内容, 相当于把没有意义的 s 文本转换成有意义的符号

=> 但是字符串内没有 \s 这个符号规则

=> 字符串就会默认把它解析为 s 文本

+ 在你使用内置构造函数方式创建正则表达式的时候

=> 第一个参数是以字符串的形式书写正则内容

=> 当你在字符串内书写 '\s' 的时候, 因为字符串规则, 会把他解析为 's'

=> 给到正则的内容就是 's'

=> 组装出来的就是 /s/

+ 在你使用内置构造函数方式创建正则表达式的时候

=> 第一个参数是以字符串的形式书写正则内容

=> 当你在字符串内书写 '\\s' 的时候, 因为字符串规则, 第一个 \ 是把第二个 \ 转义了

=> 就会在字符串内留下一个斜线和 s 文本

=> 当你把这个内容当做第一个参数写入的时候

=> 出来的正则就是 /\s/

console.log('小明说 : "小红告诉他: \'今天早上小红没有吃饭\'"')

console.log('s')

console.log('\s')

console.log('\s' === 's')

console.log('\\s')

字符串常用方法

1. replace()

=> 语法:

-> 字符串.replace(换下字符, 换上字符)

-> 字符串.replace(正则表达式, 换上字符)

=> 返回值: 替换好的字符串

-> 当你传递的是正则表达式, 并且带有 g 标识符的时候, 会全部替换

2. search()

=> 语法:

-> 字符串.search(字符串片段)

-> 字符串.search(正则表达式)

=> 返回值:

-> 如果有该字符串片段, 就是该字符串片段的开始索引位置

-> 如果没有该字符串片段, 就是 -1

3. match()

=> 语法:

-> 字符串.match(字符串片段)

-> 字符串.match(正则表达式)

=> 返回值:

-> 当你参数传递字符串片段, 或者没有 g 的正则表达式的时候, 和 exec 一模一样

-> 当你参数传递正则表达式, 并且有全局标识符 g 的时候, 返回值是一个数组, 里面是捕获到的所有内容

// 1. replace()

// const str = 'ashdHHgaHHsjdHHsdfHHhgas'

// console.log(str.replace('HH', '**'))

// console.log(str.replace(/HH/, '**'))

// console.log(str.replace(/HH/g, '**'))

// 敏感词批量替换

// const arr = [ 'HH', 'MM', 'DD' ]

// let str = 'sdhjHHfDDgjMMkhDDaMMsdDDfgHHkjDDhaMMsdMMgHHfk'

// 只要有一个正则表达式 /(HH|MM|DD)/g

// const reg = new RegExp('(' + arr.join('|') + ')', 'g')

// console.log(str.replace(reg, '**'))

// 2. search()

// const str = 'asdasdasd123asdasd456asdas'

// console.log(str.search('111'))

// console.log(str.search(/\d{2}/))

// 3. match()

// const str = 'asdasd333asd123asdasd456asd999as'

// console.log(str.match('123'))

// console.log(str.match(/\d{3}/))

// console.log(str.match(/\d{3}/g))

小练习

/*
      小练习
    */

    /*
      1. 用户名正则验证
        + 要求: 只能包含 数字字母下划线         \w
               不能以 下划线 开头             [0-9a-zA-Z]
               共 6 ~ 12 位                 {6,12}
    */

    // 正则
    // const reg = /^[0-9a-zA-Z]\w{5,11}$/

    /*
      2. 大陆手机号验证
        + 要求:
          可以有 +86 可以没有                 (+86)? ?(133|135|188)\d{8}
          +86 后面可以有一个空格 可以没有
          手机号号段只要 133 135 188 开头
    */

    // 正则
    // const reg = /^(\+86)? ?(133|135|188)\d{8}$/

    /*
      3. 基本邮箱验证
        + 要求:
          @以前就是 用户名要求      /^[0-9a-zA-Z]\w{5,11}$/
          完全匹配 @               @
          邮箱名称 qq 163 sina    (qq|163|sina)
          后缀只能是 com cn       (com|cn)
    */

    // 正则
    // const reg = /^[0-9a-zA-Z]\w{5,11}@(qq|163|sina)\.(com|cn)$/


    /*
      4. 验证数字
        + 要求:
          => 验证 0 ~ 255 的数字
        + 分类:
          => 一位数                                     \d
          => 两位数                                     \d{2}
          => 三位数
            -> 1 开头的三位数                            1\d{2}
            -> 2 开头的三位数
              + 20 21 22 23 24 开头的三位数              2[0-4]\d
              + 25 开头的三位数                          25[0-5]
    */

    // 正则
    // const reg = /^(\d|\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/
    // const reg = /^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/
    // const reg = /^(1?\d{1,2}|2[0-4]\d|25[0-5])$/
    // for (let i = 0; i <= 300; i++) {
    //   console.log(i, reg.test(i))
    // }

    // const reg = /^([1-5]?\d{1,2}|6[0-5]\d|66[0-6])$/
    // for (let i = 0; i <= 700; i++) {
    //   console.log(i, reg.test(i))
    // }

密码强度练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    form {
      width: 300px;
      padding: 20px;
      margin: 50px auto;
      border: 10px solid pink;
      border-radius: 10px;
    }

    form p {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
    }

    form > p > span {
      width: 30%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #fff;
      background-color: #ccc;
    }

    form > p > span:nth-child(1).active {
      background-color: red;
    }

    form > p > span:nth-child(2).active {
      background-color: orange;
    }

    form > p > span:nth-child(3).active {
      background-color: green;
    }
  </style>
</head>
<body>

  <form action="">
    <label for="">
      密码 : <input type="text">
    </label>
    <p>
      <span>弱</span>
      <span>中</span>
      <span>强</span>
    </p>
  </form>

  <script>
    /*
      密码强度验证

      问题1: 什么时候触发效果 ?
        => 随着输入随着验证
        => input 表单输入事件
      问题2: 在哪一个标签身上触发效果 ?
        => input 标签

      约定:
        1. 密码只能有 数字 字母 符号(@#!) 组成
        2. 包含任意一种, 就是 弱
        3. 包含任意两种, 就是 中
        4. 三种都包含, 就是 强

      解决:
        + 书写三个正则, 分别去验证用户输入的密码
        + 通过一个, level ++

      函数节流 和 函数防抖
        + 函数节流: 节流阀, 开关
          => 在单位时间内只能触发一次内容
          => 从开始的时候, 就固定了结束时间
        + 函数防抖:
          => 在单位时间内只能触发一次内容
          => 在开始以后, 当第二次开始的时候, 从新开始计时
    */

    // 0. 获取元素
    const inp = document.querySelector('input')
    const spans = document.querySelectorAll('p > span')

    // 0. 准备正则
    const r1 = /\d/
    const r2 = /[a-z]/i
    const r3 = /[@#!]/

    // 准备一个变量接受定时器返回值, 实现函数防抖
    let timer = 0

    // 1. 绑定事件
    inp.oninput = function () {
      // 每当第二次触发的时候, 把第一次的定时器关掉
      clearInterval(timer)
      // 函数防抖
      timer = setTimeout(() => {
        // 1-1. 拿到用户输入的内容
        const pwd = this.value

        // 1-2. 验证确定级别
        let level = 0
        // 进行 level 的确认
        if (r1.test(pwd)) level++
        if (r2.test(pwd)) level++
        if (r3.test(pwd)) level++

        // 1-3. 根据级别给对应的 span 添加类名
        // 把所有的 span 都去掉类名
        // level === 1     [0]
        // level === 2     [0] [1]
        // level === 3     [0] [1] [2]
        for (let i = 0; i < 3; i++) {
          spans[i].classList.remove('active')
          if (i < level) spans[i].classList.add('active')
        }
      }, 300)
    }
  </script>
</body>
</html>

效果图：

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    form {
      width: 500px;
      padding: 20px;
      border: 10px solid pink;
      border-radius: 15px;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
    }

    form > label {
      height: 50px;
      position: relative;
    }

    form > label > span {
      position: absolute;
      left: 20px;
      bottom: 5px;
      color: red;

      display: none;
    }

    form > label > span.active {
      display: block;
    }
  </style>

  <!-- 使用方式1 的 css 内容 -->
  <style>
    /* @font-face {
      font-family: 'iconfont';
      src: url('./font/iconfont.woff2?t=1646808196922') format('woff2'),
          url('./font/iconfont.woff?t=1646808196922') format('woff'),
          url('./font/iconfont.ttf?t=1646808196922') format('truetype');
    } */

    /* 定义一个个人类名 */
    /* 将来你使用字体图标的共用类名 */
    /* .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    } */
  </style>

  <!-- 使用方式2 的 css 内容 -->
  <!-- <link rel="stylesheet" href="./font/iconfont.css"> -->

  <!-- 使用方式3 的 css 内荣 -->
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
</head>
<body>

  <!-- 使用方式1 的 html 结构 -->
  <!-- <span class="iconfont icon">&#xe600</span>
  <span class="iconfont icon">&#xea82;</span> -->


  <!-- 使用方式2 的 html 结构 -->
  <!-- <span class="iconfont icon icon-cuowu2"></span>
  <span class="iconfont icon icon-zhengque1"></span> -->

  <!-- 使用方式3 的 html 结构 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-zanting-tingzhi1"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-goutongye_bofangjian_bofangyangshi"></use>
  </svg>

  <form action="">
    <label for="">
      用户名 : <input class="username" type="text">
      <span>用户名不符合规则, 请重新填写 ^_^</span>
    </label>
    <label for="">
      密 码 : <input class="password" type="text">
      <span>密码不符合规则, 请重新填写 ^_^</span>
    </label>
    <label for="">
      手机号 : <input class="phone" type="text">
      <span>手机号不符合规则, 请重新填写 ^_^</span>
    </label>
    <label for="">
      昵 称 : <input class="nickname" type="text">
      <span>昵称不符合规则, 请重新填写 ^_^</span>
    </label>
    <button>提交</button>
  </form>


  <!-- 使用方式3 的 js 文件 -->
  <script src="./font/iconfont.js"></script>
  <script>
    /*
      表单验证

      分析:
        + 用户名
          => 表单      .username
          => 正则      用户名的正则
          => 错误提示  .username 后一个兄弟元素 span
          => 内容      .username 标签的 value
        + 密码
          => 表单      .password
          => 正则      密码的正则
          => 错误提示  .password 后一个兄弟元素 span
          => 内容      .password 标签的 value
        + 手机号
          => 表单      .phone
          => 正则      手机号的正则
          => 错误提示  .phone 后一个兄弟元素 span
          => 内容      .phone 标签的 value
        + 只要我能给每一个 标签元素 加一个特殊标识, 就可以区分了
          => 利用 对象数据类型 存储正则表达式
          => 因为对象有 key 和 value
            -> 让 key 和 标签的标识一致
            -> 让 value 设置为正则表达式
    */

    // 1. 准备正则
    const regObj = {
      username: /^[0-9a-zA-Z]\w{5,11}$/,
      password: /^\w{6,12}$/,
      phone: /^\d{11}$/,
      nickname: /^[\u4e00-\u9fa5]{3,5}$/
    }


    // 2. 一次性拿到 form 内的所有 input 标签
    const inps = document.querySelectorAll('form input')

    // 3. 循环遍历, 给每一个 inp 绑定事件
    inps.forEach(item => item.oninput = handler)
    function handler() {
      // 3-1. 拿到当前 input 元素
      // const inp = this
      // 3-2. 拿到当前这个文本框内用户输入的内容
      const text = this.value
      // 3-3. 拿到对应的正则表达式
      // 从对象内拿到标识一致的内容
      // 标识  this.className
      const reg = regObj[this.className]
      // 3-4. 拿到当前文本对应的错误 span
      const errBox = this.nextElementSibling

      // 判断
      if (reg.test(text)) errBox.classList.remove('active')
      else errBox.classList.add('active')
    }




  </script>
</body>
</html>

效果图：

歌词滚动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    audio {
      margin: 30px auto 0;
      width: 300px;
      display: block;
    }

    .box {
      width: 300px;
      height: 200px;
      border: 1px solid #333;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }

    .box > ul {
      width: 100%;
      position: absolute;
      left: 0;
      top: 100px;
      transition: all 0.3s linear;
    }

    .box > ul > li {
      height: 20px;
      box-sizing: border-box;
      line-height: 20px;
    }

    .box > ul > li.active {
      background-color: skyblue;
      color: #fff;
    }
  </style>
</head>
<body>

  <!-- 如何在页面播放音频和视频 -->
  <!--
    音频使用 audio 标签  src 表示地址
    视频使用 video 标签  src 表示地址
  -->
  <audio src="./富士山下-陈奕迅.m4a" controls></audio>
  <div class="box">
    <ul>
      <li class="active">1</li>
    </ul>
  </div>


  <script>
    const lrc = `
      [ver:v1.0]
      [ar:陈奕迅]
      [ti:富士山下]
      [00:01.48]富士山下-陈奕迅
      [00:06.06]作词:林夕
      [00:08.09]作曲:christopher chak(泽日生)
      [00:23.45]拦路雨偏似雪花 饮泣的你冻吗
      [00:27.69]这风褛我给你磨到有襟花
      [00:32.28]连掉了渍也不怕 怎么始终牵挂
      [00:36.87]苦心选中今天想车你回家
      [00:41.45]原谅我不再送花 伤口应要结疤
      [00:45.89]花瓣铺满心里坟场才害怕
      [00:50.54]如若你非我不嫁 彼此终必火化
      [00:55.12]一生一世等一天需要代价
      [00:59.66]谁都只得那双手 靠拥抱亦难任你拥有
      [01:04.75]要拥有必先懂失去怎接受
      [01:09.39]曾沿着雪路浪游 为何为好事泪流
      [01:13.98]谁能凭爱意要富士山私有
      [01:18.55]何不把悲哀感觉 假设是来自你虚构
      [01:23.03]试管里找不到它染污眼眸
      [01:27.72]前尘硬化像石头 随缘地抛下便逃走
      [01:35.39]我绝不罕有 往街里绕过一周 我便化乌有
      [01:44.01]情人节不要说穿 只敢抚你发端
      [01:48.45]这种姿态可会令你更心酸
      [01:52.99]留在汽车里取暖 应该怎么规劝
      [01:57.63]怎么可以将手腕忍痛划损
      [02:02.27]人活到几岁算短 失恋只有更短
      [02:06.75]归家需要几里路谁能预算
      [02:11.34]忘掉我跟你恩怨 樱花开了几转
      [02:15.89]东京之旅一早比一世遥远
      [02:20.48]谁都只得那双手 靠拥抱亦难任你拥有
      [02:25.57]要拥有必先懂失去怎接受
      [02:30.21]曾沿着雪路浪游 为何为好事泪流
      [02:34.75]谁能凭爱意要富士山私有
      [02:39.39]何不把悲哀感觉 假设是来自你虚构
      [02:43.98]试管里找不到它染污眼眸
      [02:48.47]前尘硬化像石头 随缘地抛下便逃走
      [02:55.73]我绝不罕有 往街里绕过一周 我便化乌有
      [03:04.70]谁都只得那双手 靠拥抱亦难任你拥有
      [03:09.80]要拥有必先懂失去怎接受
      [03:14.74]曾沿着雪路浪游 为何为好事泪流
      [03:19.43]谁能凭爱意要富士山私有
      [03:24.16]何不把悲哀感觉 假设是来自你虚构
      [03:28.85]试管里找不到它染污眼眸
      [03:33.65]前尘硬化像石头 随缘地抛下便逃走
      [03:42.62]我绝不罕有 往街里绕过一周 我便化乌有
      [03:53.57]你还嫌不够我把这陈年风褛 送赠你解咒
    `
  </script>
  <script>
    /*
      歌词滚动
    */

    // 0. 获取元素
    const ul = document.querySelector('ul')
    const audio = document.querySelector('audio')

    // 1. 根据已知歌词, 把 ul 内的 li 渲染
    // 把 lrc 拆开成为两个内容
    // 时间 和 歌词
    const lrcArr = []
    const timeArr = []

    // 准备一个正则
    const reg = /\[(\d{2}:\d{2})\.\d{2}\](.*)/

    // 1-1. 把 lrc 按照 \n 拆分
    lrc.split('\n').forEach(item => {
      const t = reg.exec(item)

      // 1-2. 把时间放在 timeArr 内, 把 歌词放在 lrcArr 内
      if (!t) return
      timeArr.push(t[1])
      lrcArr.push(t[2])
    })

    // 2. 使用 lrcArr 去渲染 ul 内的 li
    ul.innerHTML = lrcArr.reduce((prev, item, index) => prev + `<li class="${ index === 0 ? 'active' : '' }">${ item }</li>`, '')

    // 3. 随着播放随时改变 ul 的定位位置, 并且切换 li 的类名
    // 3-1. 给 audio 绑定是一个时间改变事件
    // 事件 timeupdate 时间改变事件
    audio.ontimeupdate = function () {
      // 3-2. 获取当前播放到的时间
      // 语法: 音频标签.currentTime
      const current = Math.round(this.currentTime)
      // 3-3. 换算一下 cuurent 是 多少分钟 多少秒钟
      let minutes = parseInt(current / 60)
      let seconds = current % 60
      minutes = minutes < 10 ? '0' + minutes : minutes
      seconds = seconds < 10 ? '0' + seconds : seconds
      const time = `${ minutes }:${ seconds }`

      // 3-4. 找到 timeArr 内有没有和 time 配套的内容
      const index = timeArr.findIndex(item => item === time)
      if (index === -1) return

      // 3-5. 根据 index 来调整 ul 的 top 值
      ul.style.top = 100 - index * 20 + 'px'

      // 3-6. 让对应的 li 有 active
      ;[ ...ul.children ].forEach(item => item.classList.remove('active'))
      ul.children[index].classList.add('active')
    }

    // index === 0    ul top === 100 - 0
    // index === 1    ul top === 100 - 20
    // index === 2    ul top === 100 - 40
    // index === 3    ul top === 100 - 60
  </script>
</body>
</html>