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这个字符串;
结果:

《JavaScript初级结尾——正则表达式》 捕获.PNG

(2)exec()方法

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

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

结果:

《JavaScript初级结尾——正则表达式》 捕获.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字符串。
结果:

《JavaScript初级结尾——正则表达式》 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);

结果:

《JavaScript初级结尾——正则表达式》 捕获.PNG

②从左至右查找第一次出现的子串,找到返回子串的出现的位置(下标),没有找到返回-1

公式:字符串 . search(正则表达式对象)

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

结果:

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

可见在子串中不分大小写查找匹配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);

结果:

《JavaScript初级结尾——正则表达式》 捕获.PNG

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

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

结果:

《JavaScript初级结尾——正则表达式》 捕获.PNG

5.正则表达式的元字符

①转义字符

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

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

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

结果:

《JavaScript初级结尾——正则表达式》 捕获.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));

结果:

《JavaScript初级结尾——正则表达式》 捕获.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));

结果:

《JavaScript初级结尾——正则表达式》 捕获.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));

结果:

《JavaScript初级结尾——正则表达式》 捕获.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>

结果:

《JavaScript初级结尾——正则表达式》 捕获.PNG

7.总结

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

    原文作者:紫荆峰
    原文地址: https://www.jianshu.com/p/909fec4ce326
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