前端笔记——正则（例题，源码）-前端-CSS教程

前端笔记——正则（例题，源码）

什么是正则表达式？

正则表达式是构成搜索模式（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 的字符串。

正则例题

将a换成b，b换成a

    const str = 'aabbasdf***dd'
    console.log(str.replace(/a/g, 'x').replace(/b/g, 'a').replace(/x/g, 'b'));
    // 控制台输出结果为 bbaabsdf***dd

将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

数字价格千分位分割

    const str2 = '100000000000000'
    console.log(str2.replace(/\B(?=(\d{3})+$)/g,'.'))
    // 控制台输出结果为 100.000.000.000.000

数字价格千分位分割还原

    const str3 = '1.000.000.000'
    console.log(str3.replace(/\./g, ''));
    // 控制台输出结果为 1000000000

手机号3-4-4分割扩展,将手机号18379836654转化为183-7983-6654

    const str4 = '18379836654'
    console.log(str4.replace(/\B(?=(\d{4})+$)/g,'-'))
    // 控制台输出结果为 183-7983-6654

验证密码的合法性（密码长度是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

用正则实现一个trim函数，除字符串的首尾空格

    const str5 = '   123456   ';
    console.log(str5.replace(/\s+/g, ''));
    // 控制台输出结果为 123456（去掉首尾空格的）

将字符串首字母转化为大写，剩下为小写（例如 hello world 转为为Hello World）

    const str6 = 'hello world';
    const newStr6 = str6.replace(/\b\w/g, c => c.toUpperCase());
    console.log(newStr6);
    //控制台输出结果为 Hello World

匹配日期格式，要求匹配(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

提取连续重复的字符，将有重复的字符提取出来

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

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

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

博主QQ：1196094293

谢谢各位的支持~~

正则表达式 javascript

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端笔记——正则（例题，源码）

行道

分享到：