前端正则表达式使用

介绍了正则的选择符、边界符、区间匹配、排除匹配、汉字与字符属性、原子组、禁止贪婪、matchAll 等等，举例了使用正则进行日期校验、密码校验、邮箱校验的处理

1. 日期校验

有如下三种格式的日期，需要校验格式是否正确：

let str1 = "2023-12-26"; // 正确
let str2 = "2023/12/26"; // 正确
let str3 = "2023-12/26"; // 错误：这种是不能通过的，前后要保持一致

可以使用原子组， ([-\/])代表原子组 1，后面的\1代表和原子组1内容保持一致，校验效果如下所示：

let reg = /^\d{4}([-\/])\d{2}\d{2}$/;
console.log(str1.match(reg));
console.log(str2.match(reg));
console.log(str3.match(reg));

选择符、边界符、转译

• 选择符：|
• 字符边界：^代表起始 $代表截止
• 转译：.代表除换行外任何字符 .代表普通点

如下所示：判断电话号码是否为 010 或者 020 开头的

1. ^：开始符，必须以 xx 开始
2. 010|020：选择符|，010 或者 020
3. -：-(短横线)符号需要转译一下
4. \d{7,8}：\d 代表数字，{7,8}代表 7-8 位，总体意思为 7-8 位数字
5. $：结尾符，必须以 xx 结尾

let tel = "010-99999999";
console.log(/^(010|020)\-\d{7,8}$/.test(tel)); // true

let title = "《老人与海》";
console.log(title.replace(/《|》/g, "")); // 老人与海

区间匹配[]

let str = "hello world 123";
// 匹配0-9的数字
// 1. 只匹配一个  ['1', '2', '3']
console.log(str.match(/[0-9]/g));
// 2. +代表一个或多个 贪婪匹配 ['123']
console.log(str.match(/[0-9]+/g));

// 匹配a-z的字符
// 1. 只匹配一个  ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']
console.log(str.match(/[a-z]/g));
// 2. +代表一个或多个 贪婪匹配 ['hello', 'world']
console.log(str.match(/[a-z]+/g));

排除匹配^

let str = "hello world 123";

// 匹配l和o
// 打印：['l', 'l', 'o', 'o', 'l']
console.log(str.match(/[lo]/g));
// 匹配除了l和o之外的其他字符
// 打印：['h', 'e', ' ', 'w', 'r', 'd', ' ', '1', '2', '3']
console.log(str.match(/[^lo]/g));

汉字与字符属性

// u-unicode-万国码
let str = "hello.com，哈喽哟";
// 匹配字符 ['h', 'e', 'l', 'l', 'o', 'c', 'o', 'm', '哈', '喽', '哟']
console.log(str.match(/\p{L}/gu));
// 匹配符号  ['.', '，']
console.log(str.match(/\p{P}/gu));

// 语言系统匹配：Script sc
// 匹配中文 ['哈', '喽', '哟']
console.log(str.match(/\p{sc=Han}/gu));

原子表匹配

let str = `
    hello 
    world
    `;

// .匹配换行符之外的
console.log(str.match(/.+/));
console.log(str.match(/.+/g));
console.log(str.match(/.+/gs));
// \s空白 \S除了空白
// [\s\S] [\d\D] 都可以代表所有内容
console.log(str.match(/[\s\S]+/));

$符号的使用

let str = "(010)88888888 (020)99999999";
let reg = /(\(\d{3}\))(\d{8})/g;
console.log(str.match(reg));
// $1 $2 代表原子组
console.log(str.replace(reg, "$1-$2"));

// $& 代表匹配的内容
// $` 代表匹配内容前面的元素
// $' 代表匹配内容后面的元素
let result = "(010)".replace(/010/, "$`$&$'");
console.log(result);

2. 密码校验

密码规则：字母和数字构成，必须包含大写字母，密码长度为 5-10 位

1. 第一个正则表达式 /^[a-z0-9]{5,10}$/i 判断密码是否由字母和数字组成且长度在5到10位之间。
2. 第二个正则表达式 /[A-Z]/ 判断密码是否包含大写字母。
3. 第三个正则表达式 /[0-9]/ 判断密码是否包含数字。
4. 最终通过 regArr.every() 方法来判断当前密码是否符合所有规则，若符合则输出”正确”，否则输出”错误”。

const pwd = "a123456A";
const regArr = [/^[a-z0-9]{5,10}$/i, /[A-Z]/, /[0-9]/];
const flag = regArr.every((o) => {
  console.log("o", o.test(pwd));
  return o.test(pwd);
});
console.log("flag", flag ? "正确" : "错误");

3. 邮箱校验

let reg = /^[\w-]+@([\w-]+\.)+(com|cn|net)$/i;
let mail1 = "16432@qq.com";
let mail2 = "16432@cms.com.cn";
console.log(mail1.match(reg));
console.log(mail2.match(reg));

禁止贪婪?

const str = "haaaaaa";
// +代表一个或多个，贪婪匹配多个 haaaaaa
console.log(str.match(/ha+/));
// +代表一个或多个，禁止贪婪匹配一个 ha
console.log(str.match(/ha+?/));

// *代表0个或多个，贪婪匹配多个 haaaaaa
console.log(str.match(/ha*/));
// *代表0个或多个，禁止贪婪匹配0个 h
console.log(str.match(/ha*?/));

// ?代表0个或1个，贪婪匹配1个 ha
console.log(str.match(/ha?/));
// ?代表0个或1个，禁止贪婪匹配0个 h
console.log(str.match(/ha??/));

需求：span 标签变成 h4，并且标红

let str = `
    <span>https://www.baidu.com</span>
    <span>http://cdn.baidu.com</span>
    <span>https://baidu.com</span>
    `;

// 贪婪
const reg1 = /<span>[\s\S]+<\/span>/gi;
console.log(str.match(reg1));

// 禁止贪婪
const reg2 = /<span>[\s\S]+?<\/span>/gi;
console.log(str.match(reg2));

// 替换
const reg3 = /<span>([\s\S]+?)<\/span>/gi;
const result = str.replace(reg3, (v, p1) => {
  // console.log(v, p1);
  return `<h4>${p1}</h4>`;
});
console.log(result);

matchAll

let str = `
    <span>https://www.baidu.com</span>
    <span>http://cdn.baidu.com</span>
    <span>https://baidu.com</span>
    `;

const reg = /<span>([\s\S]+?)<\/span>/gi;
const data = str.matchAll(reg);
let result = [];
for (const i of data) {
  console.log(i);
  result.push(i[1]);
}
// 获取网址
console.log(result);

原文链接：https://juejin.cn/post/7338603482026164235 作者：时光足迹