JavaScript(13) - 正则表达式的使用和常用正则表达式

最新推荐文章于 2022-07-03 13:04:44 发布

选项：C

最新推荐文章于 2022-07-03 13:04:44 发布

阅读量1.3k

点赞数 1

文章标签： javascript 前端开发语言 visual studio code

本文链接：https://blog.csdn.net/weixin_46106512/article/details/123881671

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

正则表达式介绍

正则表达式(Regular Expression)是一个描述字符模式的对象, 用于对字符串进行匹配, 一般用在有规律的字符串匹配中; 如: 匹配用户名是否正确, 邮箱是否正确等2
正则表达式常用于表单验证, 如在HTML表单中填写的用户名、地址、出生日期, 邮箱等信息, 在表单提交到服务器做进一步处理之前, 我们需要先检查表单中的信息是否符合要求, 做表单验证, 以确认用户确实输入了信息并且这些信息是符合要求的.

提示：以下是本篇文章正文内容，下面案例可供参考

一、正则表达式的使用

创建正则表达式有两种方式 :

1. 使用new

var box = new RegExp("box"); //传入非空字符串 
console.log(box);   // /box/
console.log(typeof box); //object


var box = new RegExp("box", "gi");  //第二个参数是模式修饰符
console.log(box); // /box/gi

1. 采用字面量方式

var box = /box/;
console.log(box);   // /box/
console.log(typeof box); //object
			
var box = /box/gi;
console.log(box); // /box/gi

注意: 其中g表示全局匹配, i表示忽略大小写

1, 使用正则表达式匹配字符串有两种方式:

test() : 返回true则符合, false则不符合
exec() : 返回数组则符合, null则不符合这两种方法使用正则表达式对象去调用, 参数为要匹配的字符串

var box = /box/gi;
var str = "This is a Box bOX box";
console.log(box.test(str));
console.log(/box/gi.test(str));

var box = /box/gi;
var str = "This is a Box boX"
console.log(box.exec(str));
console.log(/box/gi.exec(str));

2, 字符串的正则表达式方法

除了 test()和 exec()方法，String 对象也提供了 4 个使用正则表达式的方法。

var str = "This is a Box box BoX";
var matchArr = str.match(/box/gi);
console.log(matchArr); //返回数组或null
			
//查找并替换, 返回替换后的新字符串
var replaceStr = str.replace(/box/gi, "xxx");
console.log(replaceStr);
			
//查找并返回匹配的字符串的起始位置,找不到匹配的则返回-1
var searchIndex = str.search(/box/i);
console.log(searchIndex);
			
//根据指定字符串拆分, 返回拆分后的数组, 否则返回原字符串
var splitArr = str.split(/b/i);
console.log(splitArr.length);

//.号元字符, 代表除了换行之外的所有单个字符
var pattern = /g..gle/;   //一个点.匹配一个任意的字符
var str = "goagle";
console.log(pattern.test(str));

//*号元字符, 配合其他字符使用, 允许其他字符出现任意多次
// 重复多次匹配, 可以出现任意次, 
var  pattern = /g.*gle/; //.* 匹配0到多个字符
var  str = "google" 
console.log(pattern.test(str)); 

// [ ] : 表示字符可以出现的范围
//[a-z]*表示任意0到多个a-z的字母
var pattern = /g[a-z]*gle/;
var str = "google";
console.log(pattern.test(str));


//非字符:  ^
var pattern = /g[^0-9]*gle/; //可以有任意多个非0-9的字符
var str = "google";
console.log(pattern.test(str)); 
			
//+ 表示至少出现1次
//[A-Z]+: 至少出现一个A-Z的字符
var pattern = /[a-z][A-Z]+/;
var str = "gooGle";
console.log(pattern.test(str)); 
			
//使用元符号匹配
//\w* :匹配任意多个数字字母下划线 , \w : 等价于[a-zA-Z0-9_] 
var pattern = /g\w*gle/;
var str = "gooA3gle";
console.log(pattern.test(str));

