EnlightenCode

📖 正则表达式学习指南 ​

原文引荐：JS正则表达式迷你书

🎨 第一章：正则表达式字符匹配攻略 ​

1. 两种模糊匹配方式 ​

1.1 横向模糊匹配 ↔️ ​

横向模糊指的是，一个正则可匹配的字符串长度不是固定的，可以是多种情况。

js
// 示例：匹配连续出现2-5次的字母b
const regex = /ab{2,5}c/g;
const string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log(string.match(regex));
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]

1.2 纵向模糊匹配 ↕️ ​

纵向模糊指的是，匹配的字符串中具体某个字符可以有多种可能。

js
// 示例：匹配a后面是1或2或3，然后是b的字符串
const regex = /a[123]b/g;
const string = "a0b a1b a2b a3b a4b";
console.log(string.match(regex));
// => ["a1b", "a2b", "a3b"]

2. 字符组 🎭 ​

2.1 基本概念 ​

虽然叫字符组（字符类），但实际上只匹配其中一个字符。 例如 [abc]，表示匹配一个字符，它可以是 "a"、"b"、"c" 之一。

2.2 范围表示法 📏 ​

js
// 使用连字符-来表示范围
[123456abcdefGHIJKLM] 可以写成 [1-6a-fG-M]

// 匹配 "-" 字符的方法：
[-az] 或 [az-] 或 [a\-z]  // 将-放在开头或结尾，或转义

2.3 排除字符组 ❌ ​

js
// 使用^表示取反
[^abc] // 表示除了abc之外的任意字符

2.4 常见简写形式 📝 ​

js
\d  [0-9] 一位数字
\D  [^0-9] 除数字外的任意字符
\w  [0-9a-zA-Z_] 数字、字母、下划线
\W  [^0-9a-zA-Z_] 非单词字符
\s  [ \t\v\n\r\f] 空白符
\S  [^ \t\v\n\r\f] 非空白符
.   [^\n\r\u2028\u2029] 通配符

3. 量词 🔢 ​

3.1 基本量词 ​

js
{m,}  至少出现m次
{m}   等价于{m,m}，出现m次
?     等价于{0,1}，出现或不出现
+     等价于{1,}，至少出现一次
*     等价于{0,}，出现任意次

3.2 贪婪与惰性匹配 🐯 ​

js
// 贪婪匹配（默认）
const regex = /\d{2,5}/g;
const string = "123 1234 12345 123456";
console.log(string.match(regex));
// => ["123", "1234", "12345", "12345"]

// 惰性匹配（在量词后加?）
const regex = /\d{2,5}?/g;
console.log(string.match(regex));
// => ["12", "12", "34", "12", "34", "12", "34", "56"]

4. 多选分支 🔀 ​

使用 | 实现"或"的效果：

js
const regex = /good|nice/;  // 匹配"good"或"nice"

5. 实战案例 💡 ​

5.1 匹配16进制颜色值 ​

js
const regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
const string = "#ffbbad #Fc01DF #FFF #ffE";
console.log(string.match(regex));
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

5.2 匹配时间 ​

js
// 24小时制时间（精确）
const regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
console.log(regex.test("23:59")); // => true
console.log(regex.test("02:07")); // => true

// 24小时制时间（宽松）
const regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log(regex.test("7:9")); // => true

5.3 匹配日期 ​

js
const regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log(regex.test("2017-06-10")); // => true

💡 最佳实践 ​

  1. 使用正则测试网站验证表达式
  2. 复杂正则要写注释说明
  3. 考虑使用命名捕获组提高可读性
  4. 注意性能，避免回溯陷阱

📚 参考资料 ​