0
0

【JavaScript】一文了解JS的正则表达式

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：JavaScript专栏

🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

🏍️正则表达式

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，将字符串中符合规则的内容提取出来。

🍇创建正则表达式

构造函数创建

语法：var 变量 = new RegExp("正则表达式","匹配模式");

使用** test()** 这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。

<script>
    // 这个正则表达式可以检查我们字符串是否含有 a 
    var reg = new RegExp("a");
    var str = "a";
    var result = reg.test(str)
    console.log(result);
    console.log(reg.test("a"));
    console.log(reg.test("ddagsgts"));
    console.log(reg.test("dAAAgsgts"));
    console.log(reg.test("dgsgts"));
</script>

在构造函数中可以传递一个匹配模式作为第二个参数。 例如：i 忽略大小写 g 全局匹配模式

<script>
    // 这个正则表达式可以检查我们字符串是否含有 abc 
    var reg = new RegExp("abc","i");
    var str = "abc";
    var result = reg.test(str)
    console.log(result);
    console.log(reg.test("abc"));
    console.log(reg.test("AbC"));
    console.log(reg.test("AC"));
</script>

字面量创建

语法：var 变量 = /正则表达式/匹配模式

<script>
    // 这个正则表达式可以检查我们字符串是否含有 abc 
    // var reg = new RegExp("abc","i");
    // 和上面构造函数创建的正则表达式达到相同效果，两者区别：字面量创建简便，构造创建灵活
    reg = /abc/i;
    console.log(reg.test("abc"));
    console.log(reg.test("AbC"));
    console.log(reg.test("AC"));
</script>

🍈正则语法

或者 | 以及[ ]

<script>
    // 创建正则表达式检查两者或两者以上取其一即可，比如检查是否有 a或b。
    // 使用 | 表示”或者“的意思,[]的内容也是或的意思，[ab] == a | b;
    reg = /a | b/i;
    reg = /[ab]/i;
    console.log(reg.test("abc"));
    console.log(reg.test("AbC"));
    console.log(reg.test("C"));
</script>

匹配字母 [字母-字母]

根据上面的内容我想得到任意的字母并且返回 true ，应该如何做？请看：

<script>
    // [a-z] 任意小写字母
    // [A-Z] 任意大写字母
    // [A-z] 任意字母
    reg = /[A-z]/;
    console.log(reg.test('BUDfvd')); //true
</script>

根据上文内容我想检查字符串是否含有 abc 或 afc 或 agc，如何通过简便的方法匹配呢？如下：

<script>
    // 根据观察，所要正则匹配的都是以a开头，以c结尾都规律，匹配如下：
    reg = /a[bfg]c/;
    console.log(reg.test("afc"));//true
    console.log(reg.test("agc"));//true
    console.log(reg.test("adc"));//false
</script>

剔除唯一 [ ^内容 ]

<script>
    // 剔除只有的内容 [^内容]
    reg = /[^ab]/;
    console.log(reg.test("ab"));//false
    console.log(reg.test("agc"));//true
    console.log(reg.test("abc"));//true
</script>

现在想剔除只有数字的内容

<script>
    // 剔除只有数字的内容 [^内容]
    reg = /[^0-9]/;
    console.log(reg.test("14151"));//false
    console.log(reg.test("agc"));//true
    console.log(reg.test("31313abc4141"));//true
</script>

🍉正则表达式的String对象方法

方法描述search检索与正则表达式相匹配的值match找到一个或多个正则表达式的匹配replace替换与正则表达式匹配的子串split把字符串分割为字符串数组

search()

可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到则返回-1，它可以接收一个正则表达式作为参数，然后会根据正则表达式去检索字符串。

<script>
    var str = 'hello abc world aec hello afc people';
    // 搜索字符串中是否含有 abc aec afc
    var result = str.search(/a[bef]c/);
    var result1 = str.search(/a[k]c/)
    console.log(result);
    console.log(result1);
</script>

match()

可以根据正则表达式，从一个字符串中将符合的内容提取出来。默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有内容。

<script>
    str = '1a2b3c4d5e6f7A8B9C';
    // 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
    result = str.match(/[a-z]/ig);
    console.log(result);
    // match()会将匹配到的内容封装到一个数组中返回，即使只查到一个结果。
    console.log(Array.isArray(result));
    console.log(result[1]);
</script>

replace()

可以将字符串中指定内容替换为新的内容；参数：1、被替换的内容，可以接受一个正则表达式作为参数；2、新的内容；默认只会替换一个。

<script>
    str = '1a2b3c4d5e6f7A8B9C';
    // 默认替换第一个
    result = str.replace(/a/,'$_$');
    console.log(result);
    // 替换全局字母
    result2 = str.replace(/[a-z]/gi,'$_$');
    console.log(result2);
    // 替换字母为空，只保留数字
    result3 = str.replace(/[a-z]/gi,'');
    console.log(result3);
</script>

split()

可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数去拆分字符串

<script>
    var str = '1a2b3c4d5e6f7g8';
    var result = str.split(/[A-z]/);
    console.log(result);
</script>

🍊正则表达式语法

量词

通过量词可以设置一个内容出现的次数，量词只对它前边的内容起作用 - {n} 正好出现 n 次

<script>
    reg = /a{3}/;
    console.log(reg.test("aaabc"));
    console.log("---------------");
    reg = /ab{3}/;
    console.log(reg.test("ababab"));
    console.log(reg.test("abbbc"));
    console.log("---------------");
    reg = /(ab){3}/;
    console.log(reg.test("ababab"));
</script>

