JavaScript入门教程笔记(17)-正则表达式

缺乏、安全感 2022-03-30 16:58 104阅读 0赞

JavaScript中正则表达式的功能由RegExp对象提供。

## 1 概述 ##

正则表达式（Regular expression）是一种表达文本模式（即字符串结构）的方法，有点像是字符串的模板，常用来按照“指定模式”匹配文本。例如，可以用正则表达式定义好一个邮箱地址的模式，然后用它来检查某个字符串是否为有效的邮箱地址。

新建正则表达式有两种方法。一种是使用字面量，以斜杠表示开始和结束。

var reg = /xyz/;

另一种是使用RegExp构造函数。

var reg = new RegExp('xyz');

上面两种写法等价。区别在于，第一种方法在编译代码时，就会新建正则表达式，而第二种方法在运行时新建，所以前者的效率较高。另外，前者比较方便直观，所以实际应用中，基本采用第一种方法定义正则表达式。

## 2 实例方法 ##

#### 2.1 RegExp.prototype.test() ####

test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。

/cat/.test('cats and dogs') // true

上面代码验证参数字符串是否包含cat，结果为true。

#### 2.2 RegExp.prototype.exec() ####

exec方法返回匹配结果。如果匹配，返回一个数组，数组成员是匹配成功的子字符串，如果不匹配，就返回null。

var s = '_x_x';
    var r1 = /x/;
    var r2 = /y/;
    
    r1.exec(s) // ["x"]
    r2.exec(s) // null

上面代码中，正则对象r1匹配成功，所以返回一个数组，成员是匹配结果；正则对象r2匹配失败，所以返回null。

## 3 匹配实例 ##

正则表达式的规则比较复杂，下面以几个实例来介绍。

#### 3.1 检查手机号码 ####

// 手机号码的验证规则：以1开头的11位数字。
    var reg = /^1\d{10}$/;
    reg.test('13800132967') // true
    reg.test('123412341234') // false
    reg.test('136xyz123') // false

上面代码中，正则表达式各个特殊字符的含义如下：

*  ^ 表示字符串的开始位置
 *  $ 表示字符串的结果位置
 *  \\d 匹配0-9之间的任一数字，相当于\[0-9\]
 *  \{n\} 模式的精确匹配次数。\{10\}表示重复10次；

结合起来，这个正则表达式的意思，就是目标字符串是否以1开头，并且之后的10位数字都是0-9，如果是返回true，不是返回false。

## 3.2 检查账号名称 ##

// 账号验证规则：由字母、数字、下划线组成，字母开头，共有4-12位。
    var reg = /^[a-zA-z]\w{3,11}$/;
    reg.test('my123_csdn') // true
    reg.test('123my_csdn') // false

上面代码中，正则表达式各个特殊字符的含义如下：

*  \- 连字符（-）表示字符的连续范围，\[a-zA-Z\]代表所有的字母。
 *  \\w 匹配任意的字母、数字和下划线，相当于\[A-Za-z0-9\_\]
 *  \{n,m\} 模式的精确匹配次数。\{3,11\}表示重复不少于3次，不多于11次。

完整结合起来，这个正则表达式的意思，就是目标字符串需以1个字母开头，后面3-11位字符由字母、数字、下划线组成。如果是返回true，不是返回false。

## 3.3 检查邮箱 ##

/* 验证规则：把邮箱地址分成“第一部分@第二部分”这样
    第一部分：由字母、数字、下划线、短线“-”、点号“.”组成，
    第二部分：为一个域名，域名由字母、数字、短线“-”、域名后缀组成，
    后缀一般为.xxx或.xxx.xx，为2-4位，如cn,com,net，
    现在有的域名也会大于4位
    */
    var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
    reg.test("xyz@csdn.net"); // true
    reg.test("123456789"); // false

*注：本文适用于ES5规范，原始内容来自 [JavaScript 教程][JavaScript]，有修改。*

[JavaScript]: https://wangdoc.com/javascript/index.html