1. 正则表达式
正则表达式（Regular Expression）是一种字符串匹配的模式（规则）。在 JavaScript中，正则表达式也是对象
使用场景：
- 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
1.1 正则基本使用
-
定义规则
const reg = /表达式/- 其中
/ /是正则表达式字面量 - 正则表达式也是
对象
- 其中
-
使用正则
test()方法用来查看正则表达式与指定的字符串是否匹配- 如果正则表达式与指定的字符串匹配 ，返回
true，否则false
了解
exec()方法在一个指定字符串中执行一个搜索匹配 如果匹配成功，exec() 方法返回一个数组，否则返回null
例:
const str = '我是一个大好人'
//1.定义正则
const reg = /好人/
//2.使用正则
console.log(reg.test(str)) // true
console.log(reg.test('我是一个大坏人')) // false
1.2 元字符
- 普通字符:
- 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
- 普通字符只能够匹配字符串中与它们相同的字符。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话 /abcdefghijklmnopqrstuvwxyz/
- 元字符(特殊字符)
- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
1.2.1 边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本(以谁开始) |
| $ | 表示匹配行尾的文本(以谁结束) |
如果 ^ 和 $ 在一起，表示必须是精确匹配
//1.普通字符
console.log(/好人/.test('好人')) //true
console.log(/好人/.test('好好人')) //true
console.log(/好人/.test('我是好好人')) //true
//2.边界符 ^开始 $结束
console.log(/^好人/.test('好人')) //true
console.log(/^好人/.test('好好人')) //false
console.log(/^好人/.test('我是好好人')) //false
console.log(/^好人$/.test('好人')) //true
console.log(/^好人$/.test('好好人')) //false
console.log(/^好人$/.test('我是好好人')) //false
1.2.2 量词
量词用来设定某个模式重复次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次(>=0) |
| + | 重复一次或更多次(>=1) |
| ? | 重复零次或一次(0或1) |
| {n} | 重复n次(=n) |
| {n,} | 重复n次或更多次(>=n) |
| {n,m} | 重复n到m次(>=n && <=m) |
注意： 逗号左右两侧千万不要出现空格
//量词
//1. * 重复零次或更多次(>=0)
console.log(/^好*$/.test('')) //true
console.log(/^好*$/.test('好')) //true
console.log(/^好*$/.test('好好')) //true
console.log(/^好*$/.test('好好好')) //true
//2. + 重复一次或更多次(>=1)
console.log(/^好+$/.test('')) //false
console.log(/^好+$/.test('好')) //true
console.log(/^好+$/.test('好好')) //true
console.log(/^好+$/.test('好好好')) //true
//3. ? 重复零次或一次(0或1)
console.log(/^好?$/.test('')) //true
console.log(/^好?$/.test('好')) //true
console.log(/^好?$/.test('好好')) //false
console.log(/^好?$/.test('好好好')) //false
//4. {n} 重复n次(=n)
console.log(/^好{3}$/.test('')) //false
console.log(/^好{3}$/.test('好')) //false
console.log(/^好{3}$/.test('好好')) //false
console.log(/^好{3}$/.test('好好好')) //true
console.log(/^好{3}$/.test('好好好好')) //false
//5. {n,} 重复n次或更多次(>=n)
console.log(/^好{3,}$/.test('')) //false
console.log(/^好{3,}$/.test('好')) //false
console.log(/^好{3,}$/.test('好好')) //false
console.log(/^好{3,}$/.test('好好好')) //true
console.log(/^好{3,}$/.test('好好好好')) //true
console.log(/^好{3,}$/.test('好好好好好')) //true
//6. {n,m} 重复n到多次(>=n && <=m)
console.log(/^好{2,4}$/.test('')) //false
console.log(/^好{2,4}$/.test('好')) //false
console.log(/^好{2,4}$/.test('好好')) //true
console.log(/^好{2,4}$/.test('好好好')) //true
console.log(/^好{2,4}$/.test('好好好好')) //true
console.log(/^好{2,4}$/.test('好好好好好')) //false
1.2.3 字符类——范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
| 表达 | 说明 |
|---|---|
| [abc] | 匹配包含的单个字符(a或b或c有一个就返回true) |
| [a-z] | 连字符,指定字符的范围([a-z]表示 a到z 26个字母,只要有一个就返回true) |
| [^a-z] | 取反符,[^a-z]表示匹配除了小写字母a-z以外的字符 |
| . | 匹配除换行符之外的任何单个字符 |
// 元字符 范围 []
// 1. [abc] 匹配包含的单个字符 如果加上精确匹配则代表abc中只选一个
const reg1 = /^[abc]$/
console.log(reg1.test('a')) // true
console.log(reg1.test('b')) // true
console.log(reg1.test('c')) // true
console.log(reg1.test('d')) // false
console.log(reg1.test('ab')) // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('a')) // true
console.log(reg2.test('p')) // true
console.log(reg2.test('0')) // false
console.log(reg2.test('A')) // false
// 想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B')) // true
console.log(reg3.test('b')) // true
console.log(reg3.test(9)) // true
console.log(reg3.test(',')) // flase
// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1')) // false
console.log(reg4.test('abcd12')) // true
console.log(reg4.test('ABcd12')) // true
console.log(reg4.test('ABcd12_')) // true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true
1.2.4 字符类——预定义
某些常见模式的简写方式，区分字母和数字
| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字,相当于[0-9] |
| \D | 匹配0-9以外的字符,相当于[^0-9] |
| \w | 匹配任一的字母数字、字母和下划线，相当于[A-Za-z0-9] |
| \W | 移除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9] |
| \s | 匹配空格(包括换行符、制表符、空格符等) |
| \S | 匹配非空格的字符 |
日期格式：^\d{4}-\d{1,2}-\d{1,2}$
2. 替换和修饰符
替换：replace()方法
字符串.replace(/正则表达式/,'替换的文本')
修饰符：
/正则表达式/修饰符
例：
// 1. i(ignore) 修饰符，正则匹配时字母不区分大小写
console.log(/^hello$/i.test('hello')) //true
console.log(/^hello$/i.test('HELLO')) //true
console.log(/^hello$/i.test('Hello')) //true
// 2. g(global) 修饰符，匹配所有满足正则表达式的结果
const str = 'hello,world的意思是：你好，世界，写成大写是：HELLO,WORLD'
const newStr = str.replace(/hello,world/ig,'你好，世界')
console.log(newStr) //你好，世界的意思是：你好，世界，写成大写是：你好，世界
3. change 事件
给input注册 change 事件，值被修改并且失去焦点后触发
4. 判断是否有类
元素.classList.contains('类名')
判断是否包含某个类，如果有则返回true，没有则返回false
