JS中的正则表达式

ゝ一世哀愁。 2022-06-07 00:11 189阅读 0赞

1.正则的作用  
2.正则的元字符及应用  
3.正则的创建方式  
4.懒惰性和贪婪性  
5.分组捕获  
6.replace  
7.正则的简单应用

<table> 
 <tbody> 
  <tr> 
   <td><b>1.正则的作用</b></td> 
  </tr> 
 </tbody> 
</table>

首先什么是正则表达式呢？  
正则表达式是是对字符串和特殊字符操作的一种逻辑公式。通俗点说就是一个规则，而且是用来处理字符串的一个规则。  
处理可分为两个方面，一个是匹配，另一个是捕获。

*  匹配：判断一个字符串是否符合制定（指定）的规则，即reg.test(str);
 *  捕获：把字符串中符合正则规则的内容捕获到，即reg.exec(str);

创建一个正则表达式也有两种方法：

*  字面量方式：var reg = /\\d/;
 *  实例创建方式：var reg = new RegExp(“str”);

两种创建方式的区别详见第三点：正则的创建方式

--------------------

<table> 
 <tbody> 
  <tr> 
   <td><b>2.正则的元字符及应用</b></td> 
  </tr> 
 </tbody> 
</table>

元字符是指在/ /之间具有意义的一些字符，每一个正则表达式都是有元字符和修饰符组成的。

<table> 
 <tbody> 
  <tr> 
   <td>常见的元字符</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">元字符</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">\</td> 
   <td align="left">转义字符，转义后面字符所代表的含义</td> 
  </tr> 
  <tr> 
   <td align="left">^</td> 
   <td align="left">以某一个元字符开始</td> 
  </tr> 
  <tr> 
   <td align="left">$</td> 
   <td align="left">以某一个元字符结尾</td> 
  </tr> 
  <tr> 
   <td align="left">*</td> 
   <td align="left">出现零到多次</td> 
  </tr> 
  <tr> 
   <td align="left">+</td> 
   <td align="left">出现一到多次</td> 
  </tr> 
  <tr> 
   <td align="left">?</td> 
   <td align="left">出现零次或一次</td> 
  </tr> 
  <tr> 
   <td align="left">{n}</td> 
   <td align="left">出现n次</td> 
  </tr> 
  <tr> 
   <td align="left">{n,}</td> 
   <td align="left">出现n到多次</td> 
  </tr> 
  <tr> 
   <td align="left">{n,m}</td> 
   <td align="left">出现n到m次</td> 
  </tr> 
  <tr> 
   <td align="left">\n</td> 
   <td align="left">匹配一个换行符</td> 
  </tr> 
  <tr> 
   <td align="left">.</td> 
   <td align="left">除了\n以外的任意字符</td> 
  </tr> 
  <tr> 
   <td align="left">()</td> 
   <td align="left">分组，把一个大正则本身划分成几个小正则</td> 
  </tr> 
  <tr> 
   <td align="left">[xyz]</td> 
   <td align="left">x或者y或者z中的一个</td> 
  </tr> 
  <tr> 
   <td align="left">x|y</td> 
   <td align="left">x或者y中的一个</td> 
  </tr> 
  <tr> 
   <td align="left">[^xyz]</td> 
   <td align="left">除了三个以外的任何一个字符</td> 
  </tr> 
  <tr> 
   <td align="left">[a-z]</td> 
   <td align="left">a-z之间的任何一个字符</td> 
  </tr> 
  <tr> 
   <td align="left">[^a-z]</td> 
   <td align="left">除了a-z之间的任何一个字符</td> 
  </tr> 
  <tr> 
   <td align="left">\d</td> 
   <td align="left">一个0-9之间的数字，相当于[0-9]</td> 
  </tr> 
  <tr> 
   <td align="left">\D</td> 
   <td align="left">除了0-9之间的数字以外的任何字符</td> 
  </tr> 
  <tr> 
   <td align="left">\b</td> 
   <td align="left">一个边界符</td> 
  </tr> 
  <tr> 
   <td align="left">\w</td> 
   <td align="left">数字、字母、下划线中的任意一个字符，等价于[0-9a-zA-Z_]</td> 
  </tr> 
  <tr> 
   <td align="left">\s</td> 
   <td align="left">匹配一个空白字符（空格、制表符、换页符…）</td> 
  </tr> 
 </tbody> 
</table>

\[\]：在中括号中出现的所有字符都是代表本身意思的字符·，且中括号不识别两位数，例如：`/^[12]$/`表示1或2中的一个，`/^[12-68]$/`表示1或者2-6或者8中的一个。

<table> 
 <tbody> 
  <tr> 
   <td>元字符的简单应用</td> 
  </tr> 
 </tbody> 
</table>

