深圳正规web前端培训机构

正则表达式：初学者入门级别-Web前端之家

今天在这里调侃下正则表达式，还没了解过正则表达式的，来一起学习下吧，大神可以略之，哈哈。

概念

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，模式描述在搜索文本时要匹配的一个或多个字符串。

应用

为什么要用正则：前端往往有大量的表达数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果（邮箱、手机号、身份证号等等）。

创建正则表达式

创建正表达式的方法，介绍2种方式：

第一种方式：

// 通过构造函数的方式　　var oReg = new RegExp('study', 'i');

第二种方式：

// 通过语法糖（简写）的形式  　var oReg = /study/i;

修饰符：

i ：表示忽略大小写。

g：表示全局匹配，查找所有匹配而非在找到第一个匹配后停止。

m：多行匹配

正则对象方法

test：检索字符串中指定的值。返回true或false。

exec：用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null。

下面我们来个举个列子：

// 首先我来看test　　//我们要在字符串str中找出符合Reg的规则的子字符串，符合则返回true，不符合则返回false var str = 'Good good study, Day day up! Good good study';     var Reg1= /good/ig;     var Reg2= /goood/ig; console.log(Reg1.test(str));//true console.log(Reg2.test(str));//false// 接下来我们再来看 exec     //用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null     var str = 'Good good study, Day day up! Good good study';    var Reg= /good/ig;     console.log(Reg.exec(str));//["Good", index: 0, input: "Good good study, Day day up! Good good study"]     console.log(Reg.exec(str));//["good", index: 5, input: "Good good study, Day day up! Good good study"]     console.log(Reg.exec(str));//["Good", index: 29, input: "Good good study, Day day up! Good good study"]     console.log(Reg.exec(str));//["good", index: 34, input: "Good good study, Day day up! Good good study"]     console.log(Reg.exec(str));//null //注：如果没有指定g修饰符，那么每次匹配都是从头开始匹配，如果指定g修饰符以后，下次匹配则从上次匹配的结束位置开始匹配。字符串函数

search：检索与正则表达式相匹配的值，返回字符串中第一个与正则表达式相匹配的子串的起始位置，如果没有找到则返回-1。

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

replace：替换与正则表达式匹配的子串。

split      ：把字符串分割为字符串数组。

单看概念不容易理解，看看下面的小实列就一目了然。

str = 'Good good study, Day day up! Good good study' Reg= /study/      console.log(str.match(Reg));      console.log(str.replace(Reg,'aaaa'));      console.log(str.split(Reg));正则表达式构成

正则表达式是由普通字符（列如字符a到z）以及特殊字符（称为元字符）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

①元字符---限定符：

*：匹配前面的子表达式零次或多次。

+：匹配前面的子表达式一次或多次。

？：匹配前面的子表达式零次或一次。

{n}：匹配确定n次。

{n,}：至少匹配n次。

{n,m}：最少匹配n次且最多匹配m次。

实列如下：

var str ='gd god good goood gooood';     var Reg1 =/go*d/ig; //*：匹配前面的子表达式零次或多次      console.log(str.match(Reg1));//["gd", "god", "good", "goood", "gooood"]      var Reg2 =/go+d/ig; //+：匹配前面的子表达式一次或多次      console.log(str.match(Reg2));//["god", "good", "goood", "gooood"]      var Reg3 =/go?d/ig; //？：匹配前面的子表达式零次或一次      console.log(str.match(Reg3));//["gd", "god"]      var Reg4 =/go{2}d/ig; //{n}：匹配确定n次      console.log(str.match(Reg4));//["good"]      var Reg5 =/go{2,}d/ig; //{n,}：至少匹配n次      console.log(str.match(Reg5));//["good", "goood", "gooood"]      var Reg6 =/go{1,3}d/ig; //{n, m}：最少匹配n次且最多匹配m次      console.log(str.match(Reg6));//["god", "good", "goood"]

②元字符---字符匹配符：

字符匹配符用于匹配某个或某些字符。

[xyz]：字符集合。匹配所包含的任意一个字符。

[^xyz]：负值字符集合。匹配未包含的任意字符。

[a-z]：字符范围。匹配指定范围内的任意字符。

[^a-z]：负值字符范围。匹配任何不在指定范围内的任意字符。

\d：匹配一个数字字符。

\D：匹配一个非数字字符。

\w：匹配包含下划线的任何单词字符。等价于[a-z0-9A-Z_]

\W：匹配任何非单词字符。等价于[^a-z0-9A-Z_]

\s：匹配任何空白字符。

\S：匹配任何非空白字符。

·：匹配除”\n”之外的任何单个字符。

实列如下：

