JavaScript最后分水岭——正则表达式

• 选择符“|”表示“或”，查找条件只要其中一个条件满足即可成立。

• JavaScript中字符串存在转义问题，因此代码中str里的“\”表示反斜线“\”。

• 在正则中匹配特殊字符时，也需要反斜线（\）对特殊字符进行转义。例如，“\\”经过字符串转义后变成“\”，然后正则表达式再用“\”去匹配“\”。

📌注意

构造函数方式与字面量方式创建的正则对象，虽然在功能上完全一致，但它们在语法实现上有一定的区别，前者的pattern在使用时需要对反斜杠（\）进行转义。而后者的pattern在编写时，要放在定界符“/”内，flags标记则放在结尾定界符之外

二、字符类别与集合

========================================================================

🍅字符类别

---

好处：有效的使用字符类别可以使正则表达式更加简洁，便于阅读。

举例1：大写字母、小写字母和数字可以使用“\w”直接表示。

案例2：若要匹配0到9之间的数字可以使用“\d”表示。

下面为了方便读者理解字符类别的使用，以“.”和“\s”为例进行演示.

• 正则对象reg用于匹配空白符后的任意两个字符（除换行外）。

• 因此在控制台查看到的结果中，id前有一个空格。

🍅字符集合

---

字符集合的表示方式：“[]”可以实现一个字符集合。

字符范围：与连字符“-”一起使用时，表示匹配指定范围内的字符。

反义字符：元字符“^”与“[]”一起使用时，称为反义字符。

不在某范围内： “^”与“[]”一起使用，表示匹配不在指定字符范围内的字符。

以字符串 ‘get好TB6’.match(/pattern/g) 为例演示其常见的用法。

📌注意

字符“-”在通常情况下只表示一个普通字符，只有在表示字符范围时才

作为元字符来使用。“-”连字符表示的范围遵循字符编码的顺序，如“a-Z”、“z-a”、“a-9”都是不合法的范围。

【案例】限定输入内容

代码实现思路：

编写HTML，设置一个年（份）和月（份）的文本框，以及一个查询按钮。

获取操作的元素对象，对表单的提交进行验证。

验证年份， 正则：/^\d{4} / 。 验 证 月 份 ， 正 则 ： / ( ( 0 ? [ 1 − 9 ] ) ∣ ( 1 [ 012 ] ) ) /。验证月份，正则： /^((0?[1-9])|(1[012])) /。验证月份，正则：/((0?[1−9])∣(1[012]))/ 。

文本框获取焦点，去除提示框的颜色。文本框失去焦点，去除输入内容的两端的空白，并进行验证。

代码实现

年份

月份

三、与正则相关的方法

=========================================================================

🍅RegExp类中的方法

---

test()方法：检测正则表达式与指定的字符串是否匹配。

匹配成功时，test()方法的返回值为true，否则返回false。

⭐️检测正则对象的模式修饰符

RegExp类中还有一些属性，用于检测当前正则对象使用的模式修饰符，以及指定下一次匹配的起始索引等。

下面为了读者更好的理解这些属性的使用，以实现空格的匹配为例进行演示。

🍅String类中的方法

---

⭐️search()方法：可以返回指定模式的子串在字符串首次出现的位置，相对于indexOf()方法来说功能更强大。

• search()方法的参数是一个正则对象，如果传入一个非正则表达式对象，则会使用“new RegExp(传入的参数)”隐式地将其转换为正则表达式对象。

• search()方法匹配失败后的返回值为-1。

⭐️split()方法：用于根据指定的分隔符将一个字符串分割成字符串数组，其分割后的字符串数组中不包括分隔符。

当分隔符不只一个时，需要定义正则对象才能够完成字符串的分割操作。

• 按照字符串中的“@”和“.”两种分隔符进行分割。

• split()方法的参数为正则表达式模式设置的分隔符，返回值是以数组形式保存的分割后的结果。

📌 注意

当字符串为空时，split()方法返回的是一个包含一个空字符串的数组“[“”]”，如果字符串和分隔符都是空字符串，则返回一个空数组“[]”。

• 在使用正则匹配方式分割字符串时，还可以指定字符串分割的次数。

• 当指定字符串分割次数后，若指定的次数小于实际字符串中符合规则分割的次数，则最后的返回结果中会忽略其他的分割结果。

动手实践

密码强度验证

密码强度验证条件：

① 长度<6位，无密码强度。

②长度>6位，而且包含数字、字母或其他字符中的一种，密码强度为“低”。

③长度>6位，而且包含数字、字母或其他字符中的二种，密码强度为“中”。

④长度>6位，而且包含数字、字母或其他字符中的三种及以上，密码强度为“高”。

四、字符限定与分组

========================================================================

🍅字符限定

---

🍑字符限定——限定符

提出问题：匹配一个连续出现的字符，如 6个连续出现的数字“458925”。

解决方案1：正则对象/\d\d\d\d\d\d/gi。

存在的问题：重复出现的“\d”既不便于阅读，书写又繁琐。

解决方案2：使用限定符（?、+、*、{ }）完成某个字符连续出现的匹配。正则对象/\d{6}/gi。

🍑字符限定——贪婪与懒惰匹配

当点字符（.）和限定符连用时，可以实现匹配指定数量范围的任意字符。

• 举例：“^hello.*world$”。

• 说明：可匹配从hello开始到world结束，中间包含零个或多个任意字符的字符串。

正则在实现指定数量范围的任意字符匹配时，支持贪婪匹配和惰性匹配两种方式。

• 所谓贪婪表示匹配尽可能多的字符，而惰性表示匹配尽可能少的字符。在默认情况下，是贪婪匹配。

• 若想要实现惰性匹配，需在上一个限定符的后面加上“?”符号。

🍅括号字符

---

在正则表达式中，被括号字符“()”括起来的内容，称之为“子表达式”。

🍑作用

小括号实现了匹配catch和cater，而如果不使用小括号，则变成了catch和er

未分组时，表示匹配2个c字符；而分组后，表示匹配2个“bc”字符串。

🍑捕获与非捕获

捕获：将子表达式匹配到的内容存储到系统的缓存区的过程。

非捕获：不将子表达式的匹配内容存放到系统的缓存中，使用(?:x)实现。

String对象的replace()方法，可直接利用$n（n是大于0的正整数）获取捕获内容，完成对子表达式捕获的内容进行替换的操作。

• 第1个参数为正则表达式，用于与str字符串进行匹配，将符合规则的内容利用第2个参数设置的内容进行替换。

• $2表示reg正则表达式中第2个子表达式被捕获的内容“Capture”。

• $1表示第1个子表达式被捕获的内容“Regular”。

• 返回值是替换后的新字符串，因此，并不会修改原字符串的内容。

可以使用”(?:x)”的方式实现非捕获匹配

🍑反向引用

在编写正则表达式时，若要在正则表达式中，获取存放在缓存区内的子表达式的捕获内容，则可以使用“\n”（n是大于0的正整数）的方式引用，这个过程就是“反向引用”。

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】