当前位置：首页 > 文章列表 > 文章 > 前端 > JS正则表达式基础教学指南

JS正则表达式基础教学指南

2025-08-18 16:24:55 0浏览收藏

JS正则表达式是处理文本的强大工具，是前端开发者的必备技能。本文作为JS正则表达式入门教程，将带你快速掌握正则表达式的核心概念和常用方法。文章首先介绍了正则表达式的创建方式，包括字面量和构造函数，并详细讲解了test、exec、match、search、replace和split等常用字符串方法。同时，文章还提供了常用的正则表达式符号速查表，例如.、*、+、?、^、$等，以及贪婪和非贪婪模式的区别。最后，通过邮箱验证的实例，展示了正则表达式在表单验证、搜索替换和数据提取等实际开发中的应用。掌握JS正则表达式，需要不断练习和实践，推荐使用Regex101、RegExr或VS Code插件进行调试，最终能够高效地解决字符串处理问题。

JS正则表达式是处理文本的强大工具，1. 可通过字面量或构造函数创建；2. 常用方法包括test、exec、match、search、replace和split；3. 常用符号如.、*、+、?、^、$、[]、\d、\w、\s、|、()等；4. 默认为贪婪模式，加?变为非贪婪；5. 应用于表单验证、搜索替换、数据提取等；6. 邮箱验证示例使用/^[\s@]+@[\s@]+\.[\s@]+$/；7. 推荐使用Regex101、RegExr或VS Code插件进行调试；掌握正则需持续练习与实践，最终能高效处理字符串问题。

JS正则表达式怎么用

JS正则表达式，简单说，就是用来匹配字符串中特定模式的利器。它不是万能的，但绝对是处理文本的瑞士军刀。

JS中使用正则表达式，主要通过RegExp对象和字符串的一些方法来实现。

创建正则表达式：

字面量方式：const regex = /pattern/flags; (推荐，简洁)
构造函数方式：const regex = new RegExp('pattern', 'flags'); (更灵活，pattern可以是变量)

pattern: 你的正则表达式模式。
flags: 可选的修饰符，如 i (忽略大小写), g (全局匹配), m (多行匹配)。

字符串方法：

test(): regex.test(string) 测试字符串是否匹配模式，返回 true 或 false。
exec(): regex.exec(string) 执行匹配，返回匹配结果数组或 null。注意，全局匹配时，每次调用 exec() 会返回下一个匹配项。
match(): string.match(regex) 返回匹配结果数组或 null。全局匹配时返回所有匹配项，否则只返回第一个。
search(): string.search(regex) 返回第一个匹配项的索引，未找到则返回 -1。
replace(): string.replace(regex, replacement) 替换匹配到的子字符串。 replacement 可以是字符串或函数。
split(): string.split(regex) 使用正则表达式作为分隔符分割字符串。

正则表达式太难记了，有没有速查表？

当然有！记住几个常用的就够了，剩下的用到查一下。

.: 匹配任意单个字符（除了换行符）。
*: 匹配前一个字符 0 次或多次。
+: 匹配前一个字符 1 次或多次。
?: 匹配前一个字符 0 次或 1 次。
^: 匹配字符串的开头。
$: 匹配字符串的结尾。
[]: 字符集，匹配方括号中的任意一个字符。例如，[abc] 匹配 "a", "b", 或 "c"。
[^]: 反义字符集，匹配不在方括号中的任意一个字符。例如，[^abc] 匹配除了 "a", "b", 和 "c" 之外的任意字符。
\d: 匹配数字。
\w: 匹配字母、数字或下划线。
\s: 匹配空白字符（空格、制表符、换行符等）。
\b: 匹配单词边界。
|: 或，匹配 | 两边的任意一个模式。
(): 分组，用于捕获匹配的子字符串。

正则表达式的贪婪模式和非贪婪模式是什么？

默认情况下，正则表达式是贪婪的，也就是说，它会尽可能多地匹配字符。例如，/a.*b/ 会匹配 "aabab" 中的 "aabab"。

如果你想让它尽可能少地匹配字符，可以使用非贪婪模式，在量词后面加上 ?。例如，/a.*?b/ 会匹配 "aabab" 中的 "aab"。

const str = "aabab";
const greedyRegex = /a.*b/;
const nonGreedyRegex = /a.*?b/;

console.log(str.match(greedyRegex)); // 输出: [ 'aabab', index: 0, input: 'aabab', groups: undefined ]
console.log(str.match(nonGreedyRegex)); // 输出: [ 'aab', index: 0, input: 'aabab', groups: undefined ]

正则表达式在实际开发中有哪些应用场景？

表单验证: 验证邮箱、手机号、身份证号等格式。
搜索和替换: 在文本中查找和替换特定模式的字符串。例如，替换所有 HTML 标签。
数据提取: 从文本中提取需要的信息。例如，从网页中提取链接。
代码分析: 分析代码结构，例如，查找所有函数定义。
日志分析: 从日志文件中提取关键信息。

举个例子，如何用正则表达式验证邮箱格式？

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

console.log(isValidEmail("test@example.com")); // true
console.log(isValidEmail("invalid-email")); // false
console.log(isValidEmail("test@example")); // false
console.log(isValidEmail("@example.com")); // false
console.log(isValidEmail("test@.com")); // false

这个正则表达式的解释：