Bootstrap

白骑士的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

总结

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

;