掌握JavaScript正则表达式从入门到精通 实用技巧与常见问题解决方案 提升代码效率的必备指南

威震华夏关云长

引言

正则表达式是处理文本的强大工具，在JavaScript中广泛应用于表单验证、数据提取、文本替换等场景。掌握正则表达式可以大大提升代码效率和开发体验。本文将从基础概念讲起，逐步深入到高级技巧和常见问题解决方案，帮助读者全面掌握JavaScript正则表达式。

正则表达式基础

正则表达式（Regular Expression）是一种用于描述字符串模式的工具。它由普通字符（如字母、数字）和特殊字符（称为”元字符”）组成，可以用来检查一个字符串是否含有某种模式、将匹配的pattern替换掉或者从某个字符串中取出符合某个子模式的字符串等。

基本语法

正则表达式由一系列字符和元字符组成。以下是一些基本的元字符：

• .：匹配除换行符以外的任意字符
• \d：匹配数字，等价于[0-9]
• \D：匹配非数字，等价于[^0-9]
• \w：匹配字母、数字、下划线，等价于[a-zA-Z0-9_]
• \W：匹配非字母、数字、下划线，等价于[^a-zA-Z0-9_]
• \s：匹配空白字符，包括空格、制表符、换行符等
• \S：匹配非空白字符
• ^：匹配字符串的开始
• $：匹配字符串的结束
• *：匹配前面的子表达式零次或多次
• +：匹配前面的子表达式一次或多次
• ?：匹配前面的子表达式零次或一次
• {n}：匹配前面的子表达式恰好n次
• {n,}：匹配前面的子表达式至少n次
• {n,m}：匹配前面的子表达式至少n次，最多m次

字符类

字符类用于匹配一组字符中的一个。可以使用方括号[]来定义字符类：

• [abc]：匹配a、b或c中的任意一个字符
• [^abc]：匹配除了a、b、c之外的任意字符
• [a-z]：匹配a到z之间的任意小写字母
• [A-Z]：匹配A到Z之间的任意大写字母
• [0-9]：匹配0到9之间的任意数字

分组和引用

使用圆括号()可以对正则表达式进行分组，分组后的表达式可以作为一个整体进行量词操作，也可以在后续进行引用：

• (pattern)：匹配pattern并捕获匹配，可以使用\1、\2等引用
• (?:pattern)：匹配pattern但不捕获匹配
• (?=pattern)：正向预查，匹配pattern前面的位置
• (?!pattern)：负向预查，匹配不在pattern前面的位置

JavaScript中的正则表达式

在JavaScript中，正则表达式可以通过两种方式创建：字面量和构造函数。

创建正则表达式

2. const pattern = /pattern/flags;

复制代码

2. const pattern = new RegExp('pattern', 'flags');

复制代码

其中，flags是可选的修饰符，包括：

• g：全局匹配，找到所有匹配项，而不是在找到第一个匹配项后停止
• i：忽略大小写
• m：多行模式，^和$可以匹配每行的开始和结束
• u：Unicode模式，正确处理UTF-16编码的字符
• y：粘滞模式，只从目标字符串的当前位置开始匹配

正则表达式方法

JavaScript中的RegExp对象提供了几个方法用于执行匹配操作：

test()方法用于测试字符串是否匹配正则表达式，返回true或false。

2. const pattern = /hello/;
3. console.log(pattern.test('hello world')); // true
4. console.log(pattern.test('hi world'));    // false

复制代码

exec()方法用于执行匹配，返回匹配结果的数组，如果没有匹配则返回null。

2. const pattern = /(\d{4})-(\d{2})-(\d{2})/;
3. const result = pattern.exec('Date: 2023-07-15');
4. console.log(result);
5. // 输出: ["2023-07-15", "2023", "07", "15", index: 6, input: "Date: 2023-07-15", groups: undefined]

复制代码

字符串方法

JavaScript中的String对象也提供了几个接受正则表达式作为参数的方法：

match()方法用于检索字符串中与正则表达式匹配的结果，返回一个数组，如果没有匹配则返回null。

