JavaScript 正则表达式教程

我是欧阳
81 阅读4分钟

JavaScript 正则表达式教程

正则表达式是用于匹配文本模式的强大工具，在 JavaScript 中被广泛应用于字符串处理、数据验证、文本搜索与替换等诸多场景。本教程将全面深入地介绍 JavaScript 正则表达式的相关知识与应用技巧。

一、正则表达式基础

正则表达式是由一系列字符和特殊符号组成的文本模式描述规则。在 JavaScript 中，可以通过两种方式创建正则表达式对象：字面量表示法和构造函数表示法。 字面量表示法使用斜杠 / 来界定正则表达式，例如：/abc/，它表示匹配字符串中连续出现的 "abc"。 构造函数表示法使用 RegExp 构造函数，如：new RegExp('abc')，这种方式在需要动态生成正则表达式时非常有用，例如根据用户输入来构建匹配模式。

二、正则表达式字符类

  1. 普通字符 普通字符在正则表达式中表示其自身。例如，/a/ 会匹配字符串中的字母 "a"。
  2. 字符类 使用方括号 [] 来定义字符类，表示匹配方括号内的任意一个字符。例如，/[aeiou]/ 可以匹配字符串中的任何一个元音字母。还可以使用连字符 - 来表示字符范围，如 /[a-z]/ 匹配所有小写字母，/[0-9]/ 匹配所有数字。
  3. 预定义字符类 avaScript 正则表达式提供了一些预定义字符类，方便我们使用。例如：
  • \d：等价于 [0-9]，匹配数字。
  • \D：与 \d 相反，匹配非数字字符。
  • \w：匹配字母、数字、下划线，等价于 [A-Za-z0-9_]。
  • \W：匹配非字母、数字、下划线字符。
  • \s：匹配空白字符，包括空格、制表符、换行符等。
  • \S：匹配非空白字符。

三、正则表达式量词

量词用于指定字符或字符类在匹配时出现的次数。

  1. *：匹配前面的字符或字符类 0 次或多次。例如，/a*/ 可以匹配空字符串、"a"、"aa"、"aaa" 等。
  2. +：匹配前面的字符或字符类 1 次或多次。如 /a+/ 可以匹配 "a"、"aa"、"aaa" 等，但不能匹配空字符串。
  3. ?：匹配前面的字符或字符类 0 次或 1 次，即表示该字符或字符类是可选的。例如 /colou?r/ 可以匹配 "color" 和 "colour"。
  4. {n}：精确匹配前面的字符或字符类 n 次。例如 /a{3}/ 只匹配 "aaa"。
  5. {n,}：匹配前面的字符或字符类至少 n 次。如 /a{2,}/ 匹配 "aa"、"aaa"、"aaaa" 等。
  6. {n,m}：匹配前面的字符或字符类至少 n 次且最多 m 次。例如 /a{1,3}/ 可以匹配 "a"、"aa"、"aaa"。

四、正则表达式分组

使用括号 () 可以对正则表达式进行分组，分组后的子表达式可以作为一个整体进行操作，并且可以应用量词等。例如，/(ab)+/ 表示匹配连续出现的 "ab" 一次或多次。 分组还可以用于捕获匹配的子字符串，在执行匹配操作后，可以通过一些方法获取捕获组中的内容。

五、正则表达式边界匹配

  1. ^：匹配字符串的开头。例如 /^abc/ 只匹配以 "abc" 开头的字符串。
  2. $：匹配字符串的结尾。如 /xyz$/ 只匹配以 "xyz" 结尾的字符串。
  3. \b：匹配单词边界，即单词与非单词字符之间的位置。例如 /\bcat\b/ 只匹配独立的单词 "cat"，而不会匹配 "scatter" 中的 "cat"。

六、正则表达式的修饰符

正则表达式可以使用修饰符来改变匹配的行为。

  1. i：忽略大小写。例如 /abc/i 可以匹配 "ABC"、"Abc"、"aBC" 等。
  2. g：全局匹配。默认情况下，正则表达式只匹配第一个符合条件的字符串，使用 g 修饰符后，会匹配所有符合条件的字符串。例如 /a/g 在 "abaacaa" 中会匹配到所有的 "a"。
  3. m：多行匹配。当使用 ^ 和 $ 时，m 修饰符会使它们分别匹配每行的开头和结尾。

七、正则表达式的方法

  1. test () 方法
    test() 方法用于检测一个字符串是否匹配某个正则表达式，返回布尔值。例如：
let regex = /abc/;
let str1 = "abcdef";
let str2 = "defabc";
console.log(regex.test(str1)); // true
console.log(regex.test(str2)); // false
  1. exec () 方法
    exec() 方法在字符串中执行匹配搜索，如果匹配成功，返回一个包含匹配结果信息的数组，数组的第一个元素是匹配到的完整字符串，后续元素是捕获组的内容（如果有）。如果匹配失败，则返回 null。例如：
let regex = /(\w+)\s(\w+)/;
let str = "John Doe";
let result = regex.exec(str);
console.log(result); 
// ["John Doe", "John", "Doe"]

八、字符串与正则表达式相关方法

  1. match () 方法
    字符串的 match() 方法接受一个正则表达式作为参数，返回一个数组，包含所有匹配的子字符串。如果正则表达式使用了 g 修饰符，则返回所有匹配结果；如果没有使用 g 修饰符，则返回的数组结构与 exec() 方法类似。例如：
let str = "hello world hello";
let regex1 = /hello/;
let regex2 = /hello/g;
console.log(str.match(regex1)); 
// ["hello"]
console.log(str.match(regex2)); 
// ["hello", "hello"]
  1. search () 方法
    search() 方法返回正则表达式在字符串中首次匹配的位置索引，如果没有匹配则返回 -1。例如：
let str = "The quick brown fox";
let regex = /quick/;
console.log(str.search(regex)); // 4
  1. replace () 方法
    replace() 方法用于将字符串中匹配正则表达式的部分替换为指定的字符串。例如：
let str = "apple,banana,cherry";
let regex = /,/;
let newStr = str.replace(regex, ";");
console.log(newStr); // "apple;banana;cherry"

还可以在替换字符串中使用捕获组，通过 $ 符号加上捕获组的编号来引用捕获组的内容。例如：

let str = "John Doe";
let regex = /(\w+)\s(\w+)/;
let newStr = str.replace(regex, "$2, $1");
console.log(newStr); // "Doe, John"

九、正则表达式的应用实例

  1. 验证电子邮件地址
let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
let email1 = "john@example.com";
let email2 = "invalid_email";
console.log(emailRegex.test(email1)); // true
console.log(emailRegex.test(email2)); // false
  1. 验证手机号码（简单示例，只考虑部分常见格式）
let phoneRegex = /^1[3-9]\d{9}$/;
let phone1 = "13812345678";
let phone2 = "1234567890";
console.log(phoneRegex.test(phone1)); // true
console.log(phoneRegex.test(phone2)); // false
  1. 提取文本中的所有数字
let text = "There are 123 apples and 456 bananas";
let numberRegex = /\d+/g;
let numbers = text.match(numberRegex);
console.log(numbers); // ["123", "456"]

正则表达式在 JavaScript 中是非常强大且灵活的工具，通过深入学习和大量实践，可以熟练地运用它来处理各种字符串相关的任务，提高代码的效率和质量，无论是在数据验证、文本处理还是网页开发中的表单验证等场景都能发挥重要作用。不断探索和尝试不同的正则表达式模式与应用，将有助于更好地掌握这一技术。

avatar
文章
阅读
粉丝