JavaScript 学习笔记（WEB APIs Day6）

写在前面

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：\
1. JavaScript 学习笔记（Day1） \
2. JavaScript 学习笔记（Day2） \
3. JavaScript 学习笔记（Day3） \
4. JavaScript 学习笔记（Day4） \
5. JavaScript 学习笔记（Day5） \
6. JavaScript 学习笔记（WEB APIs Day1） \
7. JavaScript 学习笔记（WEB APIs Day2） \
8. JavaScript 学习笔记（WEB APIs Day3） \
9. JavaScript 学习笔记（WEB APIs Day4） \
10. JavaScript 学习笔记（WEB APIs Day5）

---

::: block-1

目录

• 1 正则表达式
• 2 综合案例
• 3 阶段案例
  :::

1 正则表达式

1.1 介绍

P138：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=138

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

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

1.2 语法

1. 定义正则表达式语法：

const reg = /表达式/

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

reg.test(被检测的字符串)

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

reg.exec(被检测的字符串)

例：

const str = '我们在学习前端'
// 正则表达式使用:
// 1．定义规则
const reg = /前端/
// 2．是否匹配
console.log(reg.test(str)) // true
// 3. exec() 搜索匹配
console.log(reg.exec(str)) // 返回数组

1.3 元字符

P139：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=139

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

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

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

• 参考文档：

  • MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide...
  • 正则测试工具: http://tool.oschina.net/regex

1. 边界符

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

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

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

例：

console.log(/哈/.test('哈')) // true
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(/^二哈$/.test('二哈')) // true

2. 量词

P140：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=140

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

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

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

例：

// * 表示重复0次或者更多次
console.log(/^哈*$/.test('')) // true
console.log(/^哈*$/.test('哈')) // true
console.log(/^哈*$/.test('哈哈哈')) // true
// + 表示重复1次或者更多次
console.log(/^哈+$/.test('')) // false
console.log(/^哈+$/.test('哈')) // true
console.log(/^哈+$/.test('哈哈哈')) // true
// ? 表示重复0次或者1次
console.log(/^哈?$/.test('')) // true
console.log(/^哈?$/.test('哈')) // true
console.log(/^哈?$/.test('哈哈哈')) // fasle
// {n} 表示重复n次
console.log(/^哈{2}$/.test('')) // false
console.log(/^哈{2}$/.test('哈')) // false
console.log(/^哈{2}$/.test('哈哈')) // true
console.log(/^哈{2}$/.test('哈哈哈')) // false
// {n,} 是 >=n 的意思
console.log(/^哈{2,}$/.test('')) // false
console.log(/^哈{2,}$/.test('哈')) // false
console.log(/^哈{2,}$/.test('哈哈')) // true
console.log(/^哈{2,}$/.test('哈哈哈')) // true
// {n,m} 是次数 >= n <= m 的意思﹑注意，逗号左右千万不要有空格
console.log(/^哈{2,4}$/.test('')) // faLse
console.log(/^哈{2,4}$/.test('哈')）// false
console.log(/^哈{2,4}$/.test('哈哈')）// true
console.log(/^哈{2,4}$/.test('哈哈哈')) // true
console.log(/^哈{2,4}$/.test('哈哈哈哈')) // true
console.log(/^哈{2,4}$/.test('哈哈哈哈哈')) // false

3. 字符类：

P141：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=141

• [ ] 匹配字符集合

// 只要中括号里面的任意字符出现都返回为true
console.log(/[abc]/.test('andy')) // true
console.log(/[abc]/.test('baby')) // true
console.log(/[abc]/.test('cry')) // true
console.log(/[abc]/.test('die')) //false

• [ ] 里面加上 - 连字符

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

比如：

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

// 腾讯QQ号
^[1-9][0-9]{4,}$ // 腾讯QQ号从10000开始

• [ ] 里面加上 ^ 取反符号

比如：

• ¹ 匹配除了小写字母以外的字符
• 注意要写到中括号里面
• . 匹配除换行符之外的任何单个字符

P142：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=142

预定义：指的是某些常见模式的简写方式。

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

// 日期格式
^\d{4}-\d{1,2}-\d{1,2}

1.4 修饰符

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

语法：/表达式/修饰符

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

replace 替换

语法：

字符串.replace(/正则表达式/, '替换的文本')

例：

const str = 'java是一门编程语言，学完JAVA工资很高'
const re = str.replace(/java/i,'python’)
console.log(re) // 'python是一门编程语言，学完JAVA工资很高'
const re = str.replace(/java/ig,'python’)
console.log(re) // 'python是一门编程语言，学完python工资很高'

2 综合案例

P143：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=143

P144：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=144

3 阶段案例

P145：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=145

<center>结束</center>

本文由mdnice多平台发布

---

1. a-z ↩
2. 0-9 ↩
3. A-Za-z0-9_ ↩
4. \t\r\n\v\f ↩