2. const str = 'The quick brown fox jumps over the lazy dog.';
3. const pattern = /the/gi;
4. console.log(str.match(pattern));
5. // 输出: ["The", "the"]

复制代码

search()方法用于检索字符串中与正则表达式匹配的子串的起始位置，如果没有匹配则返回-1。

2. const str = 'The quick brown fox jumps over the lazy dog.';
3. const pattern = /fox/i;
4. console.log(str.search(pattern)); // 输出: 16

复制代码

replace()方法用于替换字符串中与正则表达式匹配的子串。

2. const str = 'The quick brown fox jumps over the lazy dog.';
3. const pattern = /fox/i;
4. console.log(str.replace(pattern, 'cat'));
5. // 输出: "The quick brown cat jumps over the lazy dog."

复制代码

split()方法用于将字符串分割为字符串数组。

2. const str = 'apple, banana, orange, grape';
3. const pattern = /\s*,\s*/;
4. console.log(str.split(pattern));
5. // 输出: ["apple", "banana", "orange", "grape"]

复制代码

正则表达式属性

JavaScript中的RegExp对象有几个属性可以提供关于正则表达式的信息：

• source：返回正则表达式的文本
• flags：返回正则表达式的修饰符
• global：检查是否设置了”g”修饰符
• ignoreCase：检查是否设置了”i”修饰符
• multiline：检查是否设置了”m”修饰符
• unicode：检查是否设置了”u”修饰符
• sticky：检查是否设置了”y”修饰符
• lastIndex：返回或设置要匹配的起始位置

2. const pattern = /test/gi;
3. console.log(pattern.source);     // 输出: "test"
4. console.log(pattern.flags);      // 输出: "gi"
5. console.log(pattern.global);     // 输出: true
6. console.log(pattern.ignoreCase); // 输出: true
7. console.log(pattern.multiline);  // 输出: false

复制代码

常用正则表达式模式

在实际开发中，有一些常用的正则表达式模式可以帮助我们快速解决常见问题。

数字相关

2. // 正整数
3. const positiveInteger = /^[1-9]\d*$/;
4. console.log(positiveInteger.test('123'));    // true
5. console.log(positiveInteger.test('0123'));   // false
6. console.log(positiveInteger.test('-123'));   // false
8. // 负整数
9. const negativeInteger = /^-[1-9]\d*$/;
10. console.log(negativeInteger.test('-123'));   // true
11. console.log(negativeInteger.test('123'));    // false
12. console.log(negativeInteger.test('-0123'));  // false
14. // 整数（包括正整数、负整数和0）
15. const integer = /^(0|-?[1-9]\d*)$/;
16. console.log(integer.test('0'));      // true
17. console.log(integer.test('123'));    // true
18. console.log(integer.test('-123'));   // true
19. console.log(integer.test('0123'));   // false

复制代码

2. // 正浮点数
3. const positiveFloat = /^[1-9]\d*\.\d+$|^0\.\d+$/;
4. console.log(positiveFloat.test('3.14'));    // true
5. console.log(positiveFloat.test('0.14'));    // true
6. console.log(positiveFloat.test('123'));     // false
7. console.log(positiveFloat.test('-3.14'));   // false
9. // 负浮点数
10. const negativeFloat = /^-[1-9]\d*\.\d+$|^-0\.\d+$/;
11. console.log(negativeFloat.test('-3.14'));   // true
12. console.log(negativeFloat.test('-0.14'));   // true
13. console.log(negativeFloat.test('3.14'));    // false
15. // 浮点数（包括正浮点数、负浮点数和0）
16. const float = /^(0|-?[1-9]\d*)(\.\d+)?$/;
17. console.log(float.test('0'));       // true
18. console.log(float.test('3.14'));    // true
19. console.log(float.test('-3.14'));   // true
20. console.log(float.test('0.14'));    // true
21. console.log(float.test('-0.14'));   // true
22. console.log(float.test('123'));     // true
23. console.log(float.test('-123'));    // true

复制代码