1.匹配所有数字（正数、负数、小数、0）：  
`/^[+-]?(\d|[1-9]\d+)(\.\d+)?$/`  
2.验证邮箱（简单版）：  
`/^[\w.-]+@[0-9a-zA-Z]+(\.[a-zA-Z]{2,4}){1,2}$/`  
3.中国标准真实姓名（2-4个汉字）：  
`/^[\u4e00-\u9fa5]{2,4}$/`  
4.身份证号码：  
`/^(\d{2})(\d{4})(\d{4})(\d{2})(\d{2})(\d{2})(\d)(\d|X)$/`  
5.匹配介于18-65岁之间的所有年龄：  
`/^1[8-9]|[2-5]\d|6[0-5]$/`

--------------------

<table> 
 <tbody> 
  <tr> 
   <td><b>3.正则的创建方式</b></td> 
  </tr> 
 </tbody> 
</table>

一个正则表达式有两种创建方式：

*  字面量方式：var reg = /\\d/;
 *  实例创建方式：var reg = new RegExp(“str”);

在字面量创建方式中，/ /之间包起来的所有内容都是元字符，有的具有特殊意义，大部分都是代表本身含义的普通元字符。  
但是对于字符串拼接的需求，只能使用实例的创建方式，例如：

var name = "abc";
    var reg = new RegExp("^\\d+" + name + "\\d+$", "g");
    console.log(reg.test("2017abc2017")); //true

两种方式在正则中的区别：

1.  字面量方式中出现的一切都是元字符，所以不能进行变量值的拼接，而实例创建方式是可以的
2.  字面量方式中直接写`\d`就可以，而在实例中需要把它转义为`\\d`

附加例子：

var reg = /^(\w)\1(\w)\2$/; //\1代表和第一个分组出现一模一样的内容，\2为第二个
    console.log(reg.test("aswq")); //false
    console.log(reg.test("aaqq")); //true

--------------------

<table> 
 <tbody> 
  <tr> 
   <td><b>4.懒惰性和贪婪性</b></td> 
  </tr> 
 </tbody> 
</table>

exec：正则的捕获  
例如：

var reg = /^1[8-9]|[2-5]\d|6[0-5]$/;
    console.log(reg.exec("6565656")); //["56", index: 1, input: "65656565"]

捕获到的内容是一个数组，数组中的第一项是当前大正则捕获的内容；  
index：捕获的内容在字符串中开始的索引  
input：捕获的原始字符串  
正则捕获时，每一次捕获要先进行默认的匹配，如果没有匹配成功，结果是null，只有匹配的内容才能捕获到。

