什么是正则表达式？
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
在 JavaScript中，正则表达式也是对象
正则表达式在 JavaScript中的使用场景：
例如验证表单：手机号的格式(匹配) 比如用户名: /^[a-z0-9_-]{3,16}$/
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
正则表达式的语法
let 变量名 = /表达式/
其中 / / 是正则表达式字面量
正则表达式的方法
判断是否有符合规则的字符串：test() 方法
如果正则表达式与指定的字符串匹配 ，返回true，否则false
// 定义正则表达式
let reg = /前端/
let reg2 = /a/
console.log(reg.test('abc')) // 测试字符串abc中是否有符合正则的结果， 结果为false
console.log(reg.test('大家都在学习前端')) // true
搜索匹配字符串：exec() 方法
let str = `大家都在学习前端呢，薪资很高`
let str2 = `大家都在学习php呢，还不错哦`
console.log(reg.exec(str)) // 是个数组
元字符
普通字符: 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
元字符(特殊字符） 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm….. 但是换成元字符写法： [a-z]
为了方便记忆和学习，我们对众多的元字符进行了分类：
1.预定义类：
预定义类还有：. 匹配除换行符之外的任何单个字符，.表示匹配.本身
2.字符类： （比如 \d 表示 0~9）
[ ] 里面加上 - 连字符，使用连字符 - 表示一个范围
[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写26个英文字母都可以
[0-9] 表示 0~9 的数字都可以
[ ] 里面加上 ^ 取反符号
[^a-z] 匹配除了小写字母以外的字符
注意要写到中括号里面
3.边界符：（表示位置，开头和结尾，必须用^什么开头，用什么结尾$）
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
^：表示匹配行首的文本（以谁开始）
$：表示匹配行尾的文本（以谁结束）
两个边界符一起使用表示必须是精确匹配
4.量词： （表示重复次数）
量词用来 设定某个模式出现的次数
*：重复0次或更多次
+：重复一次或更多次
？：重复0次或1次
{n}：重复n次
{n,}：重复n次或更多次
{n,m}：重复n到m次
注意： 逗号左右两侧千万不要出现空格
案例：用户名验证案例
需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位 分析：
①：准备好正则表达式 /^[a-zA-Z0-9-_]{6,16}$/
②：当表单失去焦点来验证
③：如果符合正则规范, 则让后面的span标签添加 right 类.
④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.
// 验证用户名案例
let input = document.querySelector('input')
// wrong 和 right 类名分别表示错误和正确的提示
// 要求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
// 分析
// 1. 给input注册blur事件（失去焦点事件）
// 2. 获取输入框的内容
// 3. 定义正则(要求来制定)
// 4. 通过正则来做测试，看输入的内容是否有通过正则校验
// 5. 校验结果在span上提示 （用类名操作 right类名 wrong类名）
// 1.
input.addEventListener('blur', function () {
// 2.
console.log(input.value)
// 3. 表单的正则表达式一定要记得精确匹配 别落下 ^ $
let reg = /^[a-zA-Z0-9_-]{6,16}$/
// 使用变量存获取到的span
let spanObj = input.nextElementSibling
// 4.
// reg有test方法可以来做测试
// console.log(reg.test(input.value)) // true false
if (reg.test(input.value)) {
// 说明通过
// className 设置的时候会有覆盖问题
spanObj.className = 'right'
} else {
// 没通过
spanObj.className = 'wrong'
}
})
案例：昵称案例
需求：要求用户只能输入中文 分析：
①：准备好这种正则表达式 /^[\u4e00-\u9fa5]{2,8}$/
②：当表单失去焦点就开始验证.
③：如果符合正则规范, 则让后面的span标签添加 right 类.
④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.
// 验证用户名案例
let input = document.querySelector('input')
// 中文范围的正则 [\u4e00-\u9fa5]
// input.addEventListener('blur', function () {
// // 内容
// // input.value
// // 正则
// let reg = /^[\u4e00-\u9fa5]{2,6}$/
// let spanObj = input.nextElementSibling
// if (reg.test(input.value)) {
// // 通过
// spanObj.className = 'right'
// } else {
// // 未通过
// spanObj.className = 'wrong'
// }
// })
// 使用change事件来实现的
// input.addEventListener('change', function () {
// // 内容
// // input.value
// // 正则
// let reg = /^[\u4e00-\u9fa5]{2,6}$/
// let spanObj = input.nextElementSibling
// if (reg.test(input.value)) {
// // 通过
// spanObj.className = 'right'
// } else {
// // 未通过
// spanObj.className = 'wrong'
// }
// })
// 只要失去了焦点就触发
// input.addEventListener('blur', function () {
// console.log('blur 失去了焦点')
// })
// 拓展： change 失去焦点 还有内容改变了才会触发
// input.addEventListener('change', function () {
// console.log('change 事件触发了')
// })
// ============== 使用change事件来实现手机号的校验 ==============
// 制定手机号的要求
// 11位数字 开头是1 第二位有限制 不能是 0 1 2 的数字
input.addEventListener('change', function () {
// 内容
// input.value
// 正则 要求手机号的要求来制定
// let reg = /^1[^012]\d{9}$/ // error 有问题的正则
let reg = /^1[3-9]\d{9}$/
let spanObj = input.nextElementSibling
if (reg.test(input.value)) {
// 通过
spanObj.className = 'right'
} else {
// 未通过
spanObj.className = 'wrong'
}
})
字符替换和修饰符
替换 replace 替换
语法:
字符串.replace（/正则表达式/,‘替换的文本’）
let str = ' abc def abcx yzABCsff '
// 需求：将所有的空格去除掉
console.log(str.replace(/a/g, 'x'))
修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否全局匹配搜索等
语法：
/表达式/修饰符
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
let str = ' abc def abcx yzABCsff '
console.log(str.replace(/a/gi, 'x')) // 所有的a换成x
案例：过滤敏感字
需求：要求用户不能输入敏感字 比如，老师上课很有**
分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，替换成**
③：要全局替换使用修饰符 g
let btn = document.querySelector('button')
let textarea = document.querySelector('textarea')
let div = document.querySelector('div')
btn.addEventListener('click', function () {
// 将文本域的内容设置到div中展示
// div.innerHTML = textarea.value
// 需求：过滤用户输入的内容
// 敏感词： 激情 或 基情字眼替换成 ** 使用replace实现替换
div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
})
```sss