var str = 'aiod acd abd add aed afd ahd $%#@ 12345678 asdfghh';      var Reg1 = /a[abc]d/ig;        //[xyz]：字符集合。匹配所包含的任意一个字符      console.log(str.match(Reg1)); //["acd", "abd"]      var Reg2 = /a[^abc]d/ig;       //[^xyz]：负值字符集合。匹配未包含的任意字符      console.log(str.match(Reg2)); // ["add", "aed", "afd", "ahd", "asd"]      var Reg3 = /a[a-z]d/ig;        //[a-z]：字符范围。匹配指定范围内的任意字符      console.log(str.match(Reg3)); //["acd", "abd", "add", "aed", "afd", "ahd", "asd"]      var Reg4 = /a[^a-e]d/ig;      //[^a-z]：负值字符范围。匹配任何不在指定范围内的任意字符      console.log(str.match(Reg4)); //["afd", "ahd", "asd"]      var Reg5 = /\d+/ig;             //  \d：匹配一个数字字符。      console.log(str.match(Reg5));  //["12345678"]      var Reg6 = /\D+/ig;            //    \D：匹配一个非数字字符      console.log(str.match(Reg6));  //["aiod acd abd add aed afd ahd $%#@ ", " asdfghh"]      var Reg7 = /\w+/ig;            //   \w：匹配包含数字,字母,下划线的任何单词字符,等价于[a-z0-9A-Z_]      console.log(str.match(Reg7));  //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "12345678", "asdfghh"]      var Reg8 = /\W+/ig;            //    \W：匹配任何非单词字符。等价于[^a-z0-9A-Z_]      console.log(str.match(Reg8));  // [" ", " ", " ", " ", " ", " ", " $%#@ ", " "]      var Reg9 = /\s+/ig;            //    \s：匹配任何空白字符      console.log(str.match(Reg9));  //[" ", " ", " ", " ", " ", " ", " ", " ", " "]      var Reg10 = /\S+/ig;            //    \S：匹配任何非空白字符      console.log(str.match(Reg10)); //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "$%#@", "12345678", "asdfghh"]

③元字符---定位符：

定位符可以将一个正则表达式固定在一行的开始或结束，也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^：匹配输入字符串的开始位置。

$：匹配输入字符串的结束位置。

\b：匹配一个单词边界，也就是单词和空格间的位置。

\B：匹配非单词边界。

// ^：匹配输入字符串的开始位置。     var str  ='123456';       var Reg1  =/^\d+/ig;    var Reg2  =/\d/ig;     console.log(Reg1.test(str));//true //$：匹配输入字符串的结束位置。     var str ='abcd789';    var Reg =/.+\d{3}$/ig;     console.log(Reg.test(str));//true // \b：限定单词以什么开头和结尾，\B：限定单位不以什么开头和结尾var str = 'good ogoodm goods sgoods';var reg1 = /\bg\w+/g;var reg2 = /\w+d\b/g; console.log(str.match(reg1));//["good", "goods"]console.log(str.match(reg2));//["good"]var reg3 = /\Bg\w+/g;var reg4 = /\w+d\B/g; console.log(str.match(reg3));//["goodm", "goods"]console.log(str.match(reg4));//["ogood", "good", "sgood"]

④元字符---转义符

\：用于匹配某些特殊字符（遇到特殊字符需要用反斜杠转义）

// 特殊字符：. + * ? {} [] ^ $ \     var str = '++++++-*/%';    var oReg = /\++/g;     console.log(str.match(oReg));//["++++++"]

⑤元字符---选择匹配符

|：可以匹配多个规则

// 选择匹配符var str = 'gooqd gaawd gwwsd';var oReg = /g(ooq|aaw)d/g; console.log(str.match(oReg));// ["gooqd", "gaawd"]案例演示

1、手机号检测

// 下面是国内 13、15、18开头的手机号正则表达式。（可根据目前国内收集号扩展前两位开头号码）var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/

2、检测中文

//字符串只能是中文var oReg = /^[\u2E80-\u9FFF]+$/;

3、身份证检测

// 18位身份证检测  var oReg = /^\d{17}[\dxX]$/;

4、日期检测

//日期检测  var oReg = /^\d{4}(\-|\/)\d{1,2}\1\d{1,2}$/;

5、去除首尾空格

// 去除首尾的空格var sVal = oSpace.value;var oReg = /^\s+(\S*)\s+$/; console.log(sVal.replace(oReg, '$1'));

6、检测文件格式

//检测文件格式var oReg = /.+\.(jpg|jpeg|png|gif)$/i;

7、检测邮编

//检测邮编var oReg = /^\d{6}$/;

8、过滤

// 过滤var str = '小明说小强是混蛋，小强说他不是混蛋'; str.replace(/混蛋/g, '**');

更多的可以看下先前分享的一篇文章里面有很多正则表达式的写法：分析正则表达式RegExp

OK，差不多这些了，希望能帮助到大家。