JavaScript 正则表达式

2021-05-06 12:56:05 更新

B站关联视频教程:https://www.bilibili.com/video/BV1RA41137yd?p=24

目录:

一、js正则是什么?

二、js正则应用范围

三、如何使用?

    方法一:RegExp()对象【方法:test()、exec()】

    方法二:match方法

    方法三:search 方法

四、正则表达式的构成

    1、原子

    2、元字符

        2.1、元字符_原子表

        2.2、元字符_重复匹配

        2.3、元字符_边界限制

        2.4、元字符_.

        2.5、元字符_模式选择

        2.6、js正则标志/g /i的

        2.7、元字符_模式匹配的顺序

五、案例

    1、手机号码的验证

    2、Email的验证

    3、中文字符的验证

    4、姓名必须是全部汉字,且大于2个汉字

    5、验证网址中必须有https://或者http://

    6、保护用户隐私,隐藏手机号码中的部分数字


内容:

一、js正则是什么?

正则表达式(regular expression) RegExp 是正则表达式的缩写

正则表达式(Regular Expression)是用于描述字符排列模式的一种语法规则。

二、js正则应用范围

表单验证、数据验证、字符串的分割、匹配、查找及替换等。

正则表达式主要作用是用来匹配字符串。 

JS以及众多高级语言(如php、java、asp.net等)都支持正则表达式。

正则表达式的工作原理:使用的是通配符匹配技术。

通配符在计算机中应用比较多的是查找文件。当要查找一个文件而记不清文件时,通常就使用通配符的方式来查找。

三、如何使用?

方法一:RegExp类对象

var patt=new RegExp(正则表达式,modifiers);
或者更简单的方式:
var patt=/正则表达式/modifiers;

注:modifiers值主要有g或i ;
g:所有匹配;
i:不区分大小写

new RegExp(正则表达式)和var patt=正则表达式;是等效的。正则,不能加引号。

<script>
    var cont="abcA";//匹配
    // var c=new RegExp(/^[a-z]+$/,'i')
    var c=new RegExp(/^[a-z]+$/i)
    if(c.test(cont)){
        document.write('匹配');
    }else{
        document.write('不匹配');
    }
</script>

new RegExp(/^[a-z]+$/,'i')和new RegExp(/^[a-z]+$/i)一样。

简写如下:

<script>
    var cont="abcA";//匹配
    var c=/^[a-z]+$/i;
    if(c.test(cont)){
        document.write('匹配');
    }else{
        document.write('不匹配');
    }
</script>

RegExp类对象方法:test()、exec()

test 返回 Boolean,查找对应的字符串中是否存在模式

exec 查找并返回当前的匹配结果,并以数组的形式返回,如果未找到匹配,则返回值为 null。

compile() 方法用于在脚本执行过程中编译正则表达式。

compile() 方法也可用于改变和重新编译正则表达式。

    <script>
        var cont="3453453454";//匹配
        //cont="3453453dds454ASD";//匹配
        //cont="3453453dds454ASD~";//不匹配
        //var c = new RegExp("/^[A-Za-z0-9]+$/");   
        var c = /^[A-Za-z0-9]+$/;
        if(c.test(cont)){
            document.write('匹配');
        }else{
            document.write('不匹配');
        }
    </script>

方法二:match方法

格式:

stringObj.match(rgExp)

说明:

1、该方法类似 indexOf() 和 lastIndexOf(),但是,它返回指定的值,而不是字符串的位置。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组该数组的内容依赖于 regexp 是否具有全局标志 g。

<script>
    var str="Hello world! world"
    document.write(str.indexOf("world") + "<br />")     //6
    document.write(str.lastIndexOf("world") + "<br />") //13
</script>

2、如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。

在本例中,我们将使用全局匹配的正则表达式来检索字符串中的所有数字:

<script>
    var str="1 a 2 b 3"
    document.write(str.match(/\d+/)) //1
    document.write("<br/>");
    document.write(str.match(/\d+/g)) //1,2,3
</script>

在本例中,我们也可以使用它进行数据是否匹配的验证:

<script>
    var cont="abc@163.com";
    var c =/^\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}$/i;
    if(cont.match(c)){
        document.write('email匹配');    
    }else{
        document.write('email不匹配');    
    }
</script>

在本例中,如何使用 match() 来检索一个字符串。