2. // 0-100之间的数字，可以包含两位小数
3. const range0to100 = /^(100|0?\d(\.\d{1,2})?)$/;
4. console.log(range0to100.test('0'));      // true
5. console.log(range0to100.test('100'));    // true
6. console.log(range0to100.test('50.5'));   // true
7. console.log(range0to100.test('50.55'));  // true
8. console.log(range0to100.test('50.555')); // false
9. console.log(range0to100.test('101'));    // false

复制代码

字符串相关

2. const email = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
3. console.log(email.test('example@example.com'));     // true
4. console.log(email.test('example@example.co.uk'));   // true
5. console.log(email.test('example@example'));         // false
6. console.log(email.test('example.com'));             // false

复制代码

2. // 简单的中国手机号验证
3. const phone = /^1[3-9]\d{9}$/;
4. console.log(phone.test('13812345678'));   // true
5. console.log(phone.test('15812345678'));   // true
6. console.log(phone.test('10812345678'));   // false
7. console.log(phone.test('1381234567'));    // false

复制代码

2. const url = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
3. console.log(url.test('http://www.example.com'));      // true
4. console.log(url.test('https://www.example.com'));     // true
5. console.log(url.test('www.example.com'));             // true
6. console.log(url.test('example.com'));                 // true
7. console.log(url.test('http://example.com/path'));     // true
8. console.log(url.test('http://example.com/path?query=param'));  // true
9. console.log(url.test('ftp://example.com'));           // false

复制代码

2. // 简单的中国身份证号验证（15位或18位）
3. const idCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
4. console.log(idCard.test('123456789012345'));    // true
5. console.log(idCard.test('123456789012345678'));  // true
6. console.log(idCard.test('12345678901234567X'));  // true
7. console.log(idCard.test('1234567890123456'));    // false

复制代码

2. // 至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，长度在8-20之间
3. const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
4. console.log(strongPassword.test('Password123!'));     // true
5. console.log(strongPassword.test('password123!'));     // false (缺少大写字母)
6. console.log(strongPassword.test('PASSWORD123!'));     // false (缺少小写字母)
7. console.log(strongPassword.test('Password!'));        // false (缺少数字)
8. console.log(strongPassword.test('Password123'));      // false (缺少特殊字符)
9. console.log(strongPassword.test('Pass1!'));           // false (长度太短)

复制代码

日期和时间

2. const date = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
3. console.log(date.test('2023-07-15'));    // true
4. console.log(date.test('2023-02-28'));    // true
5. console.log(date.test('2023-02-29'));    // true (不考虑闰年)
6. console.log(date.test('2023-13-15'));    // false
7. console.log(date.test('2023-07-32'));    // false
8. console.log(date.test('2023-7-15'));     // false

复制代码

2. const time = /^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/;
3. console.log(time.test('12:34:56'));     // true
4. console.log(time.test('23:59:59'));     // true
5. console.log(time.test('00:00:00'));     // true
6. console.log(time.test('24:00:00'));     // false
7. console.log(time.test('12:60:00'));     // false
8. console.log(time.test('12:34:5'));      // false

复制代码

高级技巧

掌握了基础知识和常用模式后，我们来学习一些高级技巧，这些技巧可以帮助我们更灵活地使用正则表达式。

贪婪与非贪婪匹配

默认情况下，正则表达式是贪婪的，会尽可能多地匹配字符。通过在量词后面加上?，可以使其变为非贪婪模式，尽可能少地匹配字符。

2. const str = '<div>content1</div><div>content2</div>';
4. // 贪婪匹配
5. const greedyPattern = /<div>.*<\/div>/;
6. console.log(str.match(greedyPattern)[0]);
7. // 输出: "<div>content1</div><div>content2</div>"
9. // 非贪婪匹配
10. const nonGreedyPattern = /<div>.*?<\/div>/;
11. console.log(str.match(nonGreedyPattern)[0]);
12. // 输出: "<div>content1</div>"

复制代码

回溯

回溯是正则表达式引擎的一种工作方式，当有多种匹配可能时，引擎会尝试一种可能，如果后续匹配失败，则回退到之前的状态尝试其他可能。虽然回溯是强大的，但也可能导致性能问题。

