前端笔记——正则(例题,源码)

什么是正则表达式?

  • 正则表达式是构成搜索模式(search pattern)的字符序列。
  • 当您搜索文本中的数据时,您可使用搜索模式来描述您搜索的内容。
  • 正则表达式可以是单字符,或者更复杂的模式。
  • 正则表达式可用于执行所有类型的文本搜索文本替换操作。

使用字符串方法

在 JavaScript 中,正则表达式常用于下面几个字符串方法

search() 

        search()方法使用表达式来搜索匹配,然后返回匹配的位置。

        注意哦search()方法返回的是匹配字符串的位置

  search()实例
    var str = "Hello World";
    console.log(str.search(/World/i));
    // 控制台结果为6

replace() 

        replace()方法返回模式被替换处修改后的字符串。

  replace()实例
    var str16 = "Hello World!";
    console.log(str16.replace(/World/i, "Microsoft"));
    // 控制台输出结果为 Hello Microsoft!

match()

        字符串匹配到正则表达式时,改方法会提取匹配项并返回包含匹配项的数组,如果未找到匹配项,则 match() 方法返回 null。

  match()实例
    var str17 = "Hello, World!";
    console.log(str17.match(/o/g));
    // 输出: ["o", "o"]

正则表达式修饰符

修饰符用于执行不区分大小写和全局的搜索:

修饰符描述试一试
i执行对大小写不敏感的匹配。试一试
g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。试一试
m执行多行匹配。试一试

正则表达式模式

括号用于查找一定范围的字符串:

表达式描述
[abc]查找括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[^0-9]查找任何不在括号内的字符(任何非数字)。
(x|y)查找任何指定的选项。

元字符(Metacharacter)是拥有特殊含义的字符:

元字符描述
.查找单个字符,除了换行符或行终止符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b在单词的开头/结尾查找匹配项,开头如下:\bHI,结尾如下:HI\b。
\B查找匹配项,但不在单词的开头/结尾处。
\0查找 NULL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

Quantifiers 定义量词:

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何以 n 结尾的字符串。
^n匹配任何以 n 开头的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

 正则例题

  1. 将a换成b,b换成a

        const str = 'aabbasdfccdd'
        console.log(str.replace(/a/g, 'x').replace(/b/g, 'a').replace(/x/g, 'b'));
        // 控制台输出结果为 bbaabsdfccdd
  2. 将the-first-name变成theFirstName

        const str1 = 'the-first-name';
        const newStr = str1.replace(/-([a-z])/g, function(match, char) {
            return char.toUpperCase();
        });
        console.log(newStr);
        // 控制台输出结果为 theFirstName
  3. 数字价格千分位分割

        const str2 = '100000000000000'
        console.log(str2.replace(/\B(?=(\d{3})+$)/g,'.'))
        // 控制台输出结果为 100.000.000.000.000
  4. 数字价格千分位分割还原

        const str3 = '1.000.000.000'
        console.log(str3.replace(/\./g, ''));
        // 控制台输出结果为 1000000000
  5. 手机号3-4-4分割扩展,将手机号18379836654转化为183-7983-6654

        const str4 = '18379836654'
        console.log(str4.replace(/\B(?=(\d{4})+$)/g,'-'))
        // 控制台输出结果为 183-7983-6654
  6. 验证密码的合法性(密码长度是6-12位,由数字、小写字母和大写字母组成)

        const regex1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,12}$/;
        const password = 'aaaaAB111';
        if (regex1.test(password)) {
            console.log('true');
        } else {
            console.log('false');
        }
        
        // 控制台输出结果为 true
  7. 用正则实现一个trim函数,除字符串的首尾空格

        const str5 = '   123456   ';
        console.log(str5.replace(/\s+/g, ''));
        // 控制台输出结果为 123456(去掉首尾空格的)
  8. 将字符串首字母转化为大写,剩下为小写(例如 hello world 转为为Hello World

        const str6 = 'hello world';
        const newStr6 = str6.replace(/\b\w/g, c => c.toUpperCase());
        console.log(newStr6);
        //控制台输出结果为 Hello World
  9. 匹配日期格式,要求匹配(yyyy-mm-dd、yyyy.mm.dd、yyyy/mm/dd)

        const str7 = '2024-03-03';
        const regex = /^\d{4}[-./](0[1-9]|1[0-2])[-./](0[1-9]|1[0-9]|2[0-9]|3[01])$/;
        if (regex.test(str7)) {
            console.log('true');
        } else {
            console.log('false');
        }
        // 控制台输出结果为 true
  10. 提取连续重复的字符,将有重复的字符提取出来

        const str8 = "12323454545666";
        console.log(str8.match(/(.)\1+/g));
         控制台输出结果为 666

        这只是博主的笔记和浅见,更多的大家可以参考W3School官网正则表达式这一章,博主大部分也是参考的这个官网,如果大家认为有错误的地方都可以随时评论留言或联系博主。

        还多请各位小伙伴多多点赞支持,你们的支持是我最大的动力。

博主VX:18884281851

谢谢各位的支持~~

  • 28
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花花´◡`

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值