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）

---

目录

• 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/Regular_Expressions
  • 正则测试工具: 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开始

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

比如：

• [^a-z] 匹配除了小写字母以外的字符

• 注意要写到中括号里面

• . 匹配除换行符之外的任何单个字符

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

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

预定类	说明
\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]

// 日期格式
^\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

「结束」

本文由 mdnice 多平台发布