2. const str = 'aaaaaaaaaaaaaaaaaaaaX';
3. // 这个正则表达式会导致大量的回溯
4. const problematicPattern = /^(a+)+$/;
5. console.log(problematicPattern.test(str)); // true，但可能会很慢
7. // 优化后的正则表达式
8. const optimizedPattern = /^a+$/;
9. console.log(optimizedPattern.test(str)); // true，且速度快

复制代码

断言

断言用于匹配某些位置，而不是实际的字符。JavaScript支持正向断言和负向断言。

正向先行断言(?=pattern)表示匹配的位置后面必须跟着pattern，但不包括在匹配结果中。

2. const str = 'windows10 windows11 windows12';
3. // 匹配后面跟着数字的windows
4. const pattern = /windows(?=\d+)/g;
5. console.log(str.match(pattern));
6. // 输出: ["windows", "windows", "windows"]

复制代码

负向先行断言(?!pattern)表示匹配的位置后面不能跟着pattern。

2. const str = 'windows10 windowsX windows12';
3. // 匹配后面不跟着数字的windows
4. const pattern = /windows(?!\d+)/g;
5. console.log(str.match(pattern));
6. // 输出: ["windowsX"]

复制代码

ES2018引入了正向后行断言(?<=pattern)，表示匹配的位置前面必须是pattern，但不包括在匹配结果中。

2. const str = '$10 $20 $30';
3. // 匹配前面是$的数字
4. const pattern = /(?<=\$)\d+/g;
5. console.log(str.match(pattern));
6. // 输出: ["10", "20", "30"]

复制代码

ES2018也引入了负向后行断言(?<!pattern)，表示匹配的位置前面不能是pattern。

2. const str = '10 $20 30';
3. // 匹配前面不是$的数字
4. const pattern = /(?<!\$)\d+/g;
5. console.log(str.match(pattern));
6. // 输出: ["10", "30"]

复制代码

捕获组和非捕获组

圆括号()可以创建捕获组，匹配的内容会被记住，可以通过\1、\2等方式引用，或者在结果数组中获取。如果不需要捕获匹配的内容，可以使用非捕获组(?:pattern)。

2. const str = '2023-07-15';
3. // 使用捕获组
4. const capturingPattern = /(\d{4})-(\d{2})-(\d{2})/;
5. const result = capturingPattern.exec(str);
6. console.log(result[1]); // 输出: "2023"
7. console.log(result[2]); // 输出: "07"
8. console.log(result[3]); // 输出: "15"
10. // 使用非捕获组
11. const nonCapturingPattern = /(?:\d{4})-(\d{2})-(\d{2})/;
12. const result2 = nonCapturingPattern.exec(str);
13. console.log(result2[1]); // 输出: "07"
14. console.log(result2[2]); // 输出: "15"

复制代码

命名捕获组

ES2018引入了命名捕获组，可以使用(?<name>pattern)的语法为捕获组命名，使代码更易读。

2. const str = '2023-07-15';
3. // 使用命名捕获组
4. const namedPattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
5. const result = namedPattern.exec(str);
6. console.log(result.groups.year);  // 输出: "2023"
7. console.log(result.groups.month); // 输出: "07"
8. console.log(result.groups.day);   // 输出: "15"

复制代码

原子组

原子组(?>pattern)是一旦匹配就不会回退的组，可以提高正则表达式的性能，避免不必要的回溯。

2. const str = 'aaaaaaaaaaaaaaaaaaaaX';
3. // 使用原子组防止回溯
4. const atomicPattern = /^(?>a+)+$/;
5. console.log(atomicPattern.test(str)); // true，且速度快

复制代码

性能优化

正则表达式虽然强大，但如果使用不当，可能会导致性能问题。以下是一些优化正则表达式性能的技巧。

避免回溯

回溯是正则表达式性能问题的常见原因。以下是一些避免回溯的技巧：

1. 使用具体字符代替.，因为.会匹配除换行符外的任何字符，可能导致大量回溯。
2. 使用原子组(?>pattern)防止回溯。
3. 使用占有量词*+、++、?+、{n,m}+，这些量词一旦匹配就不会回退。

2. // 不好的写法，可能导致大量回溯
3. const badPattern = /^(a+)+$/;
5. // 好的写法，避免回溯
6. const goodPattern = /^a+$/;