//\d 代表数字, 等价于 [0-9]
//\d* 表示任意多个数字
var pattern = /g\d*gle/;
var str = "g3243gle";
console.log(pattern.test(str)); 
			
//\D: 匹配非数字, 相当于[^0-9]
var pattern = /g\Dgle/;
var str = "ga3gle";
console.log(pattern.test(str)); 
			
//\D{7,}: 匹配至少7个非数字, 相当于[^0-9]{7,}
var pattern = /\D{7,}/;
var str = "g3243gle";
console.log(pattern.test(str)); 

//使用锚元字符
// /^ 匹配开始,从头开始匹配
// $/ 匹配结尾,从结尾开始匹配
var pattern = /^google$/;
var str = "google";
console.log(pattern.test(str));
			
// \s 匹配空格
var pattern = /goo\sgle/;
var str = "goo gle";
console.log(pattern.test(str));

//使用或模式匹配: |
// | 代表或者的意思, 匹配其中一种字符串
var pattern = /google|baidu|bing/;  // | : 匹配三个中的其中一个字符串
var str = "googl2e bai3du;bingl"
console.log(pattern.test(str));
			
//分组模式匹配: ()
// ()加上小括号, 将内容进行分组, 可以作为一个整体进行多次匹配
var pattern = /(google){4,8}/;   //匹配分组中的字符出现4-8次
var str = "googlegooglegooglegoogle"
console.log(pattern.test(str));
			
//获取8..8之间的任意字符
var pattern = /8(.*)8/;
var str = "this is 8google8 baab 8ggg8";
console.log(str.match(pattern)); 
console.log(RegExp.$1); //"google8 baab 8ggg"

使用exec返回数组
//exec 方法将匹配到的内容返回, 并将()分组的内容也放入数组返回
						
//以字母开头,至少一个, 忽略大小写
var pattern = /^[a-z]+/i;
var str = "google 2016";
console.log(pattern.exec(str)); //"google"
			
// /^[a-z]+\s[0-9]{4}$/i : 表示以字母开头, 至少有一个字母,有一个空格,和4个数字,并以数字结尾,忽略大小写
var pattern = /^[a-z]+\s[0-9]{4}$/i;
var str = "google 2016";
console.log(pattern.exec(str)); //"google 2016"

//使用分组
var pattern = /^([a-z]+)\s([0-9]{4})$/i;
var str = "google 2016";
console.log(pattern.exec(str));     //"google 2016,google,2016"
console.log(pattern.exec(str)[0]); //google 2016
console.log(pattern.exec(str)[1]); //google  RegExp.$1
console.log(pattern.exec(str)[2]); //2016    RegExp.$2
console.log(RegExp.$1);  //google  RegExp.$1
console.log(RegExp.$2);  //2016  RegExp.$2

//捕获性分组 和非捕获性分组
//捕获性分组
var pattern = /(\d+)([a-z])/;    //一个或多个数字,和一个a-z的字母
var str = "123abc";
console.log(pattern.exec(str)); //"123a,123,a"

//非捕获性分组(添加?:后不会捕获第二个括号中的内容)
var pattern = /(\d+)(?:[a-z])/; 
var str = "123abc";
console.log(pattern.exec(str)); //"123a,123"

//使用特殊字符匹配
// \: 转义符,可以将本来有语义的字符没有语义, 这里的.和[]都是字符, 不代表任何正则匹配的语义
var pattern = /\.\[\/b\]/;
var str = ".[/b]"
console.log(pattern.test(str)); 
			
//使用换行模式
//m: 换行模式, 换行后又重新开始匹配
// /^表示以数字开头
var pattern = /^\d+/mg;
var str = "1,baidu\n2,google\n3,bing";
console.log(str.replace(pattern, "#"));

二、常用正则表达式

1.邮政编码(共6位数字, 第一位不能为0)

var pattern = /^[1-9]\d{5}$/;
var str = "518000"
console.log(pattern.test(str));

2.电子邮件(xxxx@xxx(.xxx)+)

var str = "zh.an.san@1000phone.com"
var pattern = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
console.log(pattern.test(str));

