首页 计算机科学 前端 JavaScript

# day06 - Web APIs

学习目标：

能够利用正则表达式校验输入信息的合法性

具备利用正则表达式验证小兔鲜注册页面表单的能力

# 1. 正则表达式

# 1.1 介绍

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

  • 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式image-20220717150916249

  • 请在上图中找出【戴帽子和眼镜的男人】

  • 戴帽子、戴眼镜、男人都是描述信息，通过这些信息能够在人群中查找到确定的某个人，那么这些用于查找的描述信息编写一个模式，对应到计算机中就是所谓的正则表达式

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

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

    image-20220717151134133

总结：

  • 正则表达式是什么？
  • 是用于匹配字符串中字符组合的模式
  • 正则表达式有什么作用？
    • 表单验证（匹配）
    • 过滤敏感词（替换）
    • 字符串中提取我们想要的部分（提取）

# 1.2 语法

# 1.2.1 创建正则表达式

我们想要查找是否有戴眼镜的人，怎么做呢？

  1. 定义规则： 戴眼镜的
  2. 根据规则去查找：找到则返回

正则同样道理，我们分为两步：

  1. 定义规则
  2. 查找

比如：查找下面文本中是否包含字符串 ' 前端'

1
const str = 'IT培训，前端开发培训，web前端培训，软件测试培训，产品经理培训'

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

  • 定义正则表达式语法：

    1
    const 变量名 = /表达式/

    其中，// 是正则表达式字面量

  • 比如：

    1
    const reg = /前端/

# 1.2.2 判断是否有符合规则的字符串

<span style="color: red">test ()</span> 方法 用来查看正则表达式与指定的字符串是否匹配

  • 语法：

    1
    regObj.test(被监测的字符串)

  • 比如：

    1
    2
    3
    4
    5
    6
    // 要监测的字符串
    const str = 'IT培训，前端开发培训，IT培训课程，web前端培训，Java培训，人工智能培训'
    // 1. 定义正则表达式，监测规则
    const reg = /前端/
    // 2. 检测方法
    console.log(reg.test(str)) // true

  • 如果正则表达式与指定的字符串匹配 ，返回 true，否则 false

总结：

  • 正则表达式使用分为几步？
# 1.2.3 检索（查找）符合规则的字符串

<span style="color: red">exec ()</span> 方法，在一个指定字符串中执行一个搜索匹配

  • 语法：

    1
    regObj.exec(被检测字符串)

  • 比如：

    1
    2
    3
    4
    5
    6
    // 要检测的字符串
    const str = 'IT培训，前端开发培训，IT培训课程，web前端培训，Java培训，人工智能培训'
    // 1. 定义正则表达式，检测规则
    const reg = /前端/
    // 2. 检测方法
    console.log(reg.exec(str))

    image-20220717154100075

  • 如果匹配成功，exec () 方法返回一个数组，否则返回 null

# 1.2.4 总结

正则表达式检测查找 test() 方法和 exec() 方法有什么区别？

  • test 方法 用于判断是否有符合规则的字符串，返回的是布尔值 找到返回 true，否则 false
  • exec 方法用于检索（查找）符合规则的字符串，找到返回数组，否则为 null

# 1.3 元字符

# 1.3.1 元字符概念

  • 普通字符:

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

  • 元字符 (特殊字符）

    是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

    • 比如，规定用户只能输入英文 26 个英文字母，普通字符的话 abcdefghijklm…..
    • 但是换成元字符写法： [a-z]

  • 参考文档：

    • MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
    • 正则测试工具: http://tool.oschina.net/regex
# 1.3.2 元字符 - 边界符

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

正则表达式中的边界符（位置符）用来 <span style="color: red"> 提示字符所处的位置 </span>，主要有两个字符

边界符说明
^表示匹配行首的文本（以谁开始）
$表示匹配行尾的文本（以谁结束）

如果 ^ 和 $ 在一起，表示必须是精确匹配。

例如：image-20220717155037593

示例代码：

1
2
3
4
5
6
7
// // 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

# 1.3.2 元字符 - 量词 （表示重复次数）

量词用来 设定某个模式出现的次数

量词说明
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
重复 n 次
重复 n 次或更多次
重复 n 到 m 次

注意： 逗号左右两侧千万不要出现空格

例如：image-20220717155553992

image-20220717155613602

总结：

  • + 表示重复至少 1 次
  • ? 表示重复 0 次或 1 次
  • * 表示重复 0 次或多次
  • {m, n} 表示复 m 到 n 次
# 1.3.2 元字符 - 字符类 （比如 \d 表示 0~9）
  1. [ ] 匹配字符集合

例如：后面的字符串只要包含 abc 中任意一个字符，都返回 true

image-20220717162525184

  1. [ ] 里面加上 - 连字符

  • 使用连字符 - 表示一个范围

    1
    console.log(/^[a-z]$/.test('c'))  // true

  • 比如：

    • [a-z] 表示 a 到 z 26 个英文字母都可以
    • [a-zA-Z] 表示大小写都可以
    • [0-9] 表示 0~9 的数字都可以

  • 例如：image-20220717162950555

  1. [ ] 里面加上 ^ 取反符号
  • 比如：
    • [^a-z] 匹配除了小写字母以外的字符
    • 注意要写到中括号里面
  1. . 匹配除换行符之外的任何单个字符
# 1.3.4 总结
  • 字符类 . (点) 代表什么意思？
    • 匹配除换行符之外的任何单个字符
  • 字符类 [] 有若干代表什么意思？
    • [abc] 匹配 abc 其中的任何单个字符
    • [a-z] 匹配 26 个小写英文字母其中的任何单个字符
    • [^a-z] 匹配除了 26 个小写英文字母之外的其他任何单个字符
# 1.3.5 用户名验证案例

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

分析：

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

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

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

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

# 1.3.7 字符类预定义（能认出即可）

预定义：指的是 某些 <span style="color: red"> 常见模式的简写方式 </span>。

预定类说明
\d匹配 0-9 之间的任意数字，相当于 [0-9]
\D匹配所有 0-9 以外的字符，相当于 [^0-9]
\w匹配任意的字母，数字和下划线，相当于 [A-Za-z0-9]
\W除所有字母、数字和下划线以外的字符，相当于 [^A-Za-z0-9]
\s匹配空格（包括换行符，制表符，空格符等），相当于 [\t\r\n\v\f]
\S匹配非空格的字符，相当于 [^\t\r\n\v\f]

例如：image-20220717164850957

# 1.4 修饰符

# 1.4.1 修饰符使用

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

  • 语法：image-20220717164935783

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

    例如：image-20220717165012900

# 1.4.2 replace 替换

语法：image-20220717165203012

# 1.4.3 案例 过滤敏感字

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

比如，shadow 老师上课很 **

分析：

​ ①：用户输入内容

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

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

# 2. 综合案例 小兔鲜页面注册

image-20220717165412104

分析业务模块：

​ ①： 发送验证码模块

​ ②： 各个表单验证模块

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

​ ④： 下一步验证全部模块：只要上面有一个 input 验证不通过就不同意提交

# 3. 阶段案例

# 3.1 小兔鲜登录页面

需求：

​ ①： tab 切换image-20220717165718107

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

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

# 3.2 小兔鲜首页页面

需求：

​ ①：从登录页面跳转过来之后，自动显示用户名

​ ②：如果点击退出，则不显示用户名

  1. a-z0-9_- ↩︎

  2. a-zA-Z0-9-_ ↩︎