JavaScript正则表达式从入门到精通：语法详解与实战应用

JavaScript正则表达式完整使用指南

正则表达式是处理字符串的强大工具，在JavaScript中，它被广泛用于表单验证、数据提取、文本替换等场景。本文将从创建到高级用法，系统讲解JavaScript正则表达式的所有核心知识点。

一、正则表达式的创建方式

JavaScript提供两种创建正则表达式的方式：字面量和构造函数。

1. 字面量语法

使用斜杠/pattern/flags的形式创建，这是最常用的方式，性能也更好。

let pattern1 = /hello/;
let pattern2 = /hello/gi;

2. 构造函数语法

使用new RegExp(pattern, flags)创建，适用于模式字符串动态生成的情况。

let pattern1 = new RegExp('hello');
let pattern2 = new RegExp('hello', 'gi');

二、正则表达式常用方法

正则表达式对象主要提供两个方法：test()和exec()。字符串对象也有多个配合正则的方法。

1. test()方法

判断字符串中是否存在匹配的模式，返回布尔值。

let pattern = /world/;
let str = 'Hello world!';
console.log(pattern.test(str)); // true

2. exec()方法

返回匹配结果的详细信息数组，如果没有任何匹配则返回null。

let pattern = /l{2}/;
let str = 'Hello world';
let matches = pattern.exec(str);
console.log(matches);
// ["ll", index: 2, input: "Hello world"]

3. match()方法

字符串方法，返回匹配结果的数组，可以配合全局标志g。

let str = 'apple, banana, apple';
let pattern = /apple/g;
let matches = str.match(pattern);
console.log(matches); // ["apple", "apple"]

4. replace()方法

字符串方法，用指定的替换值替换匹配的子串。

let str = 'Hello world!';
let pattern = /world/;
let newStr = str.replace(pattern, 'JavaScript');
console.log(newStr); // Hello JavaScript!

5. split()方法

字符串方法，根据正则表达式分割字符串为数组。

let str = '2024-01-15';
let pattern = /-/;
let parts = str.split(pattern);
console.log(parts); // ["2024", "01", "15"]

6. search()方法

字符串方法，返回第一个匹配的起始位置，找不到返回-1。

let str = 'Welcome to ipipp.com';
let pattern = /ipipp/;
console.log(str.search(pattern)); // 11

三、正则表达式常用模式

熟练掌握常用模式能快速解决实际开发中的问题。

1. 字符类

• [abc]：匹配a、b或c中的任意一个
• [^abc]：匹配除了a、b、c以外的任意字符
• [a-z]：匹配小写字母
• .：匹配除换行符之外的任意字符
• \d：匹配数字，等价于[0-9]
• \w：匹配单词字符（字母、数字、下划线）
• \s：匹配空白字符（空格、制表符、换行符）

let emailPattern = /^[\w.-]+@[\w.-]+\.\w+$/;
let testEmail = 'user@ipipp.com';
console.log(emailPattern.test(testEmail)); // true

2. 量词

• *：匹配前面的模式零次或多次
• +：匹配前面的模式一次或多次
• ?：匹配前面的模式零次或一次
• {n}：精确匹配n次
• {n,}：至少匹配n次
• {n,m}：匹配n到m次

let phonePattern = /^\d{11}$/;
let testPhone = '13812345678';
console.log(phonePattern.test(testPhone)); // true

let floatPattern = /\d+\.\d+/;
let testFloat = '3.14';
console.log(floatPattern.test(testFloat)); // true

3. 分组与捕获

用小括号()创建捕获组，可以通过$1、$2等引用。

let dateStr = '2024/01/15';
let datePattern = /(\d{4})\/(\d{2})\/(\d{2})/;
let newDateStr = dateStr.replace(datePattern, '$1年$2月$3日');
console.log(newDateStr); // 2024年01月15日

4. 边界匹配

• ^：匹配字符串开头
• $：匹配字符串结尾
• \b：匹配单词边界
• \B：匹配非单词边界

let urlPattern = /^https?:\/\/[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let testUrl = 'https://ipipp.com';
console.log(urlPattern.test(testUrl)); // true

四、正则表达式修饰符

修饰符用于控制匹配行为，常用的有三个：

let str = 'Hello hello HELLO';
let patternGi = /hello/gi;
let matchesGi = str.match(patternGi);
console.log(matchesGi); // ["Hello", "hello", "HELLO"]

let multiStr = 'Line1\nLine2\nLine3';
let multiPattern = /^Line/gm;
let multiMatches = multiStr.match(multiPattern);
console.log(multiMatches); // ["Line", "Line", "Line"]

五、实际应用案例

1. 验证手机号码

function validatePhone(phone) {
    let phonePattern = /^1[3-9]\d{9}$/;
    return phonePattern.test(phone);
}
console.log(validatePhone('13812345678')); // true
console.log(validatePhone('12345678901')); // false

2. 提取所有链接

function extractUrls(text) {
    let urlPattern = /https?:\/\/[^\s]+/g;
    return text.match(urlPattern);
}
let sampleText = 'Visit ipipp.com and https://ipipp.com/path for more info.';
console.log(extractUrls(sampleText));
// ["https://ipipp.com/path"]

3. 密码强度验证

function checkPasswordStrength(password) {
    let minLength = /.{8,}/;
    let hasUppercase = /[A-Z]/;
    let hasLowercase = /[a-z]/;
    let hasDigit = /\d/;
    let hasSpecial = /[!@#$%^&*]/;
    
    let score = 0;
    if (minLength.test(password)) score++;
    if (hasUppercase.test(password)) score++;
    if (hasLowercase.test(password)) score++;
    if (hasDigit.test(password)) score++;
    if (hasSpecial.test(password)) score++;
    
    return score;
}
console.log(checkPasswordStrength('Pass123!')); // 5（强密码）

六、常见陷阱与注意事项

1. 特殊字符需要转义

如果要匹配.、*、+、?、(、)等特殊字符本身，需要用反斜杠转义。

let dotPattern = /\./;
console.log(dotPattern.test('3.14')); // true

2. 贪婪与懒惰匹配

默认是贪婪匹配（尽可能多匹配），在量词后加?变成懒惰匹配（尽可能少匹配）。

let greedyPattern = /<.+>/;
let lazyPattern = /<.+?>/;
let html = '<p>content</p><span>text</span>';
console.log(html.match(greedyPattern)); // ["<p>content</p><span>text</span>"]
console.log(html.match(lazyPattern));  // ["<p>"]

3. 前瞻与后顾

前瞻断言(?=pattern)用于向前检查，后顾断言(?<=pattern)用于向后检查，但不消耗字符。

let lookaheadPattern = /\d(?=px)/;
let str = '10px 20em 30px';
console.log(str.match(lookaheadPattern)); // ["0"]（匹配后面有px的数字）

掌握这些基础知识后，你就能在项目中灵活运用正则表达式处理各种字符串操作了。建议在日常开发中多实践，逐步积累常用模式库，可以大幅提升编码效率。正则表达式的学习曲线虽然较陡，但一旦掌握，它将成为你最得力的字符串处理工具。

正则表达式JavaScript字符串匹配表单验证数据提取