3.手机号(13或14或15或18开头的11位数字)

var pattern = /^((13[0-9])|(14[5|7])(15([0-3]|[5-9]))|(18[05-9]))\d{8}$/;
var str = "18676273422";
console.log(pattern.test(str));

4.用户名(只能使用数字字母下划线, 且数字不能开头, 长度在6-15位)

var pattern = /^[a-zA-Z_]\w{5,14}$/;

5.删除多余空格

var str = "   zhang  san";
var pattern = /\s+/g;
str.replace(pattern, “”);  //zhangsan

6.删除首尾空格

str.replace(/^\s+/, "");
str.replace(/\s+$/, "");
var str = "  Li    ss  ";
console.log(str.replace(/^\s+/, ""));
console.log(str.replace(/\s+$/, ""));

7.身份证

var pattern = /^\d{17}(\d|X)$/;
var str = "42517372848273771X";
console.log(pattern.test(str));

8.中文

var str = "张三";
var pattern = /[\u4e00-\u9fa5]+/;
pattern .test(str);

9.简单日期格式

 var str = "2017-11-11";
var pattern = /^\d{4}\-\d{1,2}\-\d{1,2}$/;
pattern .test(str);

10.图片文件格式

var str = "aa.jpg";
var pattern = /\.(jpg|jpeg|gif)$/i;
pattern .test(str);

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了正则表达式的使用 ,
下面还有几天的代码和作业

1.正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <script>
    //正则对象定义方式
        //第一种定义 常用
        var regx = /^b$/ // 声明的就是一个正则对象 ^表示开头 $表示结尾 只匹配一个b这一个字母
        //第二种定义
        var regx1 = new RegExp('^a$')//声明一个正则对象 只匹配a这个字母
        

        //[]表示其中的一个元素
        var regx2 = /^[abcdef]$/ //表示匹配[]里面的其中一个字母

        //{}表示个数
        var regx3 = /^[abc]{2}$/ //匹配 ab bc... 等[]里面的字母任意组合

        // g全局匹配 (全局搜索所有结果 没有全局找到第一个就不找了) i表示不区分大小写
        var regx4 = /^[ab]{2}$/gi //匹配 aa ab aA aB ... 等[]里面两个字母大小写任意组合
        console.log(regx4.exec('aa'));
        // 所有第二种定义如果需要加上g或i关键词
        var regxObj = new RegExp('^a$','gi')

        //修饰符
        // +表示1个到多个
        var regx5 = /^[a]+$/  //匹配 a aa aaa... 匹配一个或多个a

        //*表示0个或多个
        var regx6 = /^[ab]*$/

        //?表示0个到一个
        var regx7 = /^a[ab]?$/ //匹配 a aa ab

    //对应正则对象的方法
        // test 是否符合对应的表达式 test() 里面的参数为string类型 返回结果为boolean类型
        console.log(regx7.test('a'));//true
        console.log(regx7.test('aba'));//false

        // exec 方法 找到符合的所有结果 返回数组 没有匹配的返回null
        console.log(regx7.exec('ab'));
        //针对里面的[] * + .等等 没有办法直接解析的 需要加转义符\
        var regx8 = /^\[\]$/
        var regx9 = /^\*$/
        console.log(regx8.test('[]'));
        console.log(regx9.test('*'));

    </script>
    
</body>
</html>