复制代码

使用非捕获组

如果不需要引用匹配的内容，使用非捕获组(?:pattern)代替捕获组()，可以提高性能。

2. // 不好的写法，使用捕获组
3. const badPattern = /(\d{4})-(\d{2})-(\d{2})/;
5. // 好的写法，使用非捕获组
6. const goodPattern = /(?:\d{4})-(?:\d{2})-(?:\d{2})/;

复制代码

使用具体字符类

使用具体的字符类代替.或\w等通用字符类，可以减少匹配的可能性，提高性能。

2. // 不好的写法，使用通用字符类
3. const badPattern = /^.+@.+\..+$/;
5. // 好的写法，使用具体字符类
6. const goodPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

复制代码

避免嵌套量词

嵌套量词如(a+)*会导致指数级的回溯，应该避免使用。

2. // 不好的写法，使用嵌套量词
3. const badPattern = /^(a+)*$/;
5. // 好的写法，避免嵌套量词
6. const goodPattern = /^a*$/;

复制代码

使用锚点

使用^和$锚点可以限制匹配的位置，避免不必要的匹配尝试。

2. // 不好的写法，没有使用锚点
3. const badPattern = /\d{4}-\d{2}-\d{2}/;
5. // 好的写法，使用锚点
6. const goodPattern = /^\d{4}-\d{2}-\d{2}$/;

复制代码

预编译正则表达式

如果正则表达式会被多次使用，可以预编译正则表达式，避免重复解析。

2. // 不好的写法，每次使用都重新解析
3. function validateEmail(email) {
4.   return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
5. }
7. // 好的写法，预编译正则表达式
8. const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
9. function validateEmail(email) {
10.   return emailPattern.test(email);
11. }

复制代码

常见问题与解决方案

在使用正则表达式时，我们可能会遇到一些常见问题。下面是一些常见问题及其解决方案。

问题1：匹配特殊字符

正则表达式中的许多字符具有特殊含义，如.,*,+,?,|,\,(,),[,],{,},^,$。如果要匹配这些字符本身，需要使用反斜杠\进行转义。

2. const str = '3.14 * 2 = 6.28';
3. // 不好的写法，没有转义特殊字符
4. const badPattern = /./;
5. console.log(str.match(badPattern));
6. // 输出: ["3", index: 0, input: "3.14 * 2 = 6.28", groups: undefined]
8. // 好的写法，转义特殊字符
9. const goodPattern = /\./;
10. console.log(str.match(goodPattern));
11. // 输出: [".", index: 1, input: "3.14 * 2 = 6.28", groups: undefined]

复制代码

问题2：匹配换行符

默认情况下，.不匹配换行符。如果要匹配包括换行符在内的任意字符，可以使用[\s\S]或设置s标志（dotAll模式）。

2. const str = 'Line 1\nLine 2';
3. // 不好的写法，.不匹配换行符
4. const badPattern = /Line 1.*Line 2/;
5. console.log(badPattern.test(str)); // false
7. // 好的写法1，使用[\s\S]匹配任意字符
8. const goodPattern1 = /Line 1[\s\S]*Line 2/;
9. console.log(goodPattern1.test(str)); // true
11. // 好的写法2，使用s标志（dotAll模式）
12. const goodPattern2 = /Line 1.*Line 2/s;
13. console.log(goodPattern2.test(str)); // true

复制代码

问题3：匹配单词边界

单词边界\b匹配单词和非单词之间的位置，可以用来精确匹配单词。

2. const str = 'The cat scattered his food all over the floor.';
3. // 不好的写法，会匹配到"cat"和"scattered"中的"cat"
4. const badPattern = /cat/;
5. console.log(str.match(badPattern));
6. // 输出: ["cat", index: 4, input: "The cat scattered his food all over the floor.", groups: undefined]
8. // 好的写法，使用单词边界精确匹配"cat"
9. const goodPattern = /\bcat\b/;
10. console.log(str.match(goodPattern));
11. // 输出: ["cat", index: 4, input: "The cat scattered his food all over the floor.", groups: undefined]

