JavaScript初级结尾——正则表达式


0.前言

前面讲的大部分都是初级阶段的知识点,在其他网站应该都能找到,不过我写的文章不仅仅是和大家分享,同时也是作为一份笔记,再往后的日子碰到问题能够很好的找到解决办法,正所谓温顾而知新。废话不多说,今天来分享初级阶段最后一个知识点——RegExp(正则表达式)的方法。

1.什么是正则表达式

什么是正则表达式?
要检索某个文本的时候,可以使用一种模式对这个文本的内容进行解析,这个模式可以是一个单独的字符,也可以是一系列复杂的字符,可以实现对文本内容的解析、校验、替换等功能。RegExp是正则表达式的缩写。

为什么要用正则表达式?
前端往往有大量的表单数据校验的工作,采用正则表达式会使得数据校验的工作量大大减轻。

假设用户需要在HTML表单中填写姓名、地址、出生日期等,那么在将表单提交到服务器进一步处理前,JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的。

2.创建正则表达式对象

(1)构造函数法

公式:var 变量名 = new RegExp(模式,模式修饰词);
模式:代表的是要在字符串中查找的一个子字符串;
模式修饰词:g、i、gi ;
g表示全局匹配;
i表示忽略字母大小写;
gi表示忽略大小写并全局匹配;
如:

var re1 = new RegExp("good", "gi");
(2)字面量法
var re2 = /good/gi;

3.RegExp的方法

我们首先来搭建一个html页面框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp的方法</title>
</head>
<body>
    <script type="text/javascript">
        var str = "sunck is a Good gOod GOOD man!";
        var re = /good/gi;
    </script>
</body>
</html>
(1)text()方法

作用:在字符串中查找是否有正则表达式对象描述的规则字符串。
参数:字符串;
返回值:如果有返回true,如果没有返回false;
在js代码中添加如下代码

var ret1 = re.test(str);
console.log(ret1);

表示的是在str字符串中不分大小写查找是否有good这个字符串;
结果:

捕获.PNG
(2)exec()方法

作用:在字符串中查找正则表达式对象描述的规则字符串;
参数:字符串;
返回值:找到了是数组,没有的话是null;
注意:返回值是一个数组,数组中的第一个元素是找到的数据,第二个元素是坐在字符串中的出现的位置(下标),第三个参数是待查找字符串。

var ret2 = re.exec(str);
console.log(ret2);

结果:

捕获.PNG

exec()的工作原理:
  1、如果正则对象不使用全局匹配,一直找到的都是第一个匹配的内容.
   2、使用全局匹配,首先是找到第一个匹配内容,记录下此时的下标。再一次调用exec在同一个字符串中查找,会从上一次记录的下标后开始查找。以此类推,最后结束找不到会得到null,此时如果在调用查找,就从头开始查找。这就是上面用exec()匹配字符时第一个出现的字符不是Good,而是gOod。

注意:如果exec与test混用需要特别注意,因为test也会记录下标,在test之后使用exec,exec会从test记录的下标后开始查找。

(3)instanceof方法

作用:使用instanceof判断用构造函数创建的对象的类型

console.log(ret2 instanceof Array);

上面判断的事ret2是否是Array(数组)类型,返回结果事true

(4)compile()

作用:修改正则对象的模式和模式修饰词

re.compile("nice");
console.log(re.test(str));

由原来要匹配的good字符串。修改成要匹配nice字符串。
结果:

1.png

在str字符串中未找到与nice匹配的字符串,所以返回false。

4.String类型中的正则表达式的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String类型中的正则表达式的应用</title>
</head>
<body>
    <script type="text/javascript">
        
    </script>
</body>
</html>

①在字符串中提取匹配的子串
公式:字符串 . match(正则表达式对象)

var str1 = "sunck is a Good good GOOD man!";
var ret1 = str1.match(/good/gi);
console.log(ret1);

结果:

捕获.PNG

②从左至右查找第一次出现的子串,找到返回子串的出现的位置(下标),没有找到返回-1
公式:字符串 . search(正则表达式对象)

var str2 = "sunck is a Good good GOOD man!";
var ret2 = str2.search(/good/i);
console.log(ret2);

结果:


可见在子串中不分大小写查找匹配good的字符串时,与Good相符合,而此时Good的一个字符“G”出现的下表位置为11。
注意:此时匹配全局的g没有用处。
③字符串 . replace(被替换的字符串或正则表达式, 新的字符串)

var str3 = "sunck is a Good good GOOD man!";
var ret3 = str3.replace(/good/gi, "handsome");
console.log(ret3);

结果:

捕获.PNG

④字符串 . split(要切割的字符串或正则表达式)

var str4 = "sunck is a Good good GOOD man!";
var ret4 = str4.split(/good/gi);
console.log(ret4);

结果:

捕获.PNG

5.正则表达式的元字符

①转义字符

“\” 转义字符,将下一个字符转换成为一个特殊字符或一个原义字符
   例如'n'匹配原义字符"n"。'\n'匹配特殊字符换行符;
"[]"匹配特殊字符[],而"\[\]"则匹配原义字符"[]"。
""这个字符很特殊,在字符串也需要转义。用"\\"表示

用上面的规则,添加如下代码:

