正则表达式基本语法及表单验证操作详解 [基于JS]

什么是正则表达式

正则表达式（Regular Expression），又称规则表达式、常规表示式、正规表示法、正则表示法，简称正则表达式，在计算机科学中，是用来描述、匹配一系列符合某个规则的字符串的表达式。常用于搜索、替换或验证文本。

正则表达式的基本语法

字符类

• [abc] 匹配a、b或c
• [^abc] 除a、b、c外均可匹配
• [a-zA-Z0-9] 匹配所有字母和数字
• [^a-zA-Z0-9] 匹配所有非字母和数字

字符集合

• . 匹配任意字符
• \d 匹配数字，等价于[0-9]
• \D 匹配非数字，等价于[^0-9]
• \w 匹配单词字符，等价于[a-zA-Z0-9]
• \W 匹配非单词字符，等价于[^a-zA-Z0-9]
• \s 匹配空白字符，包括空格、制表符、换行符等
• \S 匹配非空白字符

数量词

• a? 匹配0个或1个a
• a* 匹配0个或多个a
• a+ 匹配1个或多个a
• a{n} 匹配n个a
• a{n,} 匹配至少n个a
• a{n,m} 匹配n至m个a

边界匹配

• ^ 匹配行的起始位置
• $ 匹配行的结束位置
• \b 匹配单词边界
• \B 匹配非单词边界

分组和引用

• (expr) 匹配expr，并捕获匹配的子串到缓冲区中
• (?:expr) 匹配expr，但不捕获匹配的子串
• (?=expr) 匹配expr前面的位置
• (?<=expr) 匹配expr后面的位置

正则表达式的使用

创建正则表达式对象

通过在JavaScript中使用RegExp对象创建正则表达式，语法如下：

var regex = new RegExp(pattern, flags);

其中，pattern表示正则表达式的模式，可以是字符串，也可以是RegExp对象，flags表示正则表达式的匹配规则，如：

• i：忽略大小写
• g：全局匹配
• m：多行匹配

示例：

// 匹配所有数字
var regex = new RegExp(/\d/g);

// 忽略大小写匹配字符串
var regex = new RegExp('hello', 'i');

正则表达式的方法

RegExp对象提供了一些方法，用于对字符串进行模式匹配：

• test(str)：判断字符串str是否匹配正则表达式，返回Boolean值
• exec(str)：在字符串str中搜索匹配正则表达式的第一个子串，返回一个数组对象，包含匹配的子串、捕获组、匹配位置等信息。如果没有匹配项，返回null。

示例：

// 判断手机号码是否符合规范
var regex = new RegExp(/^1[34578]\d{9}$/);
var phoneNumber = '13912345678';
if (regex.test(phoneNumber)) {
    console.log('手机号码正确');
} else {
    console.log('手机号码错误');
}

// 提取URL中的协议
var regex = new RegExp(/^(\w+):\/\//);
var url = 'http://www.example.com/index.html';
var matches = regex.exec(url);
console.log(matches[1]); // 'http'

正则表达式的用途

表单验证

正则表达式可以用来验证表单数据的输入是否符合规范，例如：

// 验证电子邮件地址
var regex = new RegExp(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/);
var email = '[e-mail]';
if (!regex.test(email)) {
    console.log('邮件地址错误');
}

// 验证身份证号码
var regex = new RegExp(/^\d{6}(18|19|2\d)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[0-1])\d{3}[\dX]$/);
var idCard = '310101199001011234';
if (!regex.test(idCard)) {
    console.log('身份证号码错误');
}

字符串操作

正则表达式可以用来搜索、替换字符串中的子串，例如：

// 将空格替换为逗号
var regex = new RegExp(/\s+/);
var text = 'This is a sample text.';
var result = text.replace(regex, ',');
console.log(result); // 'This,is,a,sample,text.'

// 判断字符串是否以数字开头
var regex = new RegExp(/^\d/);
var text = '123abc';
if (regex.test(text)) {
    console.log('字符串以数字开头');
} else {
    console.log('字符串不以数字开头');
}

总结

正则表达式是一种十分强大的工具，可以用来描述、搜索、替换符合某种规则的文本。在JavaScript中使用RegExp对象创建正则表达式，并使用其方法对字符串进行匹配。在实际应用中，正则表达式常用于表单验证、字符串操作、文本解析等方面。