js_day27--正则表达式

时间:2022-12-15 15:47:03


Day27

Javascript正则表达式(RegExp

 

任务:

  • 明确学习正则表达式的重要性

  • 初步了解正则表达式是什么

  • 能做简单的正则表达式的开发

 

  1. 为什么要学习正则表达式?

问题:

给你一个字符串(或一篇文章),请你找出所有四个数字连在一起的字串,

并且这个字串满足第一位和第四位相同,第二位和第三位相同,如12215665等。

继续:

给你一个字符串,请你验证该字符串是否是一个电子邮件?

给你一个字符串,请你验证该字符串是否是一个身份证?

给你一个字符串,请你验证该字符串是否是一个电话号码?

 

为了解决上述问题,js的设计者给我们提供了一个叫正则表达式(RegExp对象),全称:Regular Expression

实际上,许多编程语言都支持正则表达式进行字符串操作!如javaperl等。

 

  1. 基本概念:

    一个正则表达式就是用某种模式去匹配一类字符串的一个公式,反映到javascript中,它就是一个RegExp对象!

    很多人因为它们看上去比较古怪而且复杂所以不敢去使用,不过,经过一点点练习之后,这些复杂的表达式其实写起来还是蛮简单的,而且,一旦你弄懂它们,你就能把数小时辛苦而且易错的文本处理工作缩短在几分钟(甚至几秒钟)内完成。

 

  • 入门案例:

给一个字符串,找出所有四个数字连在一起的子串。


<html>
<head>
<title>regexp1.html</title>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">

function test1(){
//得到用户的内容
var content = document.getElementById("content").value;
//window.alert(content.value);
var myReg=/(\d){4}/gi;//这是一个正则表达式对象,可以检索4个连续的数字
while(res=myReg.exec(content)){//res是检索出来的结果,但是一个结果就对应一个数组
//res[0]就是找到的对应的文本
window.alert("找到:"+res[0]);
}
}
</script>

</head>

<body>
<textarea id="content" rows="10" cols="20"></textarea>
<input type="button" value="测试" onclick="test1()"/>
</body>
</html>

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


  1. var regExp =/正则表达式/gim【隐式创建】

  2. var regExp = newregExp(“正在表达式”,”gim”);【显式创建】

    [注意,显式创建时正则表达式是一个字符串,要注意转义!!!]

    g代表global(全局匹配),i代表ignoreCase(忽略大小写),m表示多行模式,考虑换行。


 


      常用RegExp对象的方法:


  • exec():检索字符串中指定的值,并返回值(找不到返回null

  • test():用于检测一个字串是否匹配某个模式,返回truefalse

     


支持正则表达式的String对象的方法:


  • match() 语法格式为:matchregexp,RegExp对象的exec方法类似,它使用正则表达式模式对字符串执行搜索,并返回一个包含搜索结果的数组。

    案例:

//match方法
function test2(){
var con=content.value;
var myreg=/abc/gi;
res = con.match(myreg);
for(var i=0;i<res.length;i++){
window.alert(i+" "+res[0]);
}
}

  • search()  语法格式为:searchreExp),它返回使用正则表达式搜索时,第一个匹配的字符串在整个被搜索的字符串中的位置。

案例:

//search 方法
var str="Visit W3School!";
window.alert(str.search(/W3School/));

  • replace()  语法格式为:replacereExpreplaceText),使用正则表达式模式对字符串执行搜索,并对搜索到的内容用指定的字符替换,返回值为包含替换后的内容的字符串对象。


案例:

//replace方法
function test3(){
var con = content.value;
//把四个数字,换成:这里原来是四个数
var newContent = con.replace(/(\d){4}/gi,"这里原来是4个数!");
//window.alert(newContent);
content.value = newContent;
}



  • split()   把字符串分割为字符串数组,用法split(“按什么字符分割”),也可以用splitregExp);



RegExp对象的属性:

js_day27--正则表达式


如下案例:


//index,leftContext,rightContext
function test4() {
var con = content.value;
var myReg = /(\d){4}/gi;
while (res = myReg.exec(con)) {
window.alert("index:" + RegExp.index+" left:"+RegExp.leftContext+" right:"+RegExp.rightContext);
}
}

运行结果:

js_day27--正则表达式 js_day27--正则表达式


正则表达式的语法---子表达式、捕获、反向引用


        如果你认为正则表达式只能检索固定的字符串或是连续的几个数字,那你就太小看正则表达式了,请看下面的问题:

js_day27--正则表达式


第一个题目代码:

function test5(){
var con = content.value;
var myReg = /(\d)(\d)\2\1/gi;
//解释:
while (res = myReg.exec(con)) {
window.alert(res[0]);
}
}

解释:

js_day27--正则表达式


运行结果:

js_day27--正则表达式js_day27--正则表达式


再看一个例子:


找类似aabbccdd这样的数:

function test6(){
var con = content.value;
//找类似aabbccdd这样的数
var myReg = /(\d)\1(\d)\2(\d)\3(\d)\4/gi;
while (res = myReg.exec(con)) {
window.alert(res[0]);
}
}


js_day27--正则表达式


继续例题:

js_day27--正则表达式


方法:

