5分钟教你学会JavaScript正则表达式

Posted 2020-06-17

　　正则表达式在实际开发过程中和技术面试过程中的重要性不言而喻，本文仅仅只是教你如何在几分钟之类学会正则表达式，对于它的原理及运行机制不做介绍。

 

第一：什么是正则

　　正则表达式是一种用来描述一定数量文本的模式，用来匹配相同规范样式的文本。在javascript中用RegExp对象表示正则表达式( 即Regular Eexpression)，它是对字符串执行模式匹配的强大工具。我们可以参看W3C所给的说明。

 

　

 

第二：创建一个正则表达式

　　在JavaScript中创建正则表达式，有2种方式，隐式和显式创建。 (gi 后文会给出解释)

　　隐式创建：   

1 var regExp=/正则表达式/gi;  

　　显式创建：

1 var regExp=new RegExp("正则表达式","gi");

　　由两种创建方式我们已经知道了正则表达式的基本构建方法。即 /正则表达式/gi;

在具体介绍正则表达式的使用细则及语法之前，我们先来学习JavaScript中RegExp类的两个方法，以方便我们后文的代码讲解，更多方法参看W3C文档。

　　①match：找到一个或多个正则表达式的匹配。

　　　　W3C所给的解释为match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

　　②replace: 

　　　　replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

鉴于RegExp方法较多，此处我们暂列两个，方便后文使用。

 

第三：语法详解

　　我会根据循序渐进的方式帮助大家理解正则的具体语法，提出问题，然后代码解决。

　　①匹配字符串中是否存在abc字符串，并返回

　　　　正则表达式 /abc/gi

代码：

1 var content=id.innerText;         // 获取需要匹配的字符串内容
2 var myreg=/abc/gi;                // 正则表达式
3 res=content.match(myreg);            
4 for(var i=0;i<res.length;i++){
5     window.alert(i+" "+res[0]);    // res详情参考W3C文档     
6 }

　　由上可以知道，我们若要匹配某个具体的字符串，只需在两个 / 字符之间写入匹配的字符串。

　　②匹配 1221、112233、010-11223344 形式的字符串

当需要匹配上述字符串时，我们采用第一种方法已经不能适用。在讲述新方法之前，先讲解如何匹配数字表示和反向引用的一些粗浅知识。

　　匹配数字我们用\d表示，在JavaScript正则表达式中用()包括起来的内容是一个子表达式，如:\(\d)(\d)\gi 其中第一个括号表示第一个子表达式，第二个括号表示第二个子表达式。现在给出1221的正则表达式，为

/(\d)(\d)\2\1/gi;   // 1221  2334  5667 类似格式的数字

　　上述\2\1大家不理解什么意思，这就要牵涉反向引用的概念了，\2表示匹配的是和第二个子表达式的相同的内容(即在此处第二个数和第三个数相同)，\1表示匹配的是和第一个子表达式的相同的内容(即在此处第一个数和第四个数相同)。

　　当我们理解了反向引用的概念后，匹配后面2个格式的表达式就很轻松了。

　　112233格式：

/(\d)\1(\d)\2(\d)\3/gi;      // 112233  334422 类似格式的数字

　　010-11223344格式:

/(\d){3}-(\d)\2(\d)\3(\d)\4(\d)\5/gi;        

　　该正则表达式，(\d){3}表示为3个数字。

　　例子：

　　　　若我们用1{3}匹配1111111会得到多少什么结果？用1{3,4}匹配1111111会得到什么结果？编写程序证实你的猜想。({3,4}表示匹配至少3个，至多4个)

看到此处，希望读者能够运用我上述所讲的方法，证实自己的猜想，因为里面牵涉JavaScript正则匹配的两个规则。

 

 

 

　　　　答案：

　　　　　　1{3}匹配1111111得到111  111。这是因为正则匹配的时候，当匹配到一个字符串时，会自动从下一个字符开始匹配。

　　　　　　1{3,4}匹配1111111得到1111  111。JavaScript匹配的时候遵循一个贪婪原则，即尽可能匹配多的，当多的匹配不满足时，才退而求其次，在此处若能匹配到1111则会先匹配4个1，匹配不到则匹配111。

　　③+、*、?讲解

　　　　+：表示匹配1次到任意多次

　　　　如：

/a+/gi;             // 匹配 a一个至多个
/(\d)+/gi;           //  匹配 数字一个至多个

　　　　*：表示匹配0次到任意多次

　　　　如：

/a*/gi;            
/(\d)*/gi;       
/a1*/gi;             // 若匹配a111   得到a111

　　　　?：表示匹配0次到1次

/a1?/gi;              // 若匹配a111  得到a1

　　④{}、[]、^、$ 讲解

　　　　{}:上文已经提及，表示具体量

　　　　[]: 表示范围

　　　　如：

/[a-z]/gi;                       // 匹配 a到z  的任意1个字符，等价于/[a-z]{1}/gi
/[a-z]{2}/gi;                    // 匹配 a到z  的任意2个字符

　　　　^:表示“匹配目标字符串的开始位置”，若此字符若位于[]括号内，表示“否定”的意思

　　　　如：

/[^a-z]/gi;       　　　　　　 // 不是a到z的任意一个字符
/[^0-9]/gi;             　　 // 不是0到9的任意一个字符
/^[a-zA-Z0-9]{2}/gi;       // 以数字或者字母开头的2个字符

　　　　$:表示“匹配目标字符串的结束位置”

　　⑤其他字符表示

　　　　\D ：\d的反面，匹配非数字 ，即等价于[^0-9]

　　　　\w ：匹配任意英文字符

　　　　\W：\w的反面，匹配非英文字符 ，即等价于 [^a-zA-Z0-9_]  

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

　　　　\S ：\s的反面，即匹配任何非空白字符  

　　　　.   ： 匹配出 \n 之外的所有字符，如果要匹配，匹配自己则需要使用 \. （即匹配. 为/\./gi）

　　⑥需要转义的字符：

　　　　正如⑤中的 . 所示，当需要匹配 . 的时候，我们需要加上转义字符。总结一下，JavaScript中匹配字符需要用到转义字符的有。　

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

　　⑦选择匹配符 |

　　　　在正则匹配的时候，有时需要匹配多个正则表达式，此时则需要用到选择匹配符|，可以看做是编程中“或”的意思

　　　　如：

/[a-z]{3}|[A-Z]{2}/g;           // 匹配a到z的3个字符或者是A到Z的2个字符都可

 

第四：最后补充

　　讲解一下正则表达式中gi所表达的意思。之所以放在文章最后，是为了帮助大家直接了解正则有关的内容，更快的方式来使用它。

gi是RegExp类中的实例属性：其实有gims四个，其中：

　　g: global之意，表示全局匹配

　　i:  ignoreCase之意，表示忽略大小写

　　m: multiple之意，表示多行匹配，即考虑换行这个因素，即匹配时将换行后的字符串当作新的一个字符串匹配

　　s: source之意，表示返回创建RegExp对象实例时指定的表达式文本字符串

正则匹配时根据需要填写相应的属性。

 

　　最后，希望这篇文章能够真正帮助到那些正则学习正则表达的人们，小白一枚，粗浅言论，希望大家勿喷。 

　　给大家一个js验证表单的网址，里面有一些正则表达式验证，可以学学稳固一下知识：http://www.jb51.net/article/4976.htm