正则表达式👉 案例

2022-08-27 | 2024-07-27 | 1.7k | 8 分钟

匹配手机号

正则实现：

/**
 * 1. 第一位数字是 1
 * 2. 第二位数字一般是 3、4、5、7、8 中的一个数字
 * 3. 后面的都是 0 到 9 的数字
 */
const reg = /^1[34578]\d{9}$/g;

正则图解：

验证邮箱

正则实现：

/**
 * 1. 邮箱名称包含：所有大小写字母，所有数字，以及_-.三个符号 => /^[A-Za-z0-9_\-\.]+/g
 * 2. 然后就是@，@符后面是域名，而且域名还可以是多级域名 => @[A-Za-z0-9_\-\.]+\.[A-Za-z]{2,6}
 */
const reg = /^[A-Za-z0-9_\-\.]+@[A-Za-z0-9_\-\.]+\.[A-Za-z]{2,6}$/g;

正则图解：

验证 HTML 标签

正则实现：

// 1. 匹配 < 开头和若干小写字母 => /(?<tag>[a-z]+)/gm
// 2. 匹配标签里面的属性，只需要判断不是 > 就可以 => /(?<attr>[^>]*)/gm
// 3. 匹配 > 和标签里的内容，有可能有换行 => />\s*(?<children>.*)\s*/g
// 4. 匹配最后的标签 => /(<\/\1>|\s+\/>)/g
const reg = /<(?<tag>[a-z]+)(?<attr>[^>]*)>\s*(?<children>.*)\s*(<\/\1>|\s+\/>)/gm;
let str = `<div id="hello">
                <p class="title"></p>
           </div>`;
while (result = reg.exec(str)) {
    console.log(result);
}

正则图解：

验证 IPv4 地址

正则实现：

/**
 * 1. 地址是由 4 组从 0 到 255 的数字组成，首先对 0-255 拆分，拆分成 0-199、200-249、250-255
 * 2. 先来写 0-199 的范围
 * 3. 再来写 200-249 的范围
 * 4. 再来写 250-255 的范围
 */
const reg = /^(([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])\.){3}([01]?[0-9][0-9]?|2[0-4][0-9]|25[0-5])$/g;

正则图解：

验证时间

正则实现：

/**
 * 1. 年就是 0-9 的数字重复4次 => /[0-9]{4}/g
 * 2. 月份会有两种情况：0-9、10-12 => /(0[1-9]|1[0-2])/g
 * 3. 天数也需要分为三个情况，0-9、10-29、30-31 => /(0[1-9]|[12][0-9]|3[01])/g
 * 4. 24 小时制，范围为 00:00:00 - 23:59:59 => /([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])/g
 */
