JS正则表达式怎么用？从入门到精通完整指南

正则表达式是JavaScript中处理字符串的强大工具，广泛应用于表单验证、数据提取、文本搜索与替换等场景。本文将系统讲解JS正则表达式的使用方法，帮助您快速掌握这一核心技能。

一、什么是正则表达式？

正则表达式（Regular Expression）是一种用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象，可以通过字面量语法或构造函数创建。

二、创建正则表达式的两种方式

1. 字面量语法

// 语法：/pattern/flags
var regex = /abc/gi;
var result = "ABCabc".match(regex);
console.log(result); // ["ABC", "abc"]

2. 构造函数语法

// 语法：new RegExp(pattern, flags)
var regex = new RegExp("abc", "gi");
var result = "ABCabc".match(regex);
console.log(result); // ["ABC", "abc"]

三、常用正则表达式方法

1. test() 方法

检测字符串是否匹配模式，返回布尔值：

var pattern = /hello/;
console.log(pattern.test("hello world")); // true
console.log(pattern.test("hi world")); // false

2. exec() 方法

执行搜索匹配，返回包含匹配信息的数组或null：

var pattern = /\d+/g;
var str = "2023年5月20日";
var result = pattern.exec(str);
console.log(result); // ["2023"]

3. match() 方法

字符串方法，返回匹配结果数组：

var str = "价格：￥199，优惠价：￥159";
var matches = str.match(/\d+/g);
console.log(matches); // ["199", "159"]

4. replace() 方法

字符串替换方法：

var str = "Hello World";
var newStr = str.replace(/world/i, "JavaScript");
console.log(newStr); // "Hello JavaScript"

5. search() 方法

搜索匹配位置，返回索引或-1：

var str = "JavaScript正则表达式";
var pos = str.search(/正则/);
console.log(pos); // 10

6. split() 方法

使用正则分割字符串：

var str = "apple,banana;orange|grape";
var arr = str.split(/[,;|]/);
console.log(arr); // ["apple", "banana", "orange", "grape"]

四、正则表达式修饰符（Flags）

• g：全局匹配，查找所有匹配项
• i：忽略大小写
• m：多行匹配
• s：允许点号匹配换行符
• u：使用Unicode模式
• y：粘性匹配

五、常用正则表达式模式

1. 字符类

// 匹配数字
/\d/  // 匹配单个数字
/\D/  // 匹配非数字

// 匹配单词字符
/\w/  // 匹配字母、数字、下划线
/\W/  // 匹配非单词字符

// 匹配空白字符
/\s/  // 匹配空格、制表符、换行符
/\S/  // 匹配非空白字符

2. 量词

// 匹配0次或多次
/a*/  

// 匹配1次或多次
/a+/  

// 匹配0次或1次
/a?/  

// 匹配n次
/a{3}/  

// 匹配n到m次
/a{2,4}/  

// 匹配至少n次
/a{2,}/

3. 位置匹配

// 匹配开头
/^abc/  

// 匹配结尾
/xyz$/  

// 单词边界
/\bword\b/  

// 非单词边界
/\Bword\B/

六、实际应用示例

1. 邮箱验证

function validateEmail(email) {
    var pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return pattern.test(email);
}
console.log(validateEmail("test@example.com")); // true

2. 手机号验证

function validatePhone(phone) {
    var pattern = /^1[3-9]\d{9}$/;
    return pattern.test(phone);
}
console.log(validatePhone("13800138000")); // true

3. 提取URL参数

function getUrlParams(url) {
    var params = {};
    var pattern = /[?&]([^=#]+)=([^&#]*)/g;
    var match;
    while (match = pattern.exec(url)) {
        params[match[1]] = match[2];
    }
    return params;
}
console.log(getUrlParams("?name=张三&age=25")); // {name: "张三", age: "25"}

4. 格式化数字（千分位）

function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(formatNumber(1234567.89)); // "1,234,567.89"

七、常见问题与技巧

1. 贪婪匹配 vs 非贪婪匹配

// 贪婪匹配（默认）
var str = "
content1
content2
";
var greedy = str.match(/
.*<\/div>/)[0];
console.log(greedy); // 匹配整个字符串

// 非贪婪匹配（加?）
var nonGreedy = str.match(/
.*?<\/div>/)[0];
console.log(nonGreedy); // 只匹配第一个
content1

2. 分组与捕获

var str = "2023-05-20";
var pattern = /(\d{4})-(\d{2})-(\d{2})/;
var match = str.match(pattern);
console.log(match[1]); // "2023"
console.log(match[2]); // "05"
console.log(match[3]); // "20"

3. 前瞻与后顾断言

// 正向肯定前瞻
var str = "100元 200美元 300欧元";
var result = str.match(/\d+(?=元)/g);
console.log(result); // ["100"]

// 正向否定前瞻
var result2 = str.match(/\d+(?!元)/g);
console.log(result2); // ["20", "0", "30", "0"]

八、性能优化建议

1. 预编译常用正则表达式，避免重复创建
2. 避免过度使用通配符和回溯
3. 使用具体字符类代替通用字符类
4. 合理使用锚点提高匹配效率
5. 对长文本使用非贪婪匹配

九、调试工具推荐

• RegExr：在线正则表达式测试工具
• Regex101：功能强大的正则表达式测试器
• 浏览器开发者工具：Console面板直接测试

通过本文的学习，您已经掌握了JS正则表达式的基本用法和高级技巧。正则表达式虽然学习曲线较陡，但一旦掌握，将极大提升您的字符串处理能力。建议多加练习，在实际项目中不断应用，逐步提升正则表达式的运用水平。