懒惰性：每一次执行exec只捕获第一个匹配的内容，在不进行任何处理的情况下，就算执行多次，捕获的还是第一次匹配的内容。  
`RegExpObject.lastIndex`是正则每一次捕获在字符串中开始查找的位置，默认的值是0，对test的影响可参考：[http://www.cnblogs.com/2050/archive/2012/06/26/2563555.html][http_www.cnblogs.com_2050_archive_2012_06_26_2563555.html]  
正则懒惰性的解决方法：在正则的末尾加一个修饰符”g”  
修饰符共有3个，分别是”g”、”i”、”m”

*  global(g)：全局匹配
 *  ignoreCase(i)：忽略大小写匹配
 *  multiline(m)：多行匹配

例如：

var reg = /\d+/;
    var str = "abc65468dvf46513se";
    console.log(reg.lastIndex); //0
    var res = reg.exec(str);
    console.log(res); //["65468", index: 3, input: "abc65468dvf46513se"]
    console.log(reg.lastIndex); //0

上面代码没有加修饰符g，只能捕获第一个内容

var reg = /\d+/g;
    var str = "abc65468dvf46513se";
    console.log(reg.lastIndex); //0
    console.log(reg.exec(str)); //["65468", index: 3, input: "abc65468dvf46513se"]
    console.log(reg.lastIndex); //8
    console.log(reg.exec(str)); //["46513", index: 11, input: "abc65468dvf46513se"]
    console.log(reg.lastIndex); //16
    console.log(reg.exec(str)); //null

加了全局修饰符g，正则每一次捕获结束后，lastIndex的值都变成了最新的值，下一次捕获从最新的位置开始查找，这样可以把需要的内容都捕获到。  
捕获正则的所有内容：

var reg = /\d+/g,
        str = "abc65468dvf46513se",
        ary = [],
        res = reg.exec(str);
    while (res) {
        ary.push(res[0]);
        res = reg.exec(str);
    }
    console.log(ary); //["65468", "46513"]

正则的每一次捕获都是按照匹配最长的结果捕获的  
解决贪婪性：在量词的元字符后增加？即可，如：`var reg = /\d+?/g;`  
在字符串的方法中，有一个match方法，match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。例如：

var reg = /\d+?/g;
    var str = "56sd65dsds48ewqe418";
    console.log(str.match(reg)); //["5", "6", "6", "5", "4", "8", "4", "1", "8"]

var reg = /\d+/g;
    var str = "56sd65dsds48ewqe418";
    console.log(str.match(reg)); // ["56", "65", "48", "418"]

虽然在当前情况下match比exec更加简便一些，但是match中存在一些自己处理不了的问题，即：在分组捕获的情况下，match只能捕获到大正则匹配的内容，而对于小正则的内容是无法获取的。

--------------------

正则分组有两个作用：改变优先级和可以进行分组引用  
正则在捕获的时候，不仅仅把大正则的内容捕获到，而且把小分组匹配的内容捕获到，例如之前的验证身份证号的正则：

该数组的第一项是大正则的匹配内容；第二至九项是每个分组匹配的内容  
如果用match()方法，则输出的结果与exec的结果相同：`console.log(str.match(reg));`接下来的例子可以看出两者的区别：

var reg = /abc(\d+)/g;
    var str = "abc1265abc4896abc5168";
    console.log(reg.exec(str)); //["abc1265", "1265", index: 0, input: "abc1265abc4896abc5168"]
    console.log(reg.exec(str)); //["abc4896", "4896", index: 7, input: "abc1265abc4896abc5168"]
    console.log(reg.exec(str)); //["abc5168", "5168", index: 14, input: "abc1265abc4896abc5168"]
    console.log(str.match(reg)); //["abc1265", "abc4896", "abc5168"]

用exec执行三次，每一次不仅把大正则匹配的获取到，而且还可以获得第一个分组匹配的内容。而match只能捕获大正则匹配的内容。

--------------------

<table> 
 <tbody> 
  <tr> 
   <td><b>6.replace</b></td> 
  </tr> 
 </tbody> 
</table>

字符串中的replace方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。`stringObject.replace(regexp/substr,replacement)`  
例如：

var str = "abc1234abc4659";
    str = str.replace("abc", "abcd");
    console.log(str); //"abcd1234abc4659"
    str = str.replace("abc", "abcd");
    console.log(str); //"abcdd1234abc4659"

在不使用正则的情况下，每执行一次，只能替换一个字符。如果想把所有的abc都替换为abcd，则需要借助正则表达式。

var str = "abc1234abc4659";
    str = str.replace(/abc/g, "abcd");
    console.log(str); //abcd1234abcd4659

<table> 
 <tbody> 
  <tr> 
   <td>replace原理（默认第一项的值为正则）</td> 
  </tr> 
 </tbody> 
</table>

replace方法和exec一样，把所有和正则匹配的都捕获到，然后把捕获的内容替换成需要替换的新元素。  
如果把第二个参数换成一个函数：

var str = "abc1234abc4659";
    str = str.replace(/abc/g, function () {
        console.log(arguments[0]); //获取大正则捕获的内容，即输出两次abc
        return "abcd";
    });
    console.log(str); //把abc替换成abcd，即"abcd1234abcd4659"

那么匿名函数执行多少次，取决于正则能在字符串中捕获多少次。  
每一次执行匿名函数，里面传递的参数值arguments和自己通过exec捕获到的结果是非常类似的（即使有分组，也可以通过arguments获取到）。  
return返回的结果是什么，相当于把当前这一大正则捕获的内容替换成返回的内容。  
arguments的值：如果正则中没有小分组，在全局模式下，匹配几次就输出几次arguments，并且值为匹配的结果；如果正则中有小分组，则arguments为一个或多个类数组，第一项是大正则匹配的内容，第二项开始为小正则匹配的内容。

--------------------

<table> 
 <tbody> 
  <tr> 
   <td><b>7.正则的简单应用</b></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>把数字变成大写</td> 
  </tr> 
 </tbody> 
</table>

var str = "465498715208979";
    var ary = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
    str = str.replace(/\d/g, function () { 
        return ary[arguments[0]];
    });
    console.log(str); //"肆陆伍肆玖捌柒壹伍贰零捌玖柒玖"

<table> 
 <tbody> 
  <tr> 
   <td>获取一个字符串中出现次数最多的字符，并且获取出现的次数</td> 
  </tr> 
 </tbody> 
</table>

其中，第一个遍历数组的循环可以用正则来替换：

str.replace(/[a-z]/gi, function () { 
        var val = arguments[0];
        obj[val] >= 1 ? obj[val] += 1 : obj[val] = 1;
    })

<table> 
 <tbody> 
  <tr> 
   <td>模板引擎实现的初步原理</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>获取网络参数</td> 
  </tr> 
 </tbody> 
</table>

转换格式：

URL："http://sports.qq.com/kbsweb/game.htm?mid=100324:10032369&cid=4444894&app=1.0"
    保存成：obj={
        mid:"100324:10032369",
        cid:"4444894",
        app:"1.0"
    };

代码如下：

其中replace方法还可以用如下的exec方法来实现：

<table> 
 <tbody> 
  <tr> 
   <td>时间格式化</td> 
  </tr> 
 </tbody> 
</table>

把：2017-6-10 19:02:01 变成：2017年6月10日 19时02分01秒

[http_www.cnblogs.com_2050_archive_2012_06_26_2563555.html]: http://www.cnblogs.com/2050/archive/2012/06/26/2563555.html