一.正则表达式
1.1正则表达式是什么
正则表达式是用于匹配字符串中字符组合的模式，js中正则表达式也是对象；通常用来查找，替换符合正则表达式的文本。
使用场景：
1.2正则表达式怎么用
语法：1.定义规则 2.查找
（1）.定义正则表达式：const 变量名=/ 表达式/
（2）查找测试：regObj.test(被检测的字符串) ，用来查看正则表达式与指定的字符串是否匹配，判断是否有符合规则的字符串；若正则表达式与指定字符串匹配，则返回true，否则返回false
<script>
const str = '前端offer滚滚来，找到前端好工作！'
// 1.定义规则：
const reg = /前端/
// 2.判断测试
console.log(reg.test(str));
</script>（3）查找符合规则的字符串：exec（），在一个指定字符串中执行搜索匹配
和test（）方法不同，该方法匹配成功返回数组，否则返回null
console.log(reg.exec(str));1.3元字符
元字符是具有特殊含义的字符，提高灵活性和强大匹配功能。如[a-z]
1.3.1边界符
表示位置，必须用什么开头，用什么结尾。用来提示字符所处位置
// 必须以啦开头
console.log(/^啦/.test('啦拉拉'));//true
// 必须以哈咯结尾
console.log(/哈咯$/.test('啦啦啦哈咯'));//true
// 精确字符,只能有一个字喜
console.log(/^喜$/.test('喜喜'));//false
console.log(/^啦$/.test('啦'));//true1.3.2量词
表示重复次数，设定某个模式出现的次数
*，+，？：
console.log(/^哈$/.test('哈'));//true
// * 量词,检测字符串内可以出现0次或者多次 哈
console.log(/^哈*$/.test('哈哈哈'));//true
console.log(/^哈*$/.test(''));//true,空字符为0次
// 只能有哈,精确匹配不能出现其他字
console.log(/^哈*$/.test('哈二哈'));//false
console.log('------------------------------------------');
// + 量词,检测字符串内可以重复出现1次或者多次 哈
console.log(/^哈+$/.test('哈哈哈'));//true
console.log(/^哈+$/.test(''));//false,+为至少重复一次或者多次,不能为0次
// 只能有哈,精确匹配不能出现其他字
console.log(/^哈+$/.test('哈二哈'));//false
console.log('-------------------------------------------');
// ? 量词,检测字符串内可以重复出现1次或者0次 哈
console.log(/^哈?$/.test('哈'));//true
console.log(/^哈?$/.test(''));//true
console.log(/^哈?$/.test('哈哈哈哈'));//false ?表示只能出现一次或者0次哈
// 只能有哈,精确匹配不能出现其他字
console.log(/^哈?$/.test('哈二哈'));//false量词{n},{n,},{n,m}:
// 量词{n}写几,就必须出现几次
console.log(/^噜{2}$/.test('噜'));//false
console.log(/^噜{2}$/.test('噜噜'))//true 必须出现两次噜
console.log(/^噜{2}$/.test('噜噜噜'))//flase
console.log(/^噜{2}$/.test('噜噜噜噜'))//false
console.log('--------------------------------------------');
// 量词{n,} 表示>=n次
console.log(/^噜{2,}$/.test('噜'));//false 只有大于等于两个噜才为true
console.log(/^噜{2,}$/.test('噜噜'))//true
console.log(/^噜{2,}$/.test('噜噜噜'))//true
console.log(/^噜{2,}$/.test('噜噜噜噜'))//true
console.log('--------------------------------------------');
// 量词{n,m} 表示大于等于n,小于等于m 逗号两侧不能有空格
console.log(/^噜{2,4}$/.test('噜'));//false
console.log(/^噜{2,4}$/.test('噜噜'))//true 只有第2-4个才为true
console.log(/^噜{2,4}$/.test('噜噜噜'))//true
console.log(/^噜{2,4}$/.test('噜噜噜噜'))//true
console.log(/^噜{2,4}$/.test('噜噜噜噜噜'))//false
console.log(/^噜{2,4}$/.test('噜噜噜噜噜噜'))//false1.3.3字符类
(1)[]匹配字符集合
// 只要含数组[ab]内任何一个元素a或b即为true
console.log(/[ab]/.test('andy'));//true
console.log(/[ab]/.test('baby'));//true
console.log(/[ab]/.test('world'));//false// 精确匹配只有出现ab内一个字符才为true,只选一个，出现其他则为false
console.log(/^[ab]$/.test('a'));//true
console.log(/^[ab]$/.test('b'));//true
console.log(/^[ab]$/.test('ab'));//false
console.log(/^[ab]{2}$/.test('ab'));//true 指定出现两个字符连字符 - 表示范围，比如：
比如\d代表0-9
[a-z]表示a-z26个英文字母都可以
[a-zA-Z]表示大小写都可以
// 只能选一个
console.log(/^[a-zA-Z0-9]/.test('8'));//true(2)[]里面加上^取反符号，要写在中括号里面
如：[^a-z]匹配除了小写字母以外的其他字符
（3）.匹配除换行符之外的任何单个字符
（4）预定义：指的是某些常见方式的简写方式
1.3.4用户名验证综合案例
首先设置正则表达式规则为取6-16位英文字母和数组和下划线分隔符；
然后为表单添加点击事件，若焦点失去则开始验证表单；
若表单数据input.value的值和正则表达式规则相匹配，则为span添加right类，否则添加error类
<body>
<input type="text">
<span></span>
<script>
const reg = /^[a-zA-Z0-9-_]{6,16}$/
const input = document.querySelector('input')
const span = input.nextElementSibling
// 表单失去焦点便开始认证
input.addEventListener('blur', function () {
// 符合正则规范,则让span添加right类
if (reg.test(this.value)) {
span.innerHTML = '输入正确'
span.className = 'right'
} else {
span.innerHTML = '请输入6-16位的英文数字下划线'
// 使用className可以直接覆盖right类
span.className = 'error'
}
})
</script>
</body> <style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(./images/error1.png) no-repeat left center;
}
.right {
color: green;
background: url(./images/right.png) no-repeat left center;
}
</style>1.4修饰符
修饰符约束正则执行的某些细节，如是否区分大小写，是否支持多行匹配等
语法：/表达式/修饰符
i是ignore的缩写，表示正则匹配时字母不区分大小写；
g是global缩写，表示匹配满足所有正则表达式结果
console.log(/^js$/i.test('JS'))//truereplace替换：字符串.replace(/正则表达式/,'替换的文本')
const str = 'java是编程语言,JAVA如此简单'
// 将java替换为前端
const re = str.replace(/java/ig, '前端')//i代表不区分大小写,g代表碰到java则全部替换
console.log(re);1.4.1过滤敏感词
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
const txt = document.querySelector('textarea')
const bt = document.querySelector('button')
const div = document.querySelector('div')
bt.addEventListener('click', function () {
// 将文本域里 网络 或者 小日子 全部替换为 **,并插入div内
div.innerHTML = txt.value.replace(/网络|小日子/g, '**')
txt.value = ''//发布后清空文本域
})
</script>
</body>1.5综合案例-注册页面验证用户信息
change事件;监听文本框,跟blur一样验证
<body>
<input type="text">
<script>
const input = document.querySelector('input')
// change只有输入内容后移开才会验证,有反应,blur是放入输入框移开就验证,有反应
input.addEventListener('change', function () {
console.log(11);
})
</script>
</body>(1).发送短信验证码模块
需要用到定时器setInterval（）进行短信验证倒计时
使用节流阀防止倒计时过程中被点击重新开始
const code = document.querySelector('.code')
let flag = true
code.addEventListener('click', function () {
// 节流阀,当flag=true时才能执行
if (flag) {
flag = false//使倒计时开始后就不能再次被点击
let i = 5
code.innerHTML = `0${i}秒后重新发送`//点击完毕后立马触发
let timeId = setInterval(function () {
i--
code.innerHTML = `0${i}秒后重新发送`
if (i === 0) {
clearInterval(timeId)
code.innerHTML = `重新获取`
flag = true//使倒计时结束后可重新点击开始
}
}, 1000)
}
})（2）用户名输入验证
首先可根据name获取用户名输入表单，然后为其添加change事，然后封装验证函数设置正则表达式规则，若测试结果与用户名输入值username.value不同则向span添加文本进行提示并返回false；若通过则向span添加空字符，并返回true用于后期提交表单时验证是否成功输入用户名
// 2.验证用户名
// 2.1获取用户名
const username = document.querySelector('[name=username]')
// 2.2 给input添加change事件,值发生改变时候
username.addEventListener('change', verifyName)
// 2.3封装verifyName方法
function verifyName() {
// 2.4定正则表达式规则
const reg = /^[a-zA-Z0-9-_]{6,10}$/
const span = username.nextElementSibling
if (!reg.test(username.value)) {
// console.log(11);
// 若username的值不符合正则表达式,则进行提示
span.innerText = '请输入6-10位'
return false
}
// 2.5若用户名输入合法 则清空就好
span.innerText = ''
return true
}
（3）后面手机号验证，验证码验证，密码验证基本方法一致，换个名字就可
// 3手机号验证
const phone = document.querySelector('[name=phone]')
// 3.2 给input添加change事件,值发生改变时候
phone.addEventListener('change', verifyPhone)
// 3.3封装verifyPhone方法
function verifyPhone() {
// 3.4定正则表达式规则
const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|9[0-35-9])\d{8}$/
const span = phone.nextElementSibling
if (!reg.test(phone.value)) {
// console.log(11);
// 若phone的值不符合正则表达式,则进行提示
span.innerText = '输入不合法,请输入正确的11位号码'
return false
}
// 3.5若用户名输入合法 则清空输入框就好
span.innerText = ''
return true
}
// 4.短信验证码验证
const codeInput = document.querySelector('[name=code]')
// 4.2 给input添加change事件,值发生改变时候
codeInput.addEventListener('change', verifyCode)
// 4.3封装verifyPhone方法
function verifyCode() {
// 4.4定正则表达式规则
const reg = /^\d{6}$/
const span = codeInput.nextElementSibling
if (!reg.test(codeInput.value)) {
// console.log(11);
// 若code的值不符合正则表达式,则进行提示
span.innerText = '输入不合法,请输入正确的验证码'
return false
}
// 4.5若用户名输入合法 则清空输入框就好
span.innerText = ''
return true
}
// 5.密码验证
// 5.1获取密码
const password = document.querySelector('[name=password]')
// 5.2 给input添加change事件,值发生改变时候
password.addEventListener('change', verifyPwd)
// 5.3封装 verifyPwd方法
function verifyPwd() {
// 5.4定正则表达式规则
const reg = /^[a-zA-Z0-9-_]{6,20}$/
const span = password.nextElementSibling
if (!reg.test(password.value)) {
// console.log(11);
// 若密码输入不符合正则表达式,则进行提示
span.innerText = '请输入6至20位字母、数字和符号组合'
return false
}
// 5.5若用户名输入合法 则清空输入框就好
span.innerText = ''
return true
}
（4）再次输入密码验证
此模块验证首先也需要获取输入表单，为其添加change事件，在函数封装内不需要验证正则表达式，而是判断此处输入值是否等于密码框输入值，若不等于则通过span提示，返回false，若等于加空字符到span，并返回true；
// 6.再次输入密码验证
// 6.1获取再次验证表单
const confirm = document.querySelector('[name=confirm]')
// 6.2 添加change事件,值发生改变时候
confirm.addEventListener('change', verifyConfirm)
// 6.3封装verifyConfirm方法
function verifyConfirm() {
// 当前表单值不等于密码框值则为错
const span = confirm.nextElementSibling
if (confirm.value !== password.value) {
span.innerText = '密码不一致,请重新输入'
return false
}
// 6.5若密码输入一致 则清空输入框就好
span.innerText = ''
return true
}（5）确认同意验证
此模块是否确认是根据该模块是否存在icon-queren2类，存在则说明已经点击确认，不存在则说明未点击确认，此时需要为其添加点击事件，通过classList.toggle（‘icon-queren2’）进行判断。点击后若存在则删除，若不存在则添加
// 7.确认同意模块
const queren = document.querySelector('.icon-queren')
queren.addEventListener('click', function () {
// 切换类,存在则删除,不存在就添加
this.classList.toggle('icon-queren2')
})（6）表单提交验证
首先需要确认是否勾选确认提交协议，其次需要验证上述信息是否全部正确填入；
获取表单为其添加提交事件，然后通过classList.contains('icon-queren2')判断是否存在icon-queren2'类，若不存在，则说明未勾选，则提醒用户勾选，并通过 e.preventDefault()阻止跳转；若已经存在则通过上述表单验证函数返回的true或false判断是否正确输入，若输入有误返回false，则执行e.preventDefault()阻止跳转
// 8.表单提交模块
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
// 若有icon-queren2类则说明已经确认,没有则说明为确认
if (!queren.classList.contains('icon-queren2')) {
alert('请勾选同意协议')
// /阻止提交
e.preventDefault()
}
//判断上面文本框输入是否通过
// verifyName返回false时则！verifyName为true，执行阻止提交
if (!verifyName()) e.preventDefault()
if (!verifyPhone()) e.preventDefault()
if (!verifyCode()) e.preventDefault()
if (!verifyPwd()) e.preventDefault()
if (!verifyConfirm()) e.preventDefault()
})
1.5.2 登陆页面
首先需要通过tab栏切换页面，为tab添加点击事件，若点击的标签名为A，则先删除所有的active类，在为点击的标签添加上active类；
然后通过循环将下方两个界面都隐藏，然后为点击到标签对应的自定义属性实现界面显示
然后实现表单提交，为表单添加提交事件；表单内required表示非空的，要求用户必须填，实现验证功能；所以表单提交首先需要e.preventDefault()阻止跳转，然后需要判断是否勾选同意协议，若！agree.checked表示未勾选，则直接提示用户，若勾选了则通过localStorage.setItem将用户输入信息username.value存入本地;同时 location.href登录后跳转到首页
<script>
// 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') {
tab_nav.querySelector('.active').classList.remove('active')
e.target.classList.add('active')
// 先使两个界面都关闭
for (let i = 0; i < pane.length; i++) {
pane[i].style.display = 'none'
}
// 让点击到的对应的id的界面显示
pane[e.target.dataset.id].style.display = 'block'
}
})
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'
})
1.5.3 首页登录名展示
首先需要获取导航栏的第一个li1，li2为li1的下一个兄弟，
声明渲染函数渲染数据：首先通过getItem（）需要获取本地数据，若本地数据存在，则将<a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>添加到li1，<a href="javascript:;">退出登录</a>添加到li2；若本地没有数据，则将`<a href="./login.html">请先登录</a>`请先登录标签加到li1，再将<a href="./register.html">免费注册</a>'免费注册添加到li2；
点击退出登录时需要添加点击事件，localStorage.removeItem（）将本地存储信息删除，同时重新渲染函数
const li1 = document.querySelector('.xtx_navs li:first-child')
const li2 = li1.nextElementSibling
// 2.声明渲染函数，退出登陆时需要重新渲染
function render() {
// 获取本地存储数据
const uname = localStorage.getItem('xtx-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()
// 2.点击退出登录、
li2.addEventListener('click', function () {
// 删除本地存储
localStorage.removeItem('xtx-uname')
// 重新渲染
render()
})
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
