JavaScript 正则表达式的创建方法

上一节回顾

上一节的重点是正则的概念，以及正则表达式的作用

• 正则是什么
  • 正则表达式是用于匹配字符串中字符的规则（正则就是用来处理字符串的）
• 正则表达式的作用
  • 数据验证
  • 替换文本
  • 匹配特定模式并提取子字符串

你可能无意间使用过正则

例如，您很可能使用 * 通配符来匹配所有的文件。

如果你使用一些框架，或者gulp等批处理工具，*就会很常见。

下面我具体的来讲正则表达式的知识。

编写正则表达式

创建正则有两种方法，字面量方式和构造函数模式

• 字面量方式（推荐这一种）

  • 方法：用两个斜杠包起来，内容都是用来描述规则的元字符

  let reg=/\d+/g;
  console.log(reg.test("789456"));//true
  

• 构造函数

  • 方法：两个参数（注意需要转移）
    • 元字符字符串
    • 修饰符字符串

  let reg2=new RegExp("\\d+","g");
  console.log(reg2.test("1234444456"));//true
  console.log(reg2.test("asdsa"));//false
  

扩展思考题

既然有 2 个方法都可以创建正则，那么他们两个方法有什么不同？那个性能好？分别用在什么场景下？

可以通过观察上面两种方式的创建方法描述来思考；这个思考题后面会详细的说明。

如何学习正则

可以在浏览器的控制台，通过命令查看

let reg=/\d+/;
console.dir(reg);//顺着原型链查找有哪些方法
console.dir(RegExp.prototype);//正则类的原型
console.dir(RegExp);

正则原理（匹配和捕获）

匹配

• 1. 匹配 判断一个字符串是否符合我们制定的规则 ->test:reg.test(str)

let reg=/\d+/;
console.log(reg.test("朱"));//false
console.log(reg.test("1"));//true
console.log(reg.test(1));//true
console.log(reg.test("朱朱朱111"));//true

捕获

• 2. 捕获 把字符串中符合我们正则规则的内容捕获到 ->exec:reg.exec(str)

let reg=/\d+/;
console.log(reg.exec("朱"));//null
console.log(reg.exec("1"));//["1", index: 0, input: "1"]
console.log(reg.exec("朱朱朱 111"));//["111", index: 3, input: "朱朱朱 111"]

正则捕获，如果比配，返回捕获匹配到了数据，如果不匹配，返回 null；

扩展思考题

知道 JavaScript 中哪些值返回 null，哪些值返回 undefined 么？如果获取一个 ID 的 DOM, 获取不到返回什么？如果有一个对象，获取不存在的属性返回什么？如果一个函数，没有写 retrun，那么返回什么？

正则特点的说明

正则表达式是用于匹配字符串中字符的规则，而我们学习正则的目的，就是学习如何制定规则来辅助我们工作。

• 只能处理字符串
• 它是一个规则
  • 可以验证字符串是否符合某个规则（使用test)
  • 也可以把字符串中符合规则的内容捕获出来（使用exec/match)

例子

例子：验证规则

网站的注册限制

举一个常见的例子，比如网站的注册功能，用户名都有限制的，这时候，可以正则来处理。

let reg = new RegExp(/^[a-zA-Z0-9]{4,6}$/);       // ^表示开始  $表示结束
reg.test('axihe');//true
reg.test('axihe.com')//false

上面的意思是；必须为数字或字母，长度只能为 4~6 位， ^ 表示开始 $ 表示结束；

判断是否含有数字

let reg = /\d+/;
reg.test('axihe.com');//false
reg.test('axihe.com1');//true

例子：内容捕获

捕获年龄

let reg = /\d+/;
let resu = reg.exec('朱安邦的年龄是18岁');
console.log(resu)

匹配的结果是 ["18", index: 7, input: "朱安邦的年龄是18岁", groups: undefined]

匹配以数字开头，并以 abc 结尾的字符串

let str = "123abc";
let patt1 = /^[0-9]+abc$/;
console.log(str.match(patt1));

以下标记的文本是获得的匹配的表达式：

123abc

后期知识的预习

正则表达式的使用，可以通过简单的办法来实现强大的功能。

简单的示例

• ^ 为匹配输入字符串的开始位置。
• [0-9]+ 匹配多个数字， [0-9] 匹配单个数字，+ 匹配一个或者多个。
• abc$ 匹配字母 abc 并以 abc 结尾，
• $ 为匹配输入字符串的结束位置。

注册表单实例

需求：写用户注册表单时，只允许用户名包含字符、数字、下划线和连接字符 (-)，并设置用户名的长度；

我们就可以使用以下正则表达式来设定。

以上的正则表达式可以匹配 axihe、axihe1、axi-he、axi_he， 但不匹配 he，因为它包含的字母太短了，小于 3 个无法匹配。

也不匹配 axihe$, 因为它包含特殊字符。