通过量词我们也可以设置出现的次数，{n,m} n到m次都是可以的，当然设置{1,}代表1次以上。

<script>
    reg = /ab{1,3}c/;
    console.log(reg.test("abc"));
    console.log(reg.test("abbc"));
    console.log(reg.test("abbbc"));
</script>

量词总结
量词描述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 的字符串
量词举例：

<script>
    // 至少一个，相当于{1,}
    reg = /ab+c/;
    console.log(reg.test("ac"));
    console.log(reg.test("abc"));
    console.log(reg.test("abbc"));
    console.log("---------------");
    // 0个或多个，相当于{0,}
    reg = /ab*c/;
    console.log(reg.test("ac"));
    console.log(reg.test("abc"));
    console.log(reg.test("abbc"));
    console.log("---------------");
    // 0个或一个，相当于{0,1}
    reg = /ab?c/;
    console.log(reg.test("ac"));
    console.log(reg.test("abc"));
    console.log(reg.test("abbc"));
    console.log("---------------");
    // ^表示开头，$表示结尾
    // 如果正则表达式中同时使用^和$，则要求字符串必须完全符合正则表达式。只能是一个a
    // 如果想以a开头并且以a结尾：/^a/&&/a$/;
    reg = /^a/;
    console.log(reg.test("ac"));
    console.log(reg.test("gsgabc"));
    console.log("-----------");
    reg = /a$/;
    console.log(reg.test("bfgqga"));
    console.log(reg.test("bfgeaaqg"));
    console.log("----------------");
    reg = /^a$/;
    console.log(reg.test("a"));
    console.log(reg.test("aa"));
    reg = /^a/&&/a$/;
    console.log(reg.test("aa"));
</script>

手机号正则

创建一个正则表达式，用来检查一个字符串是否是一个正常合法的手机号。

国内手机号规则：

1、第一位数字以1开头 ^1

2、第二位数字3-9任意数字 [3-9]

3、三位以后任意数字9个 [0-9]{9}$

<script>
    var phoneReg = /^1[3-9][0-9]{9}$/;
    var phoneStr = '13252278267';
    var phoneStr1 = '11252278267';
    console.log(phoneReg.test(phoneStr));//true
    console.log(phoneReg.test(phoneStr1));//false
</script>

邮件正则

创建一个正则表达式，用来检查一个字符串是否是一个正常合法的邮件。

邮件规则：（QQ为例）

1、第一位任意字母数字下划线 \w{3,}

1.1、第一位可能中间会出现点 \w{3,}(.\w+)*

2、第二位 @ @

3、第三位任意字母数字 [A-z0-9]+

4、第四位 .任意字母(2-5位)(会多个) (.[A-z]{2,5}){1,2}

<script>
    // ^和$添加表示一个完整的邮件，是不能省略的
    var emailReg =  /^\w{3,}@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
    var email = '[email protected]';
    console.log(emailReg.test(email));
</script>

转译字符

在正则表达式中使用 \ 作为转译字符。

<script>
    // 检查一个字符中是否含有 . , . 表示任意字符，我们要通过转译告诉计算机我们检查的就是一个 . ;
    // \.表示 . ; \\表示 \
    var reg = /\./;
    var reg1 = /\\/;
    console.log(reg.test("bbb.ff"));
    console.log(reg1.test("bbb\\ff"));//斜杠在字符串中也是转译字符，一个斜杠会把后面的引号转译掉，所有我们需要两个斜杠
</script>

元字符

<script>
    // \w 任意字母、数字、_ [A-z0-9]
    // \W 除了字母、数字、_ [^A-z0-9]
    reg = /\w/;
    console.log(reg.test('12faf'));
    reg = /\W/;
    console.log(reg.test("$$$"));
    console.log("---------------");
    // \d 任意数字 [0-9]
    // \D 除了数字 [^0-9]
    reg = /\d/;
    console.log(reg.test('12079'));
    reg = /\D/;
    console.log(reg.test("$$jbvkj$"));
    console.log("---------------");
    // \s 空格
    // \S 除了空格
    reg = /\s/;
    console.log(reg.test('1 2079'));
    reg = /\S/;
    console.log(reg.test("  "));
    console.log("---------------");
    // \b 单词边界
    // \B 除了单词边界
    reg = /\bhello\b/; //检查字符串中是否有该单词
    console.log(reg.test('hello world'));
    console.log(reg.test('helloworld'));
    console.log("---------------");
</script>

去除空格相关实例：

<script>
    // 去除空格用""来代替空格
    var str = "     ad   min     ";
    console.log(str);
    // 去除开头空格
    // str = str.replace(/^\s*/,"");
    // console.log(str);
    // 去除结尾空格
    // str = str.replace(/\s*$/,"")
    // console.log(str);
    // 去除开头和结尾空格
    str = str.replace(/^\s* | \s*$/g,"")
    console.log(str);
</script>

🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

呜呜~，原创不易。

标签： javascript 开发语言 前端
本文转载自: https://blog.csdn.net/qq_53123067/article/details/126167131
版权归原作者 亦世凡华、 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【JavaScript】一文了解JS的正则表达式”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

【网络】网络抓包与协议分析

Windows系统如何本地部署Ollama并运行千文qwen大模型详细教程

【devops】x-ui 实现一键安装 x-ray 打造高速国际冲浪 | xray管理平台

【devops】ttyd 一个web版本的shell工具 | web版本shell工具 | web shell

this.$router.push方法 携带参数跳转路由

docker无法搜索和拉取镜像

visual studio之安装详解

文章导航