<script>
    var str="Hello world!"
    document.write(str.match("world") + "<br />")   //world
    document.write(str.match("World") + "<br />")   //null
    document.write(str.match(/World/i) + "<br />")  //world
    document.write(str.match("worlld") + "<br />")  //null
    document.write(str.match("world!"))             //world!
</script>

方法三:search方法

格式:

stringObj.search(rgExp)

返回与正则表达式查找内容匹配的第一个子字符串的位置(偏移位)。

如果找到则返回子字符至开始处的偏移位,否则返回-1

<script>
    //查找内容匹配的第一个子字符串的位置
    //这里输出:3 原因是a下标是0位,b下标是1,以此类推@下标就是3
    var cont="abc@163.com";
    var c =/@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}/i;
    document.write(cont.search(c));
</script>

//email地址的验证

var cont="abc@163.com~!";

var c =/^\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}$/i;

if(cont.search(c)!=-1){

    document.write('email匹配');

}else{

    document.write('email不匹配');

}

<script>
    //email地址的验证 这里输出:email不匹配
    var cont="abc@163.com~!";
    var c =/^\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}$/i;
    if(cont.search(c)!=-1){
        document.write('email匹配');
    }else{
        document.write('email不匹配');
    }
</script>

四、正则表达式的构成

  • 原子(普通字符)

个人字符、数字,如: a~z,A~Z,0~9

……

  • 元字符(特殊字符)[]、?、*、+、{}、$(或\Z)、^(或\A)、.、|、()

……

JS中正则表达式的写法:

/expression/   

例如:c =/^1[0-9]{10,10}$/;   //11位手机号码的验证

    <script>
        
        var cont="15309695130";
        document.write("长度是:"+cont.length+"<br/>");
        var zz=/^1[0-9]{10}$/;
        // var zz=/^1[0-9]{10,10}$/;        
        document.write(zz.test(cont));
    </script>

1、原子

原子是组成正则表达式的基本单位。在分析正则表达式时,应作为一个整体。

原子包括:所有的英文字母、数字、标点符号以及其他的一些符号(普通转义字符、转义元字符等)。


原子

说明

\d

匹配一个数字;等价于[0-9]

\D

匹配除数字以外任何一个字符;等价于[^0-9]

\w

匹配一个英文字母、数字或下划线;等价于[0-9a-zA-Z]

\W

匹配除英文字母、数字或下划线以外任何一个字符;等价于[^0-9a-zA-Z]

\s

匹配一个空白字符;等价于[\f\n\r\t\v]

\S

匹配除空白字符以外任何一个字符;等价于[^\f\n\r\t\v]

\f

匹配一个换页符;等价于\x0c或\cL

\n

匹配一个换行符;等价于\x0a或\cJ

\r

匹配一个回车符;等价于\x0d或\cM

\t

匹配一个制表符;等价于\x09或\cI

\v

匹配一个垂直制表符;等价于\x0b或\cK

\oNN

匹配一个八进制的数字

\xNN

匹配一个十六进制的数字

\cC

匹配一个控制字符

2、元字符

元字符是用于构造规则表达式的具有特殊含义的字符。若要在正则表达式中包含元字符本身,必须在其前加上”\”进行转义。

例如: email的验证,里面要有.com,.cn 等中的“.”,但是“.”属于元字符,所以我们这里使用“\”进行转义

/^\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,4}$/

元字符

说明

*

0次、1次或多次匹配其前的原子

+

1次或多次匹配其前的原子

?

0次、或1次匹配其前的原子

.

匹配除换行符外的任何一个字符

^或\A

匹配字符串串首的原子

$或\Z

匹配字符串串尾的原子

\b

匹配单词的边界

\B

匹配除了单词边界以外的部分

[]

匹配方括号中的任意一个原子

[^]

匹配除方括号中的原子外的任何字符

()

其整体表示一个原子

{m}

表示其前原子恰好出现m次

{m, n}

表示其前原子至少出现m次,最多出现n次(n>m)

{m, }

表示其前原子出现不少于m次

2.1、元字符_原子表

原子表“[]”中存放一组原子,彼此地位平等,且仅匹配其中的一个原子。如果想匹配一个“a”或“e”,使用/ae/。


例如:/pr[ae]y/匹配“pray”或者“prey”

/pr[^ae]y/ 不匹配“pray”或者“prey”


通常在原子表中用“-”连接一组按ASCII码顺序排列的原子,用以简化书写。 如:/[0123456789]/可以写成/[0-9]/


2.2、元字符_重复匹配

?、*、+

主要的区别是重复匹配的次数。

