正则表达式
介绍
正则表达式是用于匹配字符串中字符组合的模式，在JS中，正则表达式也是对象
通常用来查找，替换那些符合正则表达式的文本
就是筛选出符合条件的一类人
比如说
有人喜欢玩艾斯爱慕，那他喜欢的就是这一类人，而不是某个人
正则表达式在JS中的使用场景
验证表单：用户表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文匹配
可以过滤到页面中的一些敏感词（替换），或者从字符串中获取我们想要的特定部分
语法
我们想要根据规则去查找，如果找到就返回
正则同样的规则：
定义规则、查找
javascript
复制代码
let str = 'S,M,艾斯爱慕'
JS中定义正则表达式的语法有两种，我们先学习其中比较简单的方法
javascript
复制代码
count 变量名 = /表达式/
//是正则表达式字面量
我们这样判断是否有符合规则的字符串
test()方法可以查看正则表达式与指定的字符串是否匹配
javascript
复制代码
regObj.test(被检测的字符串)
这是使用实例：
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const str = 'SM,S,M,艾斯爱慕'
const reg = /M/
console.log(reg.test(str)) //true
</script>
</body>
</html>
还有一个方法：exec()方法在一个指定字符串中执行一个搜索匹配
语法：
javascript
复制代码
regObj.exec(被检测字符串)
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const str = 'SM,S,M,艾斯爱慕'
const reg = /M/
console.log(reg.exec(str)) //true
</script>
</body>
</html>
如果匹配成功，exec()方法返回一个数组，否则返回null
元字符
什么是元字符？
使用元字符有什么好处？
大多数的字符仅能够描述它们本身，这些字符称作普通字符，比如所有的字母和数字
普通字符只能够匹配字符串中与他们相同的字符
元字符是一些有特殊含义的字符，提高了灵活性和强大的匹配功能
比如：规定用户只能输入英文26个字母
元字符写法：[a-z]
参考文档：
html
复制代码
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
正则测试工具：
在线正则表达式测试OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线 CSS、JS 调试，在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器，MarkDown编译器等其他在线工具
http://tool.oschina.net/regex
为了方便记忆和学习，元字符有这样的分类：
来看看边界符：是正则表达式中用来提示字符所处的位置，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配（孩子们这不是makefile吗）
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
这就是边界符，来看看量词：
量词是表示重复次数
用来设定某个模式出现的次数
逗号左右两侧千万不要出现空格
简洁记法：
字符类
\]匹配字符集合
后面的字符串只要包含abc中任意一个字符都返回true
\[ \] 里面加上 - 连字符，使用连字符 - 表示一个范围
比如：
综合示例：
来看看字符类的：
\[ \] 里面加上 \^ 取反符号
比如：
\[\^a-z\] 匹配除了小写字母以外的字符
注意要写到中括号里面
. 表示匹配除换行符之外的任何单个字符
###### 用户名验证案例
需求：
nextElementSibling是获取下一个兄弟元素（边学边忘）
```html
Document
```
###### 昵称案例
我们需要要求用户只能输入中文：
```html
Document
```
预定义：指的是某些常见模式的简写方法
就像是，记得的时候用不上，用上的时候已经忘
##### 修饰符
修饰符约束正则执行的某些细节行为，比如是否区分大小写，是否支持多行匹配等
语法：
```html
/表达式/修饰符
```
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
替换replace：
```javascript
字符串.replace(/正则表达式/,'替换的文本')
```
过滤敏感字（不是，前端都在干些什么得罪人的活，广告跳转，多少秒之后才关闭，屏蔽敏感字。。。步道乐跑我恨你）
```html
Document
```
#### 综合案例
来仿写一个小兔仙儿的页面注册
让我们来分析一下业务模块：
###### 短信验证码
需求一：
我们需要注意的是在点击的时候如果时间未到，那应该先禁用一下点击按钮的，，
我们可以通过一个变量进行控制
```javascript
```
###### 验证用户名模块
需求：
```javascript
//验证的是用户名
// 获取用户表单
const username = document.querySelector('[name=username]')
// 使用change事件， 值发生变化的时候
username.addEventListener('change',verifyName)
// 封装函数
function verifyName(){
const span = username.nextElementSibling
// 定规则
const reg = /^[a-zA-Z0-9-_]{6,10}$/
if(!reg.test(username.value))
{
span.innerHTML='输入不合法，请输入6~10位'
return false
}
// 合法的，就清空span
span.innerHTML = ' '
return true
}
```
###### 验证手机号和密码框
让我们来看看这个捏
```javascript
//验证码验证
// 获取手机表单
const codeInput = document.querySelector('[name=code]')
// 使用change事件， 值发生变化的时候
codeInput.addEventListener('change',verifycodeInput)
// 封装函数
function verifycodeInput(){
const span = codeInput.nextElementSibling
// 定规则
const reg = /^\d{6}$/
if(!reg.test(codeInput.value))
{
span.innerHTML='输入不合法，请输入6位数字'
return false
}
// 合法的，就清空span
span.innerHTML = ' '
return true
}
// 密码验证
// 获取手机表单
const password= document.querySelector('[name=password]')
// 使用change事件， 值发生变化的时候
password.addEventListener('change',verifypassword)
// 封装函数
function verifypassword(){
const span = password.nextElementSibling
// 定规则
const reg = /^[a-zA-Z0-9-_]{6,20}$/
if(!reg.test(password.value))
{
span.innerHTML='输入不合法，请输入6~20位数字，字母，符号组成的密码'
return false
}
// 合法的，就清空span
span.innerHTML = ' '
return true
}
// 密码再次验证
// 获取手机表单
const confirm= document.querySelector('[name=confirm]')
// 使用change事件， 值发生变化的时候
confirm.addEventListener('change',verifyPwd)
// 封装函数
function verifyPwd(){
const span = confirm.nextElementSibling
if(confirm.value !== password.value)
{
span.innerHTML='输入不一致'
return false
}
// 合法的，就清空span
span.innerHTML = ' '
return true
}
```
###### 我同意和提交模块
接下来做我同意模块，又想到了。。。流氓软件
```javascript
//我同意模块
const agree = document.querySelector('.icon-queren')
agree.addEventListener('click',function(){
//切换类 原有的就删掉，没有就添加
this.classList.toggle('icon-queren2')
})
```
```javascript
//提交模块
const form = document.querySelector('form')
form.addEventListener('submit',function(e){
//判断是否勾选我同意模块，如果有就证明勾选了，没有就是没有
if(!agree.classList.contains('icon-queren2')){
return alert('请勾选同意协议')
// 阻止提交
e.preventDefault()
}
// 依次判断上面的每个框框，是否通过，只有一个没通过的就阻止
if(!verifyName()) e.preventDefault()
if(!verifyPhone()) e.preventDefault()
if(!verifyPwd()) e.preventDefault()
if(!verifycodeInput()) e.preventDefault()
if(!verifypassword()) e.preventDefault()
})
```
全部代码：
```html
小兔鲜儿 - 新鲜 惠民 快捷!
```
#### 阶段案例
##### 登录页面
我们还要实现的是登录页面，先来实现tab栏切换
```javascript
// tab栏切换,事件委托
const tab_nav = document.querySelector('.tab-nav')
const pane = document.querySelectorAll('.tab-pane')
// 事件监听
tab_nav.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// 取消上一个
// 当前元素添加active
tab_nav.querySelector('.active').classList.remove('active')
e.target.classList.add('active')
// 显示和隐藏类
// 先干掉所有人，使用for循环
for (let i = 0; i < pane.length; i++) {
pane[i].style.display = 'none'
}
//让对应序号的大pane显示
pane[e.target.dataset.id].style.display = 'block'
}
})
```
然后来做点击登录可以跳转页面
```javascript
// 点击提交模块
const form = document.querySelector('form')
const agree = document.querySelector('[name=agree]')
const username = document.querySelector('[name=username]')
form.addEventListener('submit',function(e){
e.preventDefault()
if(!agree.checked)
{
return alert('请勾选同意协议')
}
// 记录用户名到本地存储(没有后台数据)
localStorage.setItem('xtx-uname',username.value)
//跳转到首页
location.href = './index.html'
})
```
全部代码：
```html
小兔鲜儿 - 新鲜 惠民 快捷!
```
##### 首页页面
需求：
从登录页面跳转过来之后，自动显示用户名
如果点击退出，则不显示用户名
一些东西：
```javascript
```
所有代码：
```html
小兔鲜儿 - 新鲜 惠民 快捷!
-
生鲜馆
全场3件8折
-
-
-
-
-
-
-
-
-
服饰馆
3折狂欢
-
-
-
-
-
-
-
-
-
餐厨馆
大额优惠
等你来拿
-
-
-
-
-
-
-
-
-
居家馆
全场满减
-
-
-
-
-
-
-
-
-
1220
1800
1220
-
1220
1800
1220
-
1220
1800
1220
```