复制代码

问题4：处理Unicode字符

JavaScript中的正则表达式默认是基于16位UTF-16编码的，这可能导致处理一些Unicode字符时出现问题。使用u标志可以启用Unicode模式。

2. const str = '😊';
3. // 不好的写法，不能正确匹配emoji
4. const badPattern = /^.$/;
5. console.log(badPattern.test(str)); // false
7. // 好的写法，使用u标志启用Unicode模式
8. const goodPattern = /^.$/u;
9. console.log(goodPattern.test(str)); // true

复制代码

问题5：调试正则表达式

调试正则表达式可能比较困难，以下是一些调试技巧：

1. 使用在线正则表达式测试工具，如regex101.com、regexr.com等。
2. 使用RegExp.prototype.toString()方法查看正则表达式的字符串表示。
3. 使用console.log()输出匹配结果，逐步调试。

2. const pattern = /(\d{4})-(\d{2})-(\d{2})/;
3. const str = 'Date: 2023-07-15';
5. // 输出正则表达式的字符串表示
6. console.log(pattern.toString()); // 输出: "/(\d{4})-(\d{2})-(\d{2})/"
8. // 输出匹配结果
9. const result = pattern.exec(str);
10. console.log(result);
11. // 输出: ["2023-07-15", "2023", "07", "15", index: 6, input: "Date: 2023-07-15", groups: undefined]

复制代码

实战案例

下面是一些实际项目中使用正则表达式的案例。

案例1：表单验证

2. // 验证表单数据
3. function validateForm(formData) {
4.   const errors = {};
5.   
6.   // 验证用户名：4-16位字母、数字、下划线
7.   const usernamePattern = /^[a-zA-Z0-9_]{4,16}$/;
8.   if (!usernamePattern.test(formData.username)) {
9.     errors.username = '用户名必须是4-16位字母、数字、下划线';
10.   }
11.   
12.   // 验证邮箱
13.   const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
14.   if (!emailPattern.test(formData.email)) {
15.     errors.email = '请输入有效的邮箱地址';
16.   }
17.   
18.   // 验证手机号
19.   const phonePattern = /^1[3-9]\d{9}$/;
20.   if (!phonePattern.test(formData.phone)) {
21.     errors.phone = '请输入有效的手机号';
22.   }
23.   
24.   // 验证密码：至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，长度在8-20之间
25.   const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
26.   if (!passwordPattern.test(formData.password)) {
27.     errors.password = '密码必须包含大小写字母、数字和特殊字符，长度在8-20之间';
28.   }
29.   
30.   // 验证身份证号
31.   const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
32.   if (!idCardPattern.test(formData.idCard)) {
33.     errors.idCard = '请输入有效的身份证号';
34.   }
35.   
36.   return {
37.     isValid: Object.keys(errors).length === 0,
38.     errors
39.   };
40. }
42. // 使用示例
43. const formData = {
44.   username: 'user123',
45.   email: 'user@example.com',
46.   phone: '13812345678',
47.   password: 'Password123!',
48.   idCard: '123456789012345678'
49. };
51. const validation = validateForm(formData);
52. console.log(validation.isValid); // true
53. console.log(validation.errors);  // {}

复制代码

案例2：数据提取

2. // 从HTML中提取所有链接
3. function extractLinks(html) {
4.   const linkPattern = /<a\s+(?:[^>]*?\s+)?href="([^"]*)"/gi;
5.   const links = [];
6.   let match;
7.   
8.   while ((match = linkPattern.exec(html)) !== null) {
9.     links.push(match[1]);
10.   }
11.   
12.   return links;
13. }
15. // 使用示例
16. const html = `
17. <html>
18.   <body>
19.     <a href="https://example.com">Example</a>
20.     <a href="https://google.com">Google</a>
21.     <a href="https://github.com">GitHub</a>
22.   </body>
23. </html>
24. `;
26. const links = extractLinks(html);
27. console.log(links);
28. // 输出: ["https://example.com", "https://google.com", "https://github.com"]

复制代码

案例3：文本替换