function test7(){
var con = content.value;
//12321-333999111
var myReg = /(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi;
while (res = myReg.exec(con)) {
window.alert(res[0]);
}
}


js_day27--正则表达式


正则表达式的语法---元字符


        如果想要灵活运用正则表达式,必须了解其中各种元字符的功能,元字符从功能上大致分为:


  1. 限定符

  2. 选择匹配符

  3. 分组组合和反向引用符

  4. 特殊字符

  5. 字符匹配符

  6. 定位符


 


  1. 限定符

    用于指定其前面的字符和组合连续出现多少次

    {n}说明n表示出现的次数,比如a{3},1{4}(\d){2},但是要注意一点,

    1{3}去匹配1111111的话,会得到什么结果呢?

            答案:会得到两个结果,111111,每次匹配都是从上次匹配之后的最后一个字符下标处接下去开始的!

    {n,m}说明{n,m}表示至少出现的n次最多m,比如a{3,4}1{4,5}(\d){2,5},我们看一下1{3,4}去匹配1111111的话,会得到什么结果呢?

               答案:应该是1111111。这里面有一个原则:javascript在匹配的时候使用的是贪婪原则,尽可能先匹配多的,能匹配4个,就不匹配3个。

    +说明+表示出现1次到任意多次,比如/a+/gi/1+/gi/(\d)+/gi,我们看看用/1+/gi去匹配1111111的话,会得到什么结果呢?

               答案:贪婪原则,当然是1111111啦。

    *说明:*号代表出现0次到任意多次,比如/a*/gi/1*/gi/(\d)*/gi。我们看看/a1*/去匹配a111的话,会得到什么结果呢?

               答案:a111

    ?说明:?号表示出现0次到1

    如果用/a1?/gi去匹配a111的话,会得到什么结果?

               答案:得到a1


 


 


  1. 字符匹配符

    [a-z]说明:[a-z]表示可以匹配a-z中任意一个字符,比如/[a-z]/gi/[a-z]{2}/gi。我们看看/[A-Z]/gi去匹配a11c8会得到什么结果呢?

               答案:会得到ac

    如果用/[a-z]*/gi去匹配abcd,则得到abcd(*号贪婪原则)

    [1-9][0-9]等与此类似!

    [^a-z]说明[^a-z]表示可以匹配不是a-z中的任意一个字符。那么用/[^a-z]/gi去匹配a118c会得到什么结果?

               答案:会得到118

               [^A-Z][^0-9]等与此类似!

    [abcd]说明:表示可以匹配abcd中的任意一个字符。

    [^abcd]:表示可以匹配不是abcd中的任意一个字符。

    当然这些字符可以根据自己的实际情况设定!

    \d表示可以匹配0-9的任意一个数字,相当于[0-9]

    \D表示可以匹配不是0-9中的任意一个数字,相当于[^0-9]

    \w匹配任意一个英文字符,数字和下划线,相当于[a-zA-Z0-9_]

    \W相当于[^a-zA-Z0-9_],和\w刚好相反

    \s匹配任何空白字符(空格、制表符等)

    \S匹配任何非空白字符,和\s刚好相反

    .匹配除\n之外的所有字符,如果要匹配本身,则需要使用\.


 


  1. 转义符\

    需要用到转义符号的字符有以下:

    . * + ( ) $ / \ ? [ ] ^ { }


 


  1. 定位符

    定位符用于规定要匹配的字符串出现的位置,比如在字符串的开始还是结束的位置,这个也是相当有用,必须掌握!

     

    ^符号说明:匹配目标字符串的开始位置。

               比如/^ge/gi,去匹配“ge junqiang ge ge”,我们看看会得到什么结果?

               答案:得到ge,这个ge是最开头的那个ge

    $符号说明:匹配目标字符串的结束位置

               比如/ge$/gi,去匹配“ge junqiang ge ge”,我们看看会得到什么结果?

               答案:得到ge,这个ge是最后面的那个ge,如果最后面不是ge,则不会得到任何结果。

    \b符号说明:匹配目标字符串的边界。

               比如/han\b/gi去匹配“hanshunping sphan nnhan”,我们会匹配到“hanshunping sphan nnhan,所以这里说的字符串的边界指的是字符串间有空格,或者是目标字符串的结束位置,特别注意没有目标字符串的开始位置。

    \B符号说明:匹配目标字符串的非边界。


这个和\b的含义刚刚相反,比如/han\B/gi去匹配“hanshunping sphan nnhan”,我们会匹配到“hanshunping sphan nnhan”。


 


 


5.选择匹配符


有时候,我们在匹配某个字符串的时候是选择性的,即:既可以匹配这个,又可以匹配那个,这时候需要用到选择匹配符|


比如,用/ge||/gi,去匹配”gejun,会得到什么样的结果呢?


        答案:得到ge和葛


 


 


实际应用案例:


        判断输入的电子邮件地址是否合法!


        1.只能有一个@符号


        2.@前面是用户名,可以是a-z A-Z 0-9_-字符


        3.@后面是域名

//验证输入的字符串是不是一个电子邮件
function test9(){
var con = content.value;
//@符号无须转义
var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|org|net)$/i;
if(myReg.test(con)){
window.alert("是电子邮件地址!");
}else{
window.alert("不是电子邮件地址");
}
}