const reg = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])\s([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/g;

正则图解：

其他应用场景

/**
* 时间字符串格式化
* @param {*} str 
* @param {*} template 
* @returns 
*/
function formatTime(str, template = "{0}年{1}月{2}日{3}时{4}分{5}秒") {
let timeAry = str.match(/\d+/g); // 获取时间 => ["2020", "4", "19", "11", "09", "20"]

return template.replace(/\{(\d+)\}/g, (content, $1) => {
    // 以 $1 作为索引找到对应的时间
    return (timeAry[$1] || "").padStart(2, "0");
});
}

let time = "2020-4-19 11:09:20";
console.log(formatTime(time));
console.log(formatTime(time, "{0}-{1}-{2} {3}:{4}:{5}"));

验证身份证

正则实现：

/**
 * 1. 地址码规则: 6位，首位不能是 0 => /[1-9]\d{5}/g
 * 2. 年份码规则：不考虑古人，只考虑近代 18、19、20 世纪出生的人=> //(18|19|20)\d{2}//g
 * 3. 月份码规则：0-9、10-12 => /(0[1-9]|1[0-2])/g
 * 4. 日期码规则：天数也需要分为三个情况，0-9、10-29、30-31 => /(0[1-9]|[12][0-9]|3[01])/g
 * 5. 顺序码规则=> /\d{3}/g
 * 6. 校验码规则=> /[0-9Xx]/g
 */
const reg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}[0-9Xx]$/g;

正则图解：

验证数字

正则实现：

/**
 * 1. 符号部分：可能出现 正负号，也可能不出现  [+-]?
 * 2. 整数部分：一位数：0-9 都可以，多位数：首位不能为0 (\d|([1-9]\d+))
 * 3. 小数部分：可有可无，一旦有后面必须有小数点+数字  (\.\d+)
 */
const reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;

正则图解：

捕获最多的字母

代码实现：

JavaScript

// 正则方式实现
let str = "zhongguojiayouzhongguofuqiang";
let max = 0, res = [], flag = false, reg;
// 字符串排序后 aafggggghhiijnnnoooooquuuuyzz
str = str.split('').sort((a, b) => a.localeCompare(b)).join('');

for (let i = str.length; i > 0; i--) {
    // 长度为 i 的字符，长度不断 -1
    reg = new RegExp("([a-zA-Z])\\1{" + (i - 1) + "}", "g"); // 判断连续相同的字符
    str.replace(reg, (content, $1) => {
        res.push($1);
        max = i;
        flag = true;
    });

    if (flag) break; // flag 为 true，表示出现了 最多字符，没必要继续循环了
}
console.log(`出现次数最多的字符：${res},出现了${max}次`);

// API 方式实现
let str = "zhongguojiayouzhongguofuqiang";
// 字符串排序后 aafggggghhiijnnnoooooquuuuyzz
str = str.split('').sort((a, b) => a.localeCompare(b)).join('');

// 捕获出现 1 次以上的字母，在对其长度排序
let ary = str.match(/([a-zA-Z])\1+/g).sort((a, b) => b.length - a.length);
console.log(ary); //["ggggg", "ooooo", "uuuu", "nnn", "aa", "hh", "ii", "zz"]

正则图解：

解析 url 参数

代码实现：

function queryURLParams(str) {
    let obj = {};
    //  [^?=&#]+  => 不是 ?、=、&、# 的 1+ 个字符
    str.replace(/([^?&=#]+)=([^?&=#]+)/g, (...[, $1, $2]) => {
        obj[$1] = $2;
    });
    str.replace(/#([^?&=#]+)/g, (...[, $1]) => {
        obj['HASH'] = $1;
    });
    return obj;
}

console.log(queryURLParams("http://www.baidu.com?type=1&from=wx#video"));
// { type: '1', from: 'wx', HASH: 'video' }

正则图解：

千分符

代码实现：

console.log("152409800".replace(/\B(?=(\d{3})+$)/g, ","));
// 或
console.log("152409800".replace(/\d{1,3}(?=(\d{3})+$)/g, (content) => content + ","));

正则图解：

验证密码

代码实现：

JavaScript

// 要求密码中必须出现小写字母、大写字母、数字、特殊字符(!@#_,.)，6-12位
// 1. 必须包含至少一个数字 => /(?=.*\d)/
// 2. 必须包含至少一个小写字母 => /(?=.*[a-z])/
// 3. 必须包含至少一个大写字母 => /(?=.*[A-Z])/
// 4. 必须包含至少一个特殊字符 => /(?=.*[!@#_,.])/
var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#_,.]).{6,12}$/;

console.log(reg.test("asdfsdAf234."));

// 判断密码强度
function judgePwd(pwd) {
    if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#_,.]).{6,12}$/.test(pwd)) {
        // 出现小写字母、大写字母、数字、特殊字符(!@#_,.)  -> 强
        return "强";
    } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,12}$/.test(pwd)) {
        // 出现小写字母、大写字母、数字  -> 中
        return "中";
    } else if (/^(?=.*[a-z])(?=.*[A-Z]).{6,12}$/.test(pwd)) {
        // 出现小写字母、大写字母  -> 轻
        return "轻";
    } else {
        // 其他  -> 不满足要求
        return "不满足要求";
    }
}

console.log(judgePwd("asdADFF4.343"));

正则图解：

单词首字母大写

代码实现：

let str = "good good study, day day up!";
str = str.replace(/\b([a-zA-Z])/g, (content, $1) => $1.toUpperCase());

console.log(str);

正则图解：

代码实现：

let cookieObj = {};
document.cookie.replace(/([^?&=#\s+]+)=([^?&=#]+);/g, (content, $1, $2) => {
    cookieObj[$1] = $2;
});

console.log(cookieObj);

正则图解：

打赏作者

您的打赏是我前进的动力

微信

支付宝

第 1️⃣ 座大山：严格模式

第 1️⃣ 座大山：数据类型

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 匹配手机号
2. 验证邮箱
3. 验证 HTML 标签
4. 验证 IPv4 地址
5. 验证时间
6. 验证身份证
7. 验证数字
8. 捕获最多的字母
9. 解析 url 参数
10. 千分符
11. 验证密码
12. 单词首字母大写
13. 格式化 cookie

匹配手机号

验证邮箱

验证 HTML 标签

验证 IPv4 地址

验证时间

验证身份证

验证数字

捕获最多的字母

解析 url 参数

千分符

验证密码

单词首字母大写

格式化 cookie