白骑士的JavaScript教学进阶篇之正则表达式 3.5.1 正则表达式的基础语法

正则表达式（Regular Expression，简称 RegEx）是一种用于匹配字符串中字符组合的强大工具。它通常用于搜索、替换和验证文本内容。正则表达式在 JavaScript 中广泛应用于表单验证、数据提取、字符串处理等场景。正则表达式的基础语法主要由普通字符、元字符和量词构成。下面我们将详细讲解这些组成部分，并结合示例来帮助理解。

普通字符

普通字符是正则表达式中最基本的组成部分，它们表示自己本身。例如：

正则表达式 ‘abc‘ 将匹配字符串中的 "abc"

let regex = /abc/;
let result = regex.test("abcdef");

console.log(result); // 输出：true

在这个例子中，正则表达式 ‘/abc/‘ 用于匹配字符串 ‘"abcdef"‘ 中的 ‘"abc"‘，结果为 ‘true‘，表示匹配成功。

元字符

元字符在正则表达式中具有特殊含义，用于构建复杂的匹配模式。常见的元字符包括：

‘.‘

匹配除换行符以外的任意字符。例如，正则表达式 ‘a.c‘ 可以匹配 ‘"abc"‘、‘"a1c"‘ 等。

let regex = /a.c/;

console.log(regex.test("abc")); // 输出：true
console.log(regex.test("a1c")); // 输出：true
console.log(regex.test("ac"));  // 输出：false

‘^‘

匹配字符串的开始位置。例如，正则表达式 ‘^Hello‘ 匹配任何以 ‘"Hello"‘ 开头的字符串。

let regex = /^Hello/;

console.log(regex.test("Hello world")); // 输出：true
console.log(regex.test("Say Hello"));   // 输出：false

‘$‘

匹配字符串的结束位置。例如，正则表达式 ‘world$‘ 匹配任何以 ‘"world"‘ 结尾的字符串。

let regex = /world$/;

console.log(regex.test("Hello world")); // 输出：true
console.log(regex.test("world is big")); // 输出：false

‘[]‘

匹配方括号中的任意一个字符。例如，正则表达式 ‘[abc]‘ 匹配 ‘"a"‘、‘"b"‘ 或 ‘"c"‘ 中的任意一个字符。

let regex = /[abc]/;

console.log(regex.test("apple")); // 输出：true
console.log(regex.test("banana")); // 输出：true
console.log(regex.test("cherry")); // 输出：true

‘\‘

转义字符，用于将元字符作为普通字符匹配。例如，正则表达式 ‘\.‘ 匹配字符 ‘"."‘，而不是任意字符。

let regex = /\./;

console.log(regex.test("a.b")); // 输出：true
console.log(regex.test("abc")); // 输出：false

‘|‘

或运算符，用于匹配多个模式中的任意一个。例如，正则表达式 ‘cat|dog‘ 匹配 ‘"cat"‘ 或 ‘"dog"‘。

let regex = /cat|dog/;

console.log(regex.test("I have a cat")); // 输出：true
console.log(regex.test("I have a dog")); // 输出：true
console.log(regex.test("I have a fish")); // 输出：false

量词

量词用于指定一个字符或子模式应该出现多少次。常用的量词包括：

‘*‘

匹配前面的字符 0 次或多次。例如，正则表达式 ‘ab*c‘ 匹配 ‘"ac"‘、‘"abc"‘、‘"abbc"‘ 等。

let regex = /ab*c/;

console.log(regex.test("ac"));   // 输出：true
console.log(regex.test("abc"));  // 输出：true
console.log(regex.test("abbc")); // 输出：true

‘+‘

匹配前面的字符 1 次或多次。例如，正则表达式 ‘ab+c‘ 匹配 ‘"abc"‘、‘"abbc"‘ 等，但不匹配 ‘"ac"‘。

let regex = /ab+c/;

console.log(regex.test("ac"));   // 输出：false
console.log(regex.test("abc"));  // 输出：true
console.log(regex.test("abbc")); // 输出：true

‘?‘

匹配前面的字符 0 次或 1 次。例如，正则表达式 ‘ab?c‘ 匹配 ‘"ac"‘ 或 ‘"abc"‘。

let regex = /ab?c/;

console.log(regex.test("ac"));   // 输出：true
console.log(regex.test("abc"));  // 输出：true
console.log(regex.test("abbc")); // 输出：false

‘{n}‘

精确匹配前面的字符 n 次。例如，正则表达式 ‘a{3}‘ 匹配 ‘"aaa"‘。

let regex = /a{3}/;

console.log(regex.test("aaa"));  // 输出：true
console.log(regex.test("aa"));   // 输出：false

‘{n,m}‘

匹配前面的字符至少 n 次，至多 m 次。例如，正则表达式 ‘a{2,4}‘ 匹配 ‘"aa"‘、‘"aaa"‘ 或 ‘"aaaa"‘。

let regex = /a{2,4}/;

console.log(regex.test("aa"));   // 输出：true
console.log(regex.test("aaa"));  // 输出：true
console.log(regex.test("aaaaa")); // 输出：false

常用正则表达式示例

匹配电子邮件地址

let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

console.log(emailRegex.test("[email protected]")); // 输出：true

匹配手机号

let phoneRegex = /^\d{10}$/;

console.log(phoneRegex.test("1234567890")); // 输出：true

匹配网址

let urlRegex = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\/?$/;

console.log(urlRegex.test("https://www.example.com")); // 输出：true

总结

正则表达式是处理字符串操作的有力工具，能够极大地简化数据验证和文本处理任务。尽管其语法看起来复杂，但一旦掌握，便能在多种编程场景中派上用场。通过不断练习和实践，开发者可以熟练运用正则表达式来提高代码的效率和可读性。