正则表达式
介绍
正则表达式：正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本
使用场景：表单验证 (匹配) ，过滤敏感词 (替换) ，字符串中提取我们想要的部分 (提取)
语法
// 语法 const 校验结果 = 正则表达式对象.test(你想要校验的字符串)
// 正则表达式是对字符串来做校验的，在正则里面所有都是字符串
// 定义变量
const num = 123
// 定义规则 默认情况下，正则只关注是否包含 但是不会去判断 比如输入了123 返回结果也是true
const reg = /123/
// 匹配是否符合
console.log(reg.test(num)); //符合返回 true 不符合返回 false
元字符
边界符：可以限制匹配的内容的位数
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
const str = '未来'
//const reg = /^未来$/ //必须以 未开头 来结束 才为true
//const reg = /^未来/ // 必须以 未开头 后面的内容随意 才为true
const reg = /未来$/ // 必须以 来结束 前面的内容随意 才为true
console.log(reg.test(str));
量词：量词用来设定某个模式出现的次数
| 量词 | 说明 |
|---|---|
| * | 重复零次或多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复最少n次，最多m次 |
字符：也叫占位符，在正则表达式里占据一个位置，后期输入一个符合规则的值
| 字符类 | 说明 |
|---|---|
| . | 代表一个任意的字符 |
| [] | 代表一个指定范围中的某个字符，范围可以是具体的值范围，也可以是一个连续的范围 |
| [-] | 代表在[]里面的描述的时候， - 代表的是连接符 |
| [abc] | 代表可以匹配a，或者b，或者c |
| [A-Z] | 代表可以匹配大写字母A到Z的26个英文字母 |
| [a-z] | 代表可以匹配小写写字母a到z的26个英文字母 |
| [0-9] | 代表可以匹配数字0到9 |
| [a-zA-Z0-9] | 代表可以匹配大小写字母a到z和数字0-9 |
预定义：指的是某些常见模式的简写方式
| 预定类 | 说明 |
|---|---|
| \d | 代表一个区间的数字：0-9 |
| \D | 代表一个非数字的任意1个字符 |
| \w | 代表一个合法字符：0-9，A-Z，a-z，_ |
| \W | 代表一个非法字符 |
| \s | 代表一个空字符：空格，制表位，换行 |
| \S | 代表非空字符类 |
补充
1. .在[]里面描述的，会被当成一个，字符都当成普通字符来看待，相当于转义，如果想要在[]里面代表任意一个字符，加上 \. 即可
2. 正则书写要求：先占位后修饰
3. 正则书写顺序：从左往右
正则案例
需求
案例实现
// 获取dom元素
const button = document.querySelector('button')
const userName = document.querySelector('.userName')
const password = document.querySelector('.password')
// 绑定按钮点击事件
button.addEventListener('click',function () {
// 定义输入框的变量
const userInput = userName.value
const passwordInput = password.value
// 定义输入规则
const reg = /^[a-zA-Z_]{1,}\w{6,12}$/
const reg1 = /^.{6,12}$/
// 判断用户输入是否符合规则
if (reg.test(userInput) === false) {
alert('此用户名不符合规范') // 用户名不符合时弹出
}else if (reg1.test(passwordInput) === false){
alert('此密码不符合规范') // 密码不符合时弹出
}else {
alert('注册成功') // 两者都符合弹出
}
// 点击提交后清空输入框内容
user.value = ''
password.value = ''
})
