JavaScript正则表达式解析：模式、方法与实战案例

目录

一、什么是正则表达式

1.创建正则表达式

2.标志（Flags）

3.基本模式

（1）字符匹配

（2）位置匹配

（3）数量匹配

二、常用的正则表达式方法和属性

1.test()‌

2.match()‌

3.exec()‌

4‌.replace()‌

5.search()‌

6‌.split()‌

三、常见的正则表达案例

1.验证手机号码

2.验证邮箱

3.验证身份证号码

4.验证银行卡号码

5.验证密码

6.验证日期格式

四、线上正则表达式测试或生成器工具

文章前提：涵盖了正则表达式的关键要素。模式，即正则表达式的语法和规则；方法，即如何在JavaScript中使用正则表达式进行匹配、搜索、替换等操作；一些实战案例，通过具体示例展示正则表达式的应用；介绍两个线上正则表达式测试和生成器工具。

一、什么是正则表达式

‌JavaScript正则表达式‌是一种用于匹配字符串中字符组合的模式。通过一种简洁的语法，可以执行复杂的字符串搜索、替换等操作。

1.创建正则表达式

字面量语法：使用双斜杠包裹一个匹配模式，/正则表达式主体/修饰符(可选)。

var pattern1 = /hello/i;

// /hello/i是一个正则表达式

// hello是一个正则表达式主体，用于检索

// i  是一个修饰符

构造函数语法：使用new RegExp(pattern, flags)的方式创建一个正则表达式对象。

var pattern2 = new RegExp("world");

2.标志（Flags）

g：全局搜索。

i：不区分大小写。

m：多行搜索。

s：允许 . 匹配换行符。

u：Unicode 完全匹配。

y：粘性搜索，匹配从目标字符串的当前位置开始。

3.基本模式

正则表达式的语法包括字符匹配、位置匹配、数量匹配等。

（1）字符匹配

.：匹配除换行符以外的任意单个字符。

[]：字符集，匹配方括号中的任意一个字符。例如，[abc]匹配a、b或c。使用连字符-可以表示字符范围，如[a-z]匹配所有小写字母。

^：在字符集开头时表示否定字符集。例如，[^abc]匹配除了a、b、c之外的任意字符。

\d：匹配任意一个数字字符，等价于[0-9]。

\w：匹配任意一个字母、数字或下划线，等价于[A-Za-z0-9_]。

\s：匹配任意一个空白符，包括空格、制表符等。

（2）位置匹配

^：匹配字符串的开始位置。

$：匹配字符串的结束位置。

（3）数量匹配

*：匹配前面的元素零次或多次。例如，a*匹配零个或多个a。

+：匹配前面的元素至少一次。例如，a+匹配一个或多个a。

?：匹配前面的元素零次或一次。例如，a?匹配零个或一个a。

{n}：精确匹配前面的元素n次。例如，a{3}匹配三个a。

{n,}：匹配前面的元素至少n次。

{n,m}：匹配前面的元素至少n次，但不超过m次。

二、常用的正则表达式方法和属性

1.test()‌

用于测试字符串是否符合正则表达式的规则，返回true或false。

const regex = /World/;
const str = "Hello World";
console.log(regex.test(str)); // true

const str2 = "Hello";
console.log(regex.test(str2)); // false

2.match()‌

返回字符串中所有匹配正则表达式的结果，如果没有匹配，返回null。

const regex2 = /\d+/g; // 全局匹配数字
const str12 = "There are 123 apples and 456 oranges.";
const matches = str12.match(regex2);

console.log(matches); // 输出: ["123", "456"]

3.exec()‌

获取正则表达式匹配的片段，返回一个数组，包含匹配的字符串和匹配信息。如果没有匹配，返回null。

const regex3 = /(\d{4})-(\d{2})-(\d{2})/;
const str3 = "Today's date is 2023-10-05.";
const result = regex3.exec(str3);

if (result) {
    console.log(result[0]); // 完整匹配: "2023-10-05"
    console.log(result[1]); // 第一个捕获组: "2023"
    console.log(result[2]); // 第二个捕获组: "10"
    console.log(result[3]); // 第三个捕获组: "05"
} else {
    console.log("没有找到匹配的片段");
}

4‌.replace()‌

用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

const regex4 = /apple/gi; // 全局匹配，忽略大小写
const str4 = "I have 2 apples, 3 bananas, and 1 pear.";
const replaced = str4.replace(regex4, "orange");
console.log(replaced); // 输出: "I have 2 oranges, 3 bananas, and 1 pear."

// 使用替换函数
const newStr = str4.replace(/(\d+)/g, (match, p1) => parseInt(p1) * 2);
console.log(newStr); // 输出: "I have 4 oranges, 6 bananas, and 2 pear."

5.search()‌

用于检索字符串中指定的子字符串，或与正则表达式相匹配的子字符串，并返回子串的起始位置。

const str5 = "Hello, world!";
const index = str5.search(/world/);
console.log(index); // 输出: 7

6‌.split()‌

根据给定的正则表达式将字符串分割成子串，然后将结果作为字符串数组返回。

const str6 = "apple,orange,banana,pear";
const fruits = str6.split(/,/);

console.log(fruits); // 输出: ["apple", "orange", "banana", "pear"]

三、常见的正则表达案例

1.验证手机号码

const phoneRegex = /^1[3-9]\d{9}$/;

2.验证邮箱

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

3.验证身份证号码

const idCardRegex = /^\d{17}[\d|x|X]$/;

4.验证银行卡号码

const bankCardRegex = /^\d{16,19}$/;

5.验证密码

// 密码可以包含数字、大小写字母和特殊字符，并且长度至少为8个字符

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

6.验证日期格式

const dateRegex = /^\d{4}-\d{2}-\d{2}$/;

四、线上正则表达式测试或生成器工具

1.正则表达式在线测试 | 菜鸟工具  https://www.jyshare.com/front-end/854/https://www.jyshare.com/front-end/854/https://www.jyshare.com/front-end/854/

2.正则表达式生成器，常用正则表达式在线生成

正则表达式生成器，常用正则表达式在线生成https://www.sojson.com/regex/generatehttps://www.sojson.com/regex/generate

记录

若文章对你有帮助，点赞、收藏加关注吧！