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")); // false2. 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); // 106. 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")); // true2. 手机号验证
function validatePhone(phone) { var pattern = /^1[3-9]\d{9}$/; return pattern.test(phone); } console.log(validatePhone("13800138000")); // true3. 提取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 = "content1content2"; 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"]八、性能优化建议
- 预编译常用正则表达式，避免重复创建
- 避免过度使用通配符和回溯
- 使用具体字符类代替通用字符类
- 合理使用锚点提高匹配效率
- 对长文本使用非贪婪匹配
九、调试工具推荐
- RegExr：在线正则表达式测试工具
- Regex101：功能强大的正则表达式测试器
- 浏览器开发者工具：Console面板直接测试
通过本文的学习，您已经掌握了JS正则表达式的基本用法和高级技巧。正则表达式虽然学习曲线较陡，但一旦掌握，将极大提升您的字符串处理能力。建议多加练习，在实际项目中不断应用，逐步提升正则表达式的运用水平。
