总结一期正则表达式

概述

正则表达式（Regular Expression）是编程语言中不可或缺的强大工具，无论是表单验证、字符串处理还是数据提取，正则表达式都能大显身手。本文将全面介绍正则表达式在前端开发中的应用，从基础语法到高级技巧，帮助开发者掌握这一利器。

一、正则表达式基础

1.1 什么是正则表达式

正则表达式是一种用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象，可以用于RegExp的exec和test方法，以及String的match、replace、search和split方法。

// 创建正则表达式的两种方式
const regex1 = /pattern/;          // 字面量形式
const regex2 = new RegExp('pattern'); // 构造函数形式

1.2 基本匹配规则

正则表达式由普通字符（如字母a到z）和特殊字符（称为"元字符"）组成。以下是一些最基本的匹配规则：

• . - 匹配除换行符之外的任何单个字符
• \d - 匹配数字，等价于[0-9]
• \D - 匹配非数字字符，等价于[^0-9]
• \w - 匹配字母、数字或下划线，等价于[A-Za-z0-9_]
• \W - 匹配非字母、数字、下划线字符
• \s - 匹配空白字符（空格、制表符、换行符等）
• \S - 匹配非空白字符

// 示例：匹配手机号码
const phoneRegex = /1\d{10}/;
console.log(phoneRegex.test('13800138000')); // true

二、正则表达式进阶语法

2.1 量词与重复

量词用于指定某个模式出现的次数：

• * - 匹配前一个表达式0次或多次
• + - 匹配前一个表达式1次或多次
• ? - 匹配前一个表达式0次或1次
• {n} - 匹配前一个表达式恰好n次
• {n,} - 匹配前一个表达式至少n次
• {n,m} - 匹配前一个表达式至少n次，最多m次

// 匹配QQ号（5-11位数字）
const qqRegex = /^[1-9]\d{4,10}$/;
console.log(qqRegex.test('12345')); // true
console.log(qqRegex.test('012345')); // false（不能以0开头）

2.2 字符集合与范围

使用方括号[]可以定义一个字符集合，匹配其中任意一个字符：

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

// 匹配16进制颜色值
const colorRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
console.log(colorRegex.test('#fff')); // true
console.log(colorRegex.test('#ffffff')); // true
console.log(colorRegex.test('#ggg')); // false

2.3 分组与捕获

使用圆括号()可以创建捕获组，匹配的内容会被记住，可以在后面引用：

• (pattern) - 匹配并记住匹配项
• (?:pattern) - 匹配但不记住匹配项（非捕获组）
• \n - 引用第n个捕获组（n为正整数）

// 匹配日期并提取年、月、日
const dateRegex = /(\d{4})-(\d{2})-(\d{2})/;
const match = dateRegex.exec('2023-05-20');
console.log(match[1]); // "2023"（年）
console.log(match[2]); // "05"（月）
console.log(match[3]); // "20"（日）

三、正则表达式在前端中的应用

3.1 表单验证

表单验证是正则表达式在前端中最常见的应用场景之一。

// 邮箱验证
function validateEmail(email) {
  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}

// 密码强度验证（至少8位，包含大小写字母和数字）
function validatePassword(password) {
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
  return regex.test(password);
}

// 身份证号验证（简单版）
function validateIDCard(id) {
  const regex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
  return regex.test(id);
}

3.2 字符串处理

正则表达式可以高效地进行复杂的字符串操作：

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