//将原义字符转为特殊字符
console.log("sunck  \n  sunck");
//将特殊字符转为原义字符
console.log("sunck  \[\]  sunck");
console.log("sunck  \"good\"  sunck");
console.log("sunck  \\  sunck");

结果:

捕获.PNG

②匹配单个字符与数字
规则:

(1) . 匹配除换行符外的任意字符
(2) [a-z0-9] []是字符集合,表示匹配方括号中所包含的任意一个字符, -表示字符范围。匹配指定范围内的任意一个字符. 这里表示匹配a到z或0到9(即所有的小写字母或数字)中的任意一个字符 注意!!!!是一个字符!
(3) [^a-z0-9] []中的^(脱字符)表示非,这里表示匹配除了a-z和0-9(即除了所有的小写字母或数字)以外的任意一个字符
(4) \d 匹配数字,效果同[0-9]
(5) \D 匹配非数字,效果同[^0-9]
(6)\w 匹配数字,字母,下划线,效果同[0-9a-zA-Z_]
(7)\W 匹配非数字,字母,下划线,效果同[^0-9a-zA-Z_]
(8) \s 匹配任何空白字符,包括空格、换页符、换行符、回车符、制表符等等。等价于[ \f\n\r\t]。
(9)\S 匹配非空字符,等价于[^ \f\n\r\t]

var str1 = "sunck is a good man";
        var re1 = /./;
        console.log(re1.test(str1));

        var str2 = "Sunck";
        var re2 = /[a-z0-9]/;
        console.log(re2.test(str2));

        var str3 = "SunckY!";
        var re3 = /[!!!!!!!!!Y]/;
        console.log(re3.test(str3));


        var str4 = "sunck";
        var re4 = /[^a-z0-9]/;
        console.log(re4.test(str4));

        var str5 = "SunckY6!";
        var re5 = /\d/;
        console.log(re5.test(str5));

结果:

捕获.PNG

③锚字符

^ 行首匹配 和 在[]字符集和中的 ^ 不是一个意思。
$ 行尾匹配

var str6 = "Sunck is a good man";
        var re6 = /^[a-zA-Z]/;
        console.log(re6.test(str6));
        
        var str7 = "Sunck is a good man!e";
        var re7 = /[!]$/;
        console.log(re7.test(str7));

结果:

捕获.PNG

④匹配多个字符

说明:以下的x,y,z均为假设的普通字符,不是正则表达式元字符
(1) (xyz) 匹配括号内的xyz(作为一组整体去匹配)
(2)x? 匹配0个或1个x
(3) x* 匹配0个或者任意多个x 延伸: .* 表示匹配0个或者任意多个任意字符(除换行符以外)
(4) x+ 匹配至少一个x
(5)x{n} 匹配确定的n个x (n是一个非负整数) 注意:是连续的
(6) x{n,} 匹配至少n个x (n是一个非负整数) 注意:是连续的
(7) x{n,m} 匹配至少n个,最多m个x (n,m是非负整数,n<=m) 注意:是连续的
(8) x|y |表示或 ,这里指匹配x或y

var str9 = "sunck is a good man";
        var re9 = /(sunck)/;
        console.log(re9.test(str9));

        //a  aq
        //1.zip   a.zip   aljfie.zip
        var str10 = "sunck is a good man";
        var re10 = /Z?/;
        console.log(re10.test(str10));



        var str11 = "sunck is a goodgood man";
        var re11 = /(good){3}/;
        console.log(re11.test(str11));


        var str12 = "sunck is a goodgoodgoodgood man";
        var re12 = /(good){3,}/;
        console.log(re12.test(str12));


        var str13 = "sunck is a good good good good good good man";
        var re13 = /(good){2,4}/g;
        console.log(re13.exec(str13));
        console.log(re13.exec(str13));
        console.log(re13.exec(str13));
        console.log(re13.exec(str13));


        var str14 = "sunck is a handsome   man";
        var re14 = /good|nice/g;
        console.log(re14.test(str14));

结果:

捕获.PNG

6.常用的正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的正则表达式</title>
</head>
<body>
    <script type="text/javascript">
        //验证邮编
        //150232
        var str1 = "153232";
        // var re1 = /^\d\d\d\d\d\d$/;
        // var re1 = /^\d\d{4}\d$/;
        var re1 = /^\d{6}$/;
        console.log(re1.test(str1));


        //验证压缩包  sunck.zip   sunck.rar   sunck.gz
        var str2 = "sunck.zip1";
        var re2 = /.+\.(zip|rar|gz)$/;
        console.log(re2.test(str2));


        
        //验证QQ邮箱
        var str3 = "888888@qq.com"; 
        var re3 = /^\d{5,}@qq\.com$/;
        console.log(re3.test(str3));

        //验证163邮箱
        var str4 = "888888@QQ.com"; 
        var re4 = /\w+@163\.com$/;
        console.log(re4.test(str4));
    
    </script>
</body>
</html>

结果:

捕获.PNG

7.总结

  正则表达式目前就只有整理这么多了,如果有不足的地方,希望来信,改正!!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,009评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,808评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,891评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,283评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,285评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,409评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,809评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,487评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,680评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,268评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,815评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2 341

推荐阅读更多精彩内容