2.作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        //把刚才返回的歌词 提取出两个数组 一个装时间 一个装歌词
        var obj = {"lyric":"[00:00.000] 作词 : 队长\n[00:01.000] 作曲 : 队长/박수석/김문철\n[00:13.580]编曲：박수석，김문철\n[00:14.580]从不在意别人口中的自己\n[00:21.080]她说过了一个想听花言巧语的年纪\n[00:29.200]你选择了他们口中所谓的放弃\n[00:34.440]却才发现早就丢掉了自己\n[00:43.560]特别是一个人的夜里\n[00:47.060]没人能够控制住自己\n[00:49.700]让全部回忆藏在心底泛起涟漪\n[00:58.650]你想要的是现在\n[01:02.119]而不是那遥远的未来\n[01:06.120]选择的困惑\n[01:12.200]再没人能懂你\n[01:14.010]生气的原因和哭泣的无力\n[01:18.900]最遥远的距离\n[01:26.700]忘了吧忘了吧忘了吧忘了你的所有\n[01:30.799]不过只是找了一堆美丽的理由\n[01:34.700]把你的痕迹都统统掩埋\n[01:37.700]你走过的地方只剩下思念难捱\n[01:41.700]把你藏在心头\n[01:44.700]每天每夜想你\n[01:48.700]害怕你的眼泪\n[01:52.370]没人为你抹去\n[01:55.700]不能想象没有了你的未来\n[01:59.500]你身边那位能让你过得比我更精彩I want you back\n[02:09.699]我忘掉你的所有 风里雨里一直大步往前走\n[02:17.699]我又怎么能够忘掉你的温柔\n[02:24.900]换不同的场景\n[02:28.699]但哪里都是你\n[02:31.699]要怎么能忘记 忘记你\n[02:35.900]所有人都知道I can't let you go\n[02:40.120]每个人都知道 I can't let you go\n[02:43.580]你为什么还不知道 I can't let you go\n[02:47.620]Baby baby I can't let you go\n[02:50.930]在你的心里我是怎样一个人\n[02:54.560]把话都袒露让你知道我心声\n[02:58.009]You know you know\n[03:02.439]感谢你陪我走过这一程\n[03:11.150]You know you know\n[03:14.629]感谢你陪我走过这一程\n[03:18.430]You know you know\n[03:22.030]每天多爱自己一点 把恨我当成动力\n[03:25.830]别那么晚睡\n[03:30.629]我想你过的好 是唯一对你放不下的\n[03:33.629]习惯吧\n[03:36.699]-----\n[03:37.500]\n"}
        //取出歌词信息
        var lyricStr = obj.lyric
        //切割成数组 split 支持正则
        var regx = /\n/
        var lyricArr = lyricStr.split(regx)
        lyricArr.pop()//删除最后一个内容
        var timeArray = []
        var lyricStrArr = []
        //遍历数组
        for(var i in lyricArr){
            var lyric = lyricArr[i] //取出每句的歌词信息
            var regx1 = /\[[0-9]{2}\:[0-9]{2}\.[0-9]{3}\]/ //匹配时间的正则
            var time = regx1.exec(lyric)[0]//获取匹配的第一个元素
            timeArray.push(time)
            //replace 支持正则
            var lyricRep = lyric.replace(regx1,'')//将匹配的结果替换为空字符
            lyricStrArr.push(lyricRep)
        }
        console.log(timeArray);
        console.log(lyricStrArr);

        //string 类型支持正则的方法
        //split 截取方法
        //replace 替换方法支持正则
        //seach 搜索方法
        //match 正则对象的exec方法很像 返回也是一个数组 里面的元素为匹配的结果 (返回第一个找到的)
        var regx2 = /[abc]{2}/
        console.log('abca'.match(regx2));
        //正则对象的方法
        //test方法 判断是否有匹配的 有返回true 没有返回false
        //exec方法 返回一个数组 数组里面为匹配的结果 (返回第一个找到)
        //如果加g的话 从左到右找 找到的元素就不管了
        var regx3 = /[abc]{2}/g
        console.log('abcabb'.match(regx3));//全局查找
    </script>
    
</body>
</html>

选项：C

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(13) - 正则表达式的使用和常用正则表达式

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言正则表达式介绍一、正则表达式的使用创建正则表达式有两种方式 :1, 使用正则表达式匹配字符串有两种方式:2, 字符串的正则表达式方法二、常用正则表达式1.邮政编码(共6位数字, 第一位不能为0)2.电子邮件(xxxx@xxx(.xxx)+)3.手机号(13或14或15或18开头的11位数字)4.用户名(只能使用数字字母下划线, 且数字不能开头, 长度在6-15位)5.删除多余空格6.删除首尾空格7.身份证8.中文9.简单日期格.
复制链接

扫一扫