当前位置：首页 > news >正文

WEBSTORM前端 —— 第5章：Web APIs —— 第6节：正则阶段案例

news 2025/10/28 10:04:59

一、正则表达式

1.1 什么是正则表达式

1.2 语法

1. 定义正则表达式语法

2.判断是否有符合规则的字符串

3.检索（查找）符合规则的字符串

1.3 元字符

1.普通字符

2.元字符(特殊字符）

3.分类

①边界符

②量词（表示重复次数）

③字符类（比如 \d 表示 0~9）

1.4 修饰符

二、综合案例——小兔鲜页面注册

三、阶段案例

1.小兔鲜登录页面

2.小兔鲜首页页面

一、正则表达式

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象

通常用来查找、替换那些符合正则表达式的文本

正则表达式在 JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配) 。比如用户名: /^[a-z0-9_-]{3,16}$/
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

1.2 语法

1. 定义正则表达式语法

其中 / / 是正则表达式字面量。比如

2.判断是否有符合规则的字符串

test() 方法用来查看正则表达式与指定的字符串是否匹配

3.检索（查找）符合规则的字符串

exec() 方法在一个指定字符串中执行一个搜索匹配

<!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><script>const str = '我们在学习前端，希望学习前端能高薪毕业'// 正则表达式使用：// 1. 定义规则const reg = /前端/// 2. 是否匹配// console.log(reg.test(str))  // true// 3. exec()console.log(reg.exec(str))  // 返回数组</script>
</body></html>

1.3 元字符

1.普通字符

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。

2.元字符(特殊字符）

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..
- 但是换成元字符写法： [a-z]

3.分类

①边界符

（表示位置，开头和结尾，必须用什么开头，用什么结尾）

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

②量词（表示重复次数）

③字符类（比如 \d 表示 0~9）

(1) [ ] 里面加上 ^ 取反符号

比如：

[^a-z] 匹配除了小写字母以外的字符
注意要写到中括号里面

（2） . 匹配除换行符之外的任何单个字符

<!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><script>// 元字符// console.log(/哈/.test('哈')) // true// console.log(/哈/.test('哈哈')) // true// console.log(/哈/.test('二哈')) // true// console.log('------------------')// // 1. 边界符// console.log(/^哈/.test('哈')) // true// console.log(/^哈/.test('哈哈')) // true// console.log(/^哈/.test('二哈')) // flase// console.log(/^哈$/.test('哈')) // true  只有这种情况为true 否则全是false// 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('------------------')// 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// 量词 {n} 写几，就必须出现几次console.log(/^哈{4}$/.test('哈'))console.log(/^哈{4}$/.test('哈哈'))console.log(/^哈{4}$/.test('哈哈哈'))console.log(/^哈{4}$/.test('哈哈哈哈'))console.log(/^哈{4}$/.test('哈哈哈哈哈'))console.log(/^哈{4}$/.test('哈哈哈哈哈哈'))console.log('------------------')// 量词 {n,}   >=nconsole.log(/^哈{4,}$/.test('哈'))console.log(/^哈{4,}$/.test('哈哈'))console.log(/^哈{4,}$/.test('哈哈哈'))console.log(/^哈{4,}$/.test('哈哈哈哈'))console.log(/^哈{4,}$/.test('哈哈哈哈哈'))console.log(/^哈{4,}$/.test('哈哈哈哈哈哈'))console.log('------------------')// 量词 {n,m}  逗号左右两侧千万不能有空格    >=n && <= mconsole.log(/^哈{4,6}$/.test('哈'))console.log(/^哈{4,6}$/.test('哈哈'))console.log(/^哈{4,6}$/.test('哈哈哈'))console.log(/^哈{4,6}$/.test('哈哈哈哈'))console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))console.log('------------------')// 字符类   [abc]  只选1个console.log(/^[abc]$/.test('a'))  // trueconsole.log(/^[abc]$/.test('b'))  // trueconsole.log(/^[abc]$/.test('c'))  // trueconsole.log(/^[abc]$/.test('ab'))  // falseconsole.log(/^[abc]{2}$/.test('ab'))  // trueconsole.log('------------------')// 字符类   [a-z]  只选1个console.log(/^[A-Z]$/.test('p'))  // falseconsole.log(/^[A-Z]$/.test('P'))  // trueconsole.log(/^[0-9]$/.test(2))  // trueconsole.log(/^[a-zA-Z0-9]$/.test(2))  // trueconsole.log(/^[a-zA-Z0-9]$/.test('p'))  // trueconsole.log(/^[a-zA-Z0-9]$/.test('P'))  // trueconsole.log('------------------')</script></body></html>

案例：用户名验证案例

需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位

分析：

①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/

②：当表单失去焦点就开始验证.

③：如果符合正则规范, 则让后面的span标签添加 right 类.

④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.

<!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><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>
</head><body><input type="text"><span></span><script>// 1. 准备正则const reg = /^[a-zA-Z0-9-_]{6,16}$/const input = document.querySelector('input')const span = input.nextElementSiblinginput.addEventListener('blur', function () {// console.log(reg.test(this.value))if (reg.test(this.value)) {span.innerHTML = '输入正确'span.className = 'right'} else {span.innerHTML = '请输入6~16位的英文数字下划线'span.className = 'error'}})</script>
</body></html>

1.4 修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

语法：

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

替换 replace 替换。语法：

<!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><script>console.log(/^java$/.test('java'))console.log(/^java$/i.test('JAVA'))console.log(/^java$/i.test('Java'))const str = 'java是一门编程语言， 学完JAVA工资很高'// const re = str.replace(/java|JAVA/g, '前端')const re = str.replace(/java/ig, '前端')console.log(re)  // 前端是一门编程语言， 学完前端工资很高</script>
</body></html>

案例：过滤敏感字

需求：要求用户不能输入敏感字

比如，pink老师上课很有**

分析：

①：用户输入内容

②：内容进行正则替换查找，找到敏感词，进行**

③：要全局替换使用修饰符 g

<!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><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><div></div><script>const tx = document.querySelector('textarea')const btn = document.querySelector('button')const div = document.querySelector('div')btn.addEventListener('click', function () {// console.log(tx.value)div.innerHTML = tx.value.replace(/激情|基情/g, '**')tx.value = ''})</script>
</body></html>

二、综合案例——小兔鲜页面注册

分析业务模块：

①：发送验证码模块

②：各个表单验证模块

③：勾选已经阅读同意模块

④：下一步验证全部模块

只要上面有一个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 则阻止提交

三、阶段案例

1.小兔鲜登录页面

需求：

①： tab切换

需求②：点击登录可以跳转页面

先阻止默认行为
如果没有勾选同意，则提示要勾选
required 属性不能为空
假设登录成功
把用户名记录到本地存储中
同时跳转到首页 location.href

2.小兔鲜首页页面

需求：

1. 从登录页面跳转过来之后，自动显示用户名

2. 如果点击退出，则不显示用户名

步骤：

最好写个渲染函数，因为一会的退出还需要用到

①：如果本地存储有记录的用户名，读取本地存储数据

需要把用户名写到第一个li里面

格式： <a href="javascript:;"><i class="iconfont icon-user"> pink老师</i></a>

因为登录了，所以第二个里面的文字变为，退出登录

格式： <a href="javascript:;">退出登录</a>

②：如果本地存储没有数据，则复原为默认的结构

④：点击退出登录

删除本地存储对应的用户名数据

重新调用渲染函数即可