2. // 将文本中的URL转换为链接
3. function urlToLink(text) {
4.   const urlPattern = /(https?:\/\/[^\s]+)/g;
5.   return text.replace(urlPattern, '<a href="$1">$1</a>');
6. }
8. // 使用示例
9. const text = 'Visit https://example.com or https://google.com for more information.';
10. const linkedText = urlToLink(text);
11. console.log(linkedText);
12. // 输出: "Visit <a href="https://example.com">https://example.com</a> or <a href="https://google.com">https://google.com</a> for more information."

复制代码

案例4：数据清洗

2. // 清理用户输入，移除特殊字符和多余空格
3. function cleanInput(input) {
4.   // 移除首尾空格
5.   let cleaned = input.trim();
6.   // 将多个连续空格替换为一个空格
7.   cleaned = cleaned.replace(/\s+/g, ' ');
8.   // 移除特殊字符，只保留字母、数字、中文和基本标点
9.   cleaned = cleaned.replace(/[^\w\u4e00-\u9fa5\s.,!?;:()'"-]/g, '');
10.   return cleaned;
11. }
13. // 使用示例
14. const input = '  Hello, 世界！  This is a test...  ';
15. const cleaned = cleanInput(input);
16. console.log(cleaned);
17. // 输出: "Hello, 世界！ This is a test..."

复制代码

案例5：日志分析

2. // 解析Apache访问日志
3. function parseApacheLog(logLine) {
4.   const logPattern = /^(\S+) \S+ \S+ \[([\w:/]+\s[+\-]\d{4})\] "(\S+) (\S+) (\S+)" (\d{3}) (\d+|-) "([^"]*)" "([^"]*)"/;
5.   const match = logPattern.exec(logLine);
6.   
7.   if (match) {
8.     return {
9.       ip: match[1],
10.       timestamp: match[2],
11.       method: match[3],
12.       url: match[4],
13.       protocol: match[5],
14.       status: match[6],
15.       size: match[7],
16.       referer: match[8],
17.       userAgent: match[9]
18.     };
19.   }
20.   
21.   return null;
22. }
24. // 使用示例
25. const logLine = '127.0.0.1 - - [25/Dec/2023:10:00:00 +0000] "GET /index.html HTTP/1.1" 200 1234 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"';
26. const logData = parseApacheLog(logLine);
27. console.log(logData);
28. // 输出: {
29. //   ip: "127.0.0.1",
30. //   timestamp: "25/Dec/2023:10:00:00 +0000",
31. //   method: "GET",
32. //   url: "/index.html",
33. //   protocol: "HTTP/1.1",
34. //   status: "200",
35. //   size: "1234",
36. //   referer: "-",
37. //   userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
38. // }

复制代码

总结与进阶学习资源

正则表达式是JavaScript中处理文本的强大工具，掌握它可以大大提升代码效率和开发体验。本文从基础概念讲起，逐步深入到高级技巧和常见问题解决方案，帮助读者全面掌握JavaScript正则表达式。

进阶学习资源

1. MDN - Regular expressions：MDN上的正则表达式指南，详细介绍了JavaScript中的正则表达式。
2. Regex101：在线正则表达式测试工具，支持多种语言，提供详细的解释和调试功能。
3. RegExr：另一个在线正则表达式测试工具，提供丰富的参考资料和示例。
4. Mastering Regular Expressions：正则表达式经典书籍，深入介绍了正则表达式的原理和应用。
5. JavaScript RegExp Reference：W3Schools上的JavaScript RegExp参考手册，提供了快速查询的语法和方法列表。

最佳实践

1. 保持简单：尽量使用简单明了的正则表达式，避免过度复杂的模式。
2. 添加注释：对于复杂的正则表达式，添加注释解释其工作原理。
3. 测试边界情况：测试各种边界情况，确保正则表达式在各种情况下都能正确工作。
4. 考虑性能：避免使用可能导致大量回溯的正则表达式，特别是在处理大量文本时。
5. 使用适当的工具：使用在线工具测试和调试正则表达式，提高开发效率。

通过不断学习和实践，你将能够熟练掌握JavaScript正则表达式，并在实际项目中灵活应用，提升代码效率和开发体验。