js_day27--正则表达式

时间：2021-08-15 10:08:29


Day27

Javascript正则表达式（RegExp）

 

任务：

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

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

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

 

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

问题：

给你一个字符串（或一篇文章），请你找出所有四个数字连在一起的字串，

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

继续：

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

给你一个字符串，请你验证该字符串是否是一个身份证？

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

 

为了解决上述问题，js的设计者给我们提供了一个叫正则表达式（RegExp对象），全称：Regular Expression。

实际上，许多编程语言都支持正则表达式进行字符串操作！如java，perl等。

 

  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():用于检测一个字串是否匹配某个模式，返回true或false

     


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


  • match() 语法格式为：match（regexp）,与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()  语法格式为：search（reExp），它返回使用正则表达式搜索时，第一个匹配的字符串在整个被搜索的字符串中的位置。

案例：

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

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


案例：

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



  • split()   把字符串分割为字符串数组，用法split（“按什么字符分割”），也可以用split（regExp）；



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的话，会得到什么结果呢？

            答案：会得到两个结果，111和111，每次匹配都是从上次匹配之后的最后一个字符下标处接下去开始的！

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

               答案：应该是1111和111。这里面有一个原则：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会得到什么结果呢？

               答案：会得到a和c

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

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

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

               答案：会得到1、1和8。

               [^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("不是电子邮件地址");
}
}


标签：

相关文章