正则表达式
介绍
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
作用
表单验证（匹配）
过滤敏感词（替换）
字符串中提取我们想要的部分（提取）
语法
1.定义规则
let str = 'abcde'
// let 变量名 = / 表达式 /
// / / 是正则表达式字面量
// 下面这个正则表达式用于 验证 字符串是是否包含 c
let reg = /c/
注：默认情况下，正则只关注是否包含，不是严格意义的完整匹配
2.查找/校验
test方法
// let 校验结果 = 正则表达式对象.test（你想进行校验的源字符串）
let res = reg.test(str)
调用test方法进行正则的匹配校验，返回校验结果，结果为bool值，如果校验成功则返回true，否则返回false
元字符
边界符
^：开始
$：结束
组合在一起，可以限制匹配的内容的位数
使用场景：后期有严格的位数匹配的需要，就需要添加边界符，如手机号，身份证号，区号，邮编等
字符类(占位符)
let str = prompt('请输入字符')
// 1. . : 代表一个任意的字符
let reg = /^.$/
// 2. \d : 代表一个数字：0-9
let reg = /^\d$/
// 3. \D: 代表一个非数字
let reg = /^\D$/
// 4. \w: 代表一个合法字符： 0-9 A-Z a-z _
let reg = /^\w$/
// 5. \W: 代表一个非法字符
let reg = /^\W$/
// 6. \s: 代表一个空字符：空格 制表位 换行
let reg = /^\s$/
// 7. \S: 代表一个非空字符
let reg = /^\S$/
// 8. []:代表一个指定的范围中的某个字符，范围可以是具体的值范围，也可以是一个连续的范围
// 在描述连续范围的时候，-是一个连接符
// []里面的字符都当成普通字符来看待，相当于转义了
// let reg = /^[0.]$/
let reg = /^[0-9A-Za-z_]$/
let result = reg.test(str)
console.log(result);
量符(修饰符)
let str = prompt('请输入字符')
// 1. *:修饰前面的字符出现任意次
let reg = /^\d*$/
// 2. ？:修饰前面的字符出现0次或1次
let reg = /^\d?$/
// 3. +:修饰前面的字符出现1次或多次
let reg = /^\d+$/
// 4. {n}:修饰前面的字符出现n次
let reg = /^\d{11}$/
// 5. {n,m}:修饰前面的字符最少出现n次，最多出现m次
let reg = /^\d{2,4}$/
// 6. {n,}:修饰前面的字符最少出现n次，最多没有限制
let reg = /^\w{3,}$/
let result = reg.test(str)
console.log(result);
注：修饰符不能单独存在，必须修改前面的占位符
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
用户名：<input class="username" type="text" placeholder="请输入至少三位合法字符" />
<span></span>
<br />
密码：
<input class="password" type="text" placeholder="请输入3-16位密码" /> <span></span><br />
手机号：
<input class="phone" type="text" placeholder="请输入合法的手机号" /><span></span> <br />
邮箱：
<input class="email" type="text" placeholder="请输入一个合法的邮箱地址" /><span></span>
<br />
<button>提交</button>
<script>
let btn = document.querySelector('button')
let username = document.querySelector('.username')
let password = document.querySelector('.password')
let phone = document.querySelector('.phone')
let email = document.querySelector('.email')
btn.addEventListener('click', function () {
// 用户名：三位合法字符
let regname = /^\w{3,}$/
// 正则表达式对象.test(获取得到的值)
if (!regname.test(username.value)) {
// span = 用户名的下一个兄弟元素
let span = username.nextElementSibling
// 给span输入内容
span.innerHTML = '用户名输入不合法'
// 为文本框聚焦
username.focus()
// 跳出
return
} else {
// span = 用户名的下一个兄弟元素
let span = username.nextElementSibling
// span 什么都不显示
span.innerHTML = ''
}
// 密码：任意字符3-16位
let regword = /^.{3,16}$/
// 正则表达式对象.test(获取得到的值)
if (!regword.test(password.value)) {
// span = 密码框的下一个兄弟元素
let span = password.nextElementSibling
// 给span输入内容
span.innerHTML = '请输入3-16位密码'
// 为文本框聚焦
password.focus()
// 跳出
return
} else {
// span = 用户名的下一个兄弟元素
let span = password.nextElementSibling
// span 什么都不显示
span.innerHTML = ''
}
// 手机号：第一位是1 第二位是35789中任意一位 还有其它任意九位数字
let regphone = /^1[35789]\d{9}$/
if (!regphone.test(phone.value)) {
// span = 用户名的下一个兄弟元素
let span = phone.nextElementSibling
// 给span输入内容
span.innerHTML = '手机号输入不合法'
// 为文本框聚焦
phone.focus()
// 跳出
return
} else {
// span = 用户名的下一个兄弟元素
let span = phone.nextElementSibling
// span 什么都不显示
span.innerHTML = ''
}
// 邮箱：合法字符至少一位 @符号 合法字符至少两位 .符号 合法字符至少两位 最多四位
let regemail = /^\w+[@]\w{2,}[.]\w{2,4}$/
if (!regemail.test(email.value)) {
// span = 用户名的下一个兄弟元素
let span = email.nextElementSibling
// 给span输入内容
span.innerHTML = '邮箱输入不合法'
// 为文本框聚焦
email.focus()
// 跳出
return
} else {
// span = 用户名的下一个兄弟元素
let span = email.nextElementSibling
// span 什么都不显示
span.innerHTML = ''
}
})
</script>
</body>
</html>
