JavaScript 正则表达式入门指南：模式与修饰符详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00321/article/details/148416691

JavaScript 正则表达式入门指南：模式与修饰符详解

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

什么是正则表达式？

正则表达式（Regular Expression，简称 regex 或 regexp）是一种强大的文本处理工具，它使用特定模式来描述、匹配和操作字符串。在 JavaScript 中，正则表达式通过 RegExp 对象实现，可以与字符串方法配合使用，完成复杂的文本搜索和替换操作。

创建正则表达式的两种方式

JavaScript 提供了两种创建正则表达式的方法：

1. 构造函数语法

let regexp = new RegExp("pattern", "flags");

这种方式适合动态生成正则表达式的情况。例如：

let userInput = prompt("请输入要搜索的关键词", "js");
let dynamicRegex = new RegExp(userInput, "i");  // 不区分大小写搜索用户输入

2. 字面量语法

let regexp = /pattern/;      // 无修饰符
let regexp = /pattern/flags; // 带修饰符

字面量语法更简洁，适合在编写代码时已经知道正则表达式模式的情况。例如：

let staticRegex = /javascript/i;  // 不区分大小写匹配"javascript"

六大修饰符详解

修饰符可以改变正则表达式的匹配行为，JavaScript 支持以下6种修饰符：

i（ignore case）：忽略大小写匹配

/hello/.test("Hello");  // false
/hello/i.test("Hello"); // true

g（global）：全局匹配（查找所有匹配项而非在第一个匹配后停止）
```
"a a a".match(/a/);   // ["a"]
"a a a".match(/a/g);  // ["a", "a", "a"]
```

m（multiline）：多行模式，使 ^ 和 $ 匹配每行的开头和结尾

let str = `1行文本
2行文本`;
str.match(/^\d+/);    // ["1"]
str.match(/^\d+/m);   // ["1"]
str.match(/^\d+/gm);  // ["1", "2"]

s（dotAll）：使点号 . 匹配包括换行符在内的所有字符

"a\nb".match(/a.b/);    // null
"a\nb".match(/a.b/s);   // ["a\nb"]

u（unicode）：启用完整的 Unicode 支持

"𝒳".match(/[𝒳-𝒴]/);     // null
"𝒳".match(/[𝒳-𝒴]/u);    // ["𝒳"]

y（sticky）：粘性匹配，从正则表达式的 lastIndex 属性指定的位置开始匹配

let str = "let varName = 'value'";
let regexp = /\w+/y;
regexp.lastIndex = 3;
str.match(regexp);  // null（因为不是从位置3开始）
regexp.lastIndex = 4;
str.match(regexp);  // ["varName"]

常用正则表达式方法

1. str.match(regexp)

在字符串中搜索匹配正则表达式的部分：

let results = "Hello world!".match(/l/g); 
// ["l", "l", "l"]

重要特性：

有 g 修饰符时返回所有匹配组成的数组
无 g 修饰符时返回第一个匹配及额外信息
无匹配时返回 null（不是空数组）

2. str.replace(regexp, replacement)

替换字符串中匹配正则表达式的部分：

"John Smith".replace(/(\w+) (\w+)/, "$2, $1"); 
// "Smith, John"

替换字符串中可以使用特殊变量：

$& - 插入整个匹配项
$` - 插入匹配项前的文本
$' - 插入匹配项后的文本
$n - 插入第n个分组匹配

3. regexp.test(str)

测试字符串是否包含匹配项：

let hasNumber = /\d/.test("abc123"); 
// true

实际应用示例

邮箱验证

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

提取URL参数

function getQueryParam(url, param) {
  let regex = new RegExp(`[?&]${param}=([^&]*)`);
  let match = url.match(regex);
  return match ? decodeURIComponent(match[1]) : null;
}

格式化日期

function formatDate(dateStr) {
  return dateStr.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$3.$2.$1");
}
// "2023-05-15" → "15.05.2023"

常见问题与最佳实践

转义特殊字符：如果要匹配正则表达式中的特殊字符（如 .、* 等），需要使用反斜杠转义：
```
"file.txt".match(/\.txt$/); // 匹配".txt"结尾
```
性能考虑：对于重复使用的正则表达式，最好预先编译（使用变量保存）而不是每次都在方法中创建。

避免贪婪匹配：量词默认是贪婪的（匹配尽可能多的字符），可以通过添加 ? 改为惰性匹配：

"<div>text</div>".match(/<.*>/);    // 匹配整个字符串
"<div>text</div>".match(/<.*?>/);   // 只匹配第一个<div>

处理null结果：当 match() 可能返回null时，使用空数组作为后备：
```
let matches = str.match(regex) || [];
```

正则表达式是一个强大的工具，虽然初学可能觉得复杂，但掌握后能极大提高文本处理效率。建议从简单模式开始练习，逐步掌握更复杂的表达式。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考