?:/ph?p/ 匹配pp或php

*  :/ph*p/ 匹配pp或php或phhhhhhhp等

+  :/ph+p/匹配php或phhhp等

{}更准确的匹配次数

/ph{1,3}p/匹配php或phhp或phhhp

/ph{3}p/只匹配phhhp

/ph{3,}p/匹配开头为p,结尾为p,中间至少3个h的字符

/ph{0,1}p/匹配pp或php,其等价于/ph?p/


2.3、元字符_边界限制

^或\A  字符串首匹配

$或\Z  字符串尾匹配

例如:welcome to come here

/^welcome/或者/\Awelcome/ 匹配句首的welcome

/$here/或者/\Zhere/匹配句尾的here


还可以按单词匹配以获得更精确的结果

\b 对单词边界进行匹配

\B对单词内部进行匹配

例如: this is a book

/\bis/  可以匹配is或this

/\bis\b/ 只匹配is不匹配this

/\Bis/不与单词左边界匹配,可以匹配单词is或者this中的”is”

/\Bis\B/明确的指示不与单词的左右边界匹配,只匹配单词的内部,所以这里没有匹配结果。

2.4、元字符_.

“.”匹配除换行符外的任何一个字符。

如:/ph.p/可以匹配/phap/或/ph%p/等。

通常,我们可以使用“.*”组合来匹配除换行符外的任何字符串。在一些书籍上也称其为“全匹配符”或“单行匹配符”。(注:“.+”也可以实现该功能)


如:/a.*z/ 匹配以字母a开头,字母z结尾的任意字符串。

/a.*z/匹配az

/a.+z/不匹配az,原因:“.+”至少匹配一个字符。

2.5、元字符_模式选择


“|”(模式选择符)在表达式中匹配两个或更多的选择

<script>
    var str="15309695130";
    var b=str.replace(/9|2/g,"*"); 
    document.write(b);//1530*6*5130
</script>

2.6、js正则标志/g /i 的

1,/g 表示该表达式将用来在输入字符串中查找所有可能的匹配,返回的结果可以是多个。如果不加/g最多只会匹配一个

2,/i  表示匹配的时候不区分大小写

3,/m 表示多行匹配,什么是多行匹配呢?就是匹配换行符两端的潜在匹配。影响正则中的^$符号


2.7、元字符_模式匹配的顺序


通常是从左到右的。

顺序

元字符

说明

1

()

模式单元

2

?*+{}

重复匹配

3

^$\b\B\A\Z

边界限制

4

|

模式选择


五、案例


1、手机号码的验证

<script>
    //手机号码的验证
  
    var cont=15309695130;
    var c =/^1[0-9]{10}$/;
    if(c.test(cont)){
        document.write('手机匹配');
    }else{
        document.write('手机不匹配');
    }
    /*
    说明:
    ^表示字符开始(元字符)
    $表示字符结尾(元字符)
    1为普通字符
    [0-9]表示一个0-9的数字
    {10} 表示匹配10次    
    */
</script>


2、Email的验证

<script>       
    //email地址的验证,要求:数字或者字母@数字或者字母.
    var cont="abc@163.com";
    var c =/^\w+@[a-zA-Z0-9]+\./i;
    if(c.test(cont)){
        document.write('email匹配');
    }else{
        document.write('email不匹配');
    }
</script>

3、中文字符的验证

<script>
    //验证是否含有汉字
    var mystr="b的a";
    var zz=/[^u4E00-u9FA5]{1,}/;
    document.write(zz.test(mystr));//true
</script>

4、姓名必须是全部汉字,且大于2个汉字

<script>
    var mystr="张的";
    var zz=/^[^u4E00-u9FA5]{2,}$/;
    document.write(zz.test(mystr));//true
</script>

5、验证网址中必须有https://或者http://

    <script>       
        //网址的验证 验证里面有http:// 或者 https://
        var cont="https://www.itwenda.com";
        var c =/^http[s]?:\/\//;
        if(c.test(cont)){
            document.write('匹配');//匹配
        }else{
            document.write('不匹配');
        }
    </script>

6、保护用户隐私,隐藏手机号码中的部分数字

    <script>
        var str="15309695130";
        var b=str.replace(/9|2/g,"*"); 
        document.write(b);//1530*6*5130
    </script>


其他正则函数参考:

//去除左右空格:
function trim(str){ //删除左右两端的空格
  return str.replace(/(^\s*)|(\s*$)/g, "");
}
/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}