【JavaScript】正则表达式综合案例
目录
1、正则表达式
1.1 什么是正则表达式
1.2 语法
test() 方法 用来查看正则表达式与指定的字符串是否匹配
exec() 方法 在一个指定字符串中执行一个搜索匹配
1.3 元字符
1. 边界符
2. 量词
3. 字符类：
案例 用户名验证案例
1.4 修饰符
案例 过滤敏感字
综合案例 小兔鲜页面注册
步骤：
JavaScript：
小兔鲜登录页面
小兔鲜首页页面
总结一下~本章对我的收获很大，希望对你也是！！！！
本章节所有素材自取：刘一豪hhh/JavaScript学习之路 - Gitee.com
1、正则表达式
1.1 什么是正则表达式
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式
正则表达式在 JavaScript中的使用场景：
Ø 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文( 匹配 )Ø 比如用户名: /^[a-z0-9_-]{3,16}$/Ø 过滤掉页面内容中的一些敏感词( 替换 )，或从字符串中获取我们想要的特定部分( 提取 )等 。
1.2 语法
我们想要查找是否有戴眼镜的人, 怎么做呢？
1.
定义规则： 戴眼镜的
2.
根据规则去查找：找到则返回
正则同样道理，我们分为两步：
1.
定义规则
2.
查找
比如：查找下面文本中是否包含字符串 '前端'
let str = '前端开发培训，web前端培训，软件测试培训，产品经理培训'
1. 定义正则表达式语法：
2.判断是否有符合规则的字符串：
test() 方法 用来查看正则表达式与指定的字符串是否匹配
3.检索（查找）符合规则的字符串：
exec() 方法 在一个指定字符串中执行一个搜索匹配
1.3 元字符
普通字符:
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
Ø 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..Ø 但是换成元字符写法： [a-z]
参考文档：
Ø MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_ExpressionsØ 正则测试工具: http://tool.oschina.net/regex
为了方便记忆和学习，我们对众多的元字符进行了分类：
Ø 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）Ø 量词 （表示重复次数）Ø 字符类 （比如 \d 表示 0~9）
1. 边界符
正则表达式中的边界符（位置符）用来
提示字符所处的位置
，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配
正则表达式中的边界符（位置符）用来 提示字符所处的位置 ，主要有两个字符
2. 量词
量词用来 设定某个模式出现的次数
<script>
// 元字符
console.log(/哈/.test('哈')) //true
console.log(/哈/.test('哈哈')) //true
console.log(/哈/.test('二哈')) //true
// 1. 边界符
console.log(/^哈/.test('哈')) //true
console.log(/^哈/.test('哈哈')) //true
console.log(/^哈/.test('二哈')) //false
console.log(/^哈$/.test('哈')) //true
console.log(/^哈$/.test('哈哈')) //false ^ & 精确匹配 必须要一模一样
console.log(/^哈$/.test('二哈')) //false ^ & 精确匹配 必须要一模一样
console.log('---------------------------------')
// 量词 * 类似 >= 0次
console.log(/^哈$/.test('哈')) //true
console.log(/^哈*$/.test('')) //true
console.log(/^哈*$/.test('哈')) //true
console.log(/^哈*$/.test('哈哈哈')) //true
console.log(/^哈*$/.test('二哈很傻')) //false
console.log(/^哈*$/.test('哈很傻')) //false
console.log(/^哈*$/.test('哈很傻')) //false
console.log('---------------------------------')
// 量词 + 类似 >= 1次
console.log(/^哈$/.test('哈')) //true
console.log(/^哈+$/.test('')) //false
console.log(/^哈+$/.test('哈')) //true
console.log(/^哈+$/.test('哈哈哈')) //true
console.log(/^哈+$/.test('二哈很傻')) //false
console.log(/^哈+$/.test('哈很傻')) //false
console.log(/^哈+$/.test('哈很傻')) //false
console.log('---------------------------------')
// 量词 ? 类似 0 || 1次
console.log(/^哈$/.test('哈')) //true
console.log(/^哈?$/.test('')) //true
console.log(/^哈?$/.test('哈')) //true
console.log(/^哈?$/.test('哈哈哈')) //false
console.log(/^哈?$/.test('二哈很傻')) //false
console.log(/^哈?$/.test('哈很傻')) //false
console.log(/^哈?$/.test('哈很傻')) //false
console.log('---------------------------------')
// 量词{n} 写几 就必须出现几次
console.log(/^哈{4}$/.test('哈哈哈哈')) //true
console.log(/^哈{4}$/.test('哈哈哈')) //false
console.log('---------------------------------')
// 量词{n,} 必须要>= n
console.log(/^哈{4,}$/.test('哈哈哈')) //false
console.log(/^哈{4,}$/.test('哈哈哈哈')) //true
console.log(/^哈{4,}$/.test('哈哈哈哈哈哈')) //true
console.log('---------------------------------')
// 量词{n,m} 逗号两侧千万不能有空格 >= n && <= m
console.log(/^哈{4,6}$/.test('哈哈哈')) //false
console.log(/^哈{4,6}$/.test('哈哈哈哈')) //true
console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈')) //true
console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈')) //false
console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈哈')) //false
console.log('---------------------------------')
</script>3. 字符类：
(1)
[ ] 匹配字符集合
后面的字符串只要包含 abc 中任意
一个字符
，都返回 true 。
比如：
Ø [a-z] 表示 a 到 z 26个英文字母都可以Ø [a-zA-Z] 表示大小写都可以Ø [0-9] 表示 0~9 的数字都可以
//字符类 [abc] 只选一个
console.log(/^[abc]$/.test('a')) //true
console.log(/^[abc]$/.test('b')) //true
console.log(/^[abc]$/.test('c')) //true
console.log(/^[abc]$/.test('ab')) //false
console.log(/^[abc]{2}$/.test('ab')) //true 量词
console.log('---------------------------------')
// 字符类 [a-z] 只选一个
console.log(/^[A-Z]$/.test('p')) //false
console.log(/^[A-Z]$/.test('P')) //true
console.log(/^[0-9]$/.test('2')) //true
console.log(/^[0-9A-Z0-9]$/.test('2')) //true
console.log(/^[0-9A-Z0-9]$/.test('P')) //true
(1)
[ ] 里面加上 ^ 取反符号
比如：
Ø [^a-z] 匹配除了小写字母以外的字符Ø 注意要写到中括号里面
（2） . 匹配除换行符之外的任何单个字符
总结：
1. 字符类 . (点)代表什么意思？
Ø 匹配除换行符之外的任何单个字符
2. 字符类 [] 有若干代表什么意思？
Ø [abc] 匹配abc其中的任何单个字符Ø [a-z] 匹配26个小写英文字母其中的任何单个字符Ø [^a-z] 匹配除了26个小写英文字母之外的其他任何单个字符
案例 用户名验证案例
需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
分析：
①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
②：当表单失去焦点就开始验证.
③：如果符合正则规范, 则让后面的span标签添加 right 类.
④：如果不符合正则规范, 则让后面的span标签添加 wrong 类
const reg = /^[a-z0-9A-Z-_]{4,16}$/
const input = document.querySelector('input')
const span = input.nextElementSibling
// console.log(span)
input.addEventListener('blur', function () {
if (reg.test(this.value)) {
span.innerHTML = '输入正确'
span.className = 'right'
}
else {
span.innerHTML = '输入错误，请输入4-16位数字或字符'
span.className = 'error'
}
})
(3) 预定义：指的是
某些常见模式的简写方式。
1.4 修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
替换 replace 替换：
Ø
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
Ø
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
案例 过滤敏感字
需求：要求用户不能输入敏感字
比如，pink老师上课很有**
分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，进行**
③：要全局替换使用修饰符 g
综合案例 小兔鲜页面注册
素材自取
分析业务模块：
①： 发送验证码模块
②： 各个表单验证模块
③： 勾选已经阅读同意模块
④： 下一步验证全部模块
只要上面有一个input验证不通过就不同意提交
步骤：
需求①： 发送验证码
用户点击之后，显示 05秒后重新获取时间到了，自动改为 重新获取
需求②： 用户名验证（注意封装函数
verifyxxx
） , 失去焦点触发这个函数
正则 /^[a-zA-Z0-9-_]{6,10}$/如果不符合要求，则出现提示信息 并 return false 中断程序否则 则返回return true之所以返回 布尔值，是为了 最后的提交按钮做准备侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发（类似京东效果）
需求③： 手机号验证
正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/其余同上
需求④： 验证码验证
正则 /^\d{6}$/其余同上
需求⑤： 密码验证
正则 /^[a-zA-Z0-9-_]{6,20}$/其余同上
需求⑥： 再次密码验证
如果本次密码不等于上面输入的密码则返回错误信息其余同上
需求⑦： 我同意模块
添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类
需求⑧： 表单提交模块
使用 submit 提交事件如果没有勾选同意协议，则提示 需要勾选classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false如果上面input表单 只要有模块，返回的是 false 则 阻止提交
JavaScript：
<script>
const code = document.querySelector('.code')
let flag = true
code.addEventListener('click', function () {
if (flag) {
flag = false
let i = 5
code.innerHTML = `0${i}秒后重试`
let timerId = setInterval(function () {
i--
code.innerHTML = `0${i}秒后重试`
if (i === 0) {
clearInterval(timerId)
code.innerHTML = '重新获取'
flag = true
}
}, 1000)
}
})
// 验证用户名
const username = document.querySelector('[name=username]')
// 使用change事件 值发生变化的时候
username.addEventListener('change', usernameInfo)
function usernameInfo() {
const span = username.nextElementSibling
const reg = /^[0-9a-zA-Z]{6,10}$/
console.log(username.value)
if (!reg.test(username.value)) {
span.innerHTML = '输入不符合规范,请输入6~10位'
return false
}
span.innerHTML = ''
return true
}
// console.log(usernameInfo())
// 验证手机号
// 获取手机表单
const phone = document.querySelector('[name=phone]')
// 使用change事件 值发生变化的时候
phone.addEventListener('change', phoneInfo)
function phoneInfo() {
const span = phone.nextElementSibling
const reg = /^[0-9]{11}$/
// console.log(this.value)
if (!reg.test(phone.value)) {
span.innerHTML = '输入不符合规范,请输入11位'
return false
}
span.innerHTML = ''
return true
}
// 获取验证码
const codeInput = document.querySelector('[name=code]')
// 使用change事件 值发生变化的时候
codeInput.addEventListener('change', codeInputInfo)
function codeInputInfo() {
const span = codeInput.nextElementSibling
const reg = /^[0-9]{6}$/
// console.log(this.value)
if (!reg.test(codeInput.value)) {
span.innerHTML = '输入不符合规范,请输入6位'
return false
}
span.innerHTML = ''
return true
}
// 设置密码
const password = document.querySelector('[name=password]')
// 使用change事件 值发生变化的时候
password.addEventListener('change', passwordInfo)
function passwordInfo() {
const span = password.nextElementSibling
const reg = /^[0-9a-zA-Z]{6,20}$/
// console.log(this.value)
if (!reg.test(password.value)) {
span.innerHTML = '输入不符合规范,请输入6~20位'
return false
}
span.innerHTML = ''
return true
}
// 密码的再次验证
const confirm = document.querySelector('[name=confirm]')
// 使用change事件 值发生变化的时候
confirm.addEventListener('change', confirmInfo)
function confirmInfo() {
const span = confirm.nextElementSibling
// console.log(this.value)
if (confirm.value !== password.value) {
span.innerHTML = '输入不符合规范'
return false
}
span.innerHTML = ''
return true
}
// 同意
const queren = document.querySelector('.icon-queren')
queren.addEventListener('click', function () {
this.classList.toggle('icon-queren2')
})
// console.log(usernameInfo())
// console.log(phoneInfo())
// console.log(codeInputInfo())
// console.log(passwordInfo())
// console.log(confirmInfo())
// 提交模块
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
if (!queren.classList.contains('icon-queren2')) {
alert('请勾选同意协议')
e.preventDefault()
} else if (!usernameInfo() || !phoneInfo() || !codeInputInfo() || !passwordInfo() || !confirmInfo()) {
alert('表格没有完成或输入有误')
e.preventDefault()
}
})
</script>小兔鲜登录页面
需求： ①： tab切换
需求②： 点击登录可以跳转页面
Ø 先阻止默认行为Ø 如果没有勾选同意，则提示要勾选Ø required 属性不能为空Ø 假设登录成功
把用户名记录到本地存储中
同时跳转到首页 location.href
required 非空字段，input表单提交更加方便，有空就不允许提交
checked 通常用于复选框 (<input type="checkbox">) 或单选按钮 (<input type="radio">) 来检查它们是否被选中。
JavaScript：
const nav = document.querySelector('.tab-nav')
const pane = document.querySelectorAll('.tab-pane')
nav.addEventListener('click', function (e) {
// console.log(e.target.tagName)
if (e.target.tagName === 'A') {
nav.querySelector('.active').classList.remove('active')
e.target.classList.add('active')
for (let i = 0; i < pane.length; i++) {
pane[i].style.display = 'none'
}
pane[e.target.dataset.id].style.display = 'block'
}
})
// 点击提交模块
const username = document.querySelector('[name=username]')
const password = document.querySelector('[name=password]')
const agree = document.querySelector('[name=agree]')
const info = document.querySelector('.info')
info.addEventListener('submit', function (e) {
e.preventDefault()
// console.log(agree.checked)
if (!agree.checked) return alert('请勾选同意协议')
//用户名存入本地
localStorage.setItem('xtx-uname', username.value)
//跳转到首页
location.href = './index.html'
}) 小兔鲜首页页面
步骤：
④： 点击 退出登录
删除本地存储对应的用户名数据
重新调用渲染函数即可
需求：
如果是移动端打开，则跳转到移动端页面
如果本地存储有数据，则 显示 你好 xxxx
否则 显示 请跳转到注册页面
//获取第一个li
const li1 = document.querySelector('.xtx_navs li:nth-child(1)')
// console.log(li1)
const li2 = li1.nextElementSibling
// console.log(li2)
// 构造一个渲染函数
function render() {
//获取本地存储的用户名
const uname = localStorage.getItem('xtx-uname')
// console.log(uname)
if (uname) {
li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user"> ${uname}</i></a>`
li2.innerHTML = '<a href="javascript:;">退出登录</a>'
}
else {
li1.innerHTML = '<a href="./login.html">请先登录</a>'
li2.innerHTML = '<a href="./register.html">免费注册</a>'
}
}
render()
// 点击退出登录模块
li2.addEventListener('click', function () {
//删除本地存储数据
localStorage.removeItem('xtx-uname')
//重新渲染
render()
})