// 驼峰命名转连字符命名
function camelToHyphen(str) {
  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
console.log(camelToHyphen('backgroundColor')); // "background-color"

// 去除HTML标签
function stripTags(html) {
  return html.replace(/<[^>]+>/g, '');
}

3.3 URL解析

使用正则表达式可以方便地从URL中提取各种信息：

function parseURL(url) {
  const regex = /^(https?:\/\/)?([^\/\?:]+)(:(\d+))?([\/\?:][^#]*)?(#.*)?$/;
  const match = regex.exec(url);
  
  return {
    protocol: match[1] || 'http://',
    host: match[2],
    port: match[4] || (match[1] && match[1].includes('https') ? '443' : '80'),
    path: match[5] || '/',
    hash: match[6] || ''
  };
}

console.log(parseURL('https://www.example.com:8080/path/to/page?query=string#hash'));

四、JavaScript中的正则表达式API

4.1 RegExp对象方法

• test() - 测试字符串是否匹配正则表达式，返回布尔值
• exec() - 执行正则表达式匹配，返回匹配结果数组或null

const regex = /hello (\w+)/;
console.log(regex.test('hello world')); // true

const result = regex.exec('hello world');
console.log(result[0]); // "hello world"（完整匹配）
console.log(result[1]); // "world"（第一个捕获组）

4.2 String对象方法

• match() - 检索字符串中与正则表达式匹配的结果
• search() - 测试字符串是否匹配正则表达式，返回匹配位置的索引
• replace() - 替换字符串中与正则表达式匹配的部分
• split() - 使用正则表达式分割字符串

// match示例
const str = 'The quick brown fox jumps over the lazy dog';
console.log(str.match(/[A-Z]/g)); // ["T"]

// replace示例
console.log('2023-05-20'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2/$3/$1')); // "05/20/2023"

// split示例
console.log('a,b, c , d'.split(/\s*,\s*/)); // ["a", "b", "c", "d"]

五、高级正则表达式技巧

5.1 零宽断言

零宽断言（lookaround assertions）用于指定匹配位置需要满足的条件，但不消耗字符：

• x(?=y) - 正向肯定查找，匹配x仅当x后面跟着y
• x(?!y) - 正向否定查找，匹配x仅当x后面不跟着y
• (?<=y)x - 反向肯定查找，匹配x仅当x前面是y
• (?<!y)x - 反向否定查找，匹配x仅当x前面不是y

// 提取价格数字
const priceStr = 'Price: $123.45, $67.89';
const prices = priceStr.match(/(?<=\$)\d+\.\d\d/g);
console.log(prices); // ["123.45", "67.89"]

// 匹配不以https开头的URL
const urlRegex = /^(?!https?:\/\/).+/;
console.log(urlRegex.test('www.example.com')); // true
console.log(urlRegex.test('http://example.com')); // false

5.2 非贪婪匹配

默认情况下，量词是"贪婪的"，会尽可能多地匹配字符。在量词后添加?可以使其变为"非贪婪的"：

const html = '<div>content1</div><div>content2</div>';

// 贪婪匹配
console.log(html.match(/<div>.*<\/div>/)[0]); 
// "<div>content1</div><div>content2</div>"

// 非贪婪匹配
console.log(html.match(/<div>.*?<\/div>/)[0]); 
// "<div>content1</div>"

5.3 递归匹配

使用(?R)或(?1)等可以实现递归匹配，适合处理嵌套结构：

// 匹配嵌套的圆括号（最多支持3层）
const nestedParens = /\(([^()]|\((?:[^()]|\([^()]*\))*\))*\)/;
console.log(nestedParens.test('(a(b(c)d)e)')); // true

六、性能优化与最佳实践

6.1 正则表达式性能优化

1. 预编译正则表达式：对于频繁使用的正则表达式，应该预先编译并保存：

// 不好的做法：每次调用都创建新的正则表达式
function testSomething(input) {
  return /pattern/.test(input);
}

// 好的做法：预编译正则表达式
const pattern = /pattern/;
function testSomething(input) {
  return pattern.test(input);
}

2. 避免回溯灾难：复杂的正则表达式可能导致性能问题：

// 有问题的正则（可能导致回溯灾难）
const badRegex = /(x+x+)+y/;

// 改进版本
const goodRegex = /x+y/;

3. 使用具体字符集：尽可能使用具体的字符集代替通配符：

// 不好的做法
const slowRegex = /.*abc.*/;

// 好的做法
const fastRegex = /[^abc]*abc[^abc]*/;

6.2 可读性与维护性

1. 添加注释 ：对于复杂的正则表达式，可以使用x标志添加注释：

const complexRegex = new RegExp(
  `^                  # 字符串开始
  (\\d{3})           # 3位区号
  [\\s-]?            # 可选的分隔符（空格或短横线）
  (\\d{3})           # 3位前缀
  [\\s-]?            # 可选的分隔符
  (\\d{4})           # 4位线路号
  $                  # 字符串结束`, 
  'x'
);

2. 模块化复杂正则：将复杂的正则表达式拆分为多个部分：

// 匹配URL的正则表达式
const protocol = '(https?:\\/\\/)?';
const domain = '([^\\/\\?:]+)';
const port = '(:\\d+)?';
const path = '([\\/\\?:][^#]*)?';
const hash = '(#.*)?';

const urlRegex = new RegExp(`^${protocol}${domain}${port}${path}${hash}$`);

七、常见问题与解决方案

7.1 常见正则表达式问题

1. 多行匹配 ：默认情况下，.不匹配换行符，可以使用[^]或[\s\S]匹配任意字符：

const multiLineText = 'line1\nline2\nline3';
console.log(multiLineText.match(/line1.*line3/)); // null
console.log(multiLineText.match(/line1[^]*line3/)); // 匹配成功

2. Unicode字符匹配 ：使用u标志正确处理Unicode字符：

console.log(/^.$/.test('𠮷')); // false
console.log(/^.$/u.test('𠮷')); // true

3. 全局匹配的状态问题 ：带有g标志的正则表达式会记住上次匹配的位置：

const regex = /a/g;
const str = 'abcabc';

console.log(regex.test(str)); // true
console.log(regex.test(str)); // true
console.log(regex.test(str)); // false（需要重置lastIndex）
regex.lastIndex = 0;
console.log(regex.test(str)); // true

7.2 实用正则表达式示例

1. 提取Markdown链接：

function extractMarkdownLinks(text) {
  const regex = /\[([^\]]+)\]\(([^)]+)\)/g;
  const links = [];
  let match;
  
  while ((match = regex.exec(text)) !== null) {
    links.push({
      text: match[1],
      url: match[2]
    });
  }
  
  return links;
}

2. 验证信用卡号（Luhn算法）：

function validateCreditCard(cardNumber) {
  // 去除所有非数字字符
  const cleaned = cardNumber.replace(/\D/g, '');
  
  // 检查基本格式
  if (!/^[0-9]{13,16}$/.test(cleaned)) {
    return false;
  }
  
  // Luhn算法验证
  let sum = 0;
  let shouldDouble = false;
  
  for (let i = cleaned.length - 1; i >= 0; i--) {
    let digit = parseInt(cleaned.charAt(i), 10);
    
    if (shouldDouble) {
      digit *= 2;
      if (digit > 9) {
        digit -= 9;
      }
    }
    
    sum += digit;
    shouldDouble = !shouldDouble;
  }
  
  return (sum % 10) === 0;
}

八、工具与资源推荐

8.1 在线测试工具

1. Regex101 (regex101.com/) - 功能强大的正则表达式测试工具，支持多种语言
2. RegExr (regexr.com/) - 学习、构建和测试正则表达式的工具
3. Debuggex (www.debuggex.com/) - 正则表达式可视化工具

8.2 学习资源

1. 《精通正则表达式》 - 深入讲解正则表达式的经典书籍
2. MDN正则表达式指南 (developer.mozilla.org/zh-CN/docs/...) - Mozilla的正则表达式文档
3. RegexOne (regexone.com/) - 交互式正则表达式学习教程

8.3 常用正则表达式库

1. validator.js (github.com/validatorjs...) - 常用的字符串验证库
2. xregexp (xregexp.com/) - 扩展的JavaScript正则表达式库
3. regexgen (github.com/devongovett...) - 根据输入字符串生成正则表达式

结语

正则表达式是前端开发中一项强大而灵活的技能，虽然学习曲线较陡峭，但一旦掌握，可以极大地提高开发效率和代码质量。本文从基础到高级全面介绍了正则表达式在前端中的应用。

正则表达式的世界博大精深，本文只是抛砖引玉。更多高级实用技巧有待发掘。