正则表达式在前端开发中的几个应用

本文系原创，转载请注明出处：
https://blog.csdn.net/chengbao315/article/details/106194685

正则表达式是前端开发（不只局限于前端）中的常用技术，但是很多场景我们并不知道怎么来使用它，在实际项目中，我遇到了几种使用的情况，下面记录下来：

一、校验字符串是否合法

这是正则表达式的最常见应用，为了提高程序交互的友好性（或者说避免出现BUG），在用户提交输入字符串时，往往需要校验页面输入内容的合法性，这里使用的是正则表达式的 test 方法，这个方法的作用是在一个字符串中测试是否匹配RegExp，它返回 true 或 false
以下介绍两个我遇到的例子：

1. 校验手机号

校验规则：
1）首数字是1
2）第二位只能是3、4、5、7、8中的一位数字（如果以后运营商更新号码需要更新）
3）0至9中的数字出现9次

代码如下：

  var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
  if(reg.test('验证字符串')){
    // 验证成功！
  }

2.校验身份证

校验规则：
1）首位数字范围是1至9（不能是0，根据中国行政区划编码）
2）第二至第六位数字范围是0至9
3）第七位至第十四位（生日校验），年份只能是19XX年或者20XX年（这里只校验现存人口的身份证号，话说秦始皇也没有身份证）；
月份如果是01、03、05、07、08、10、12中的数字，日期范围是01至31，
月份如果是04、06、09、11中的数字，日期范围是01至30，
月份如果是02，日期范围是01-28
闰年的考虑（枚举法）：
a.能被4整除不能被100整除的情况：(19|20)(0[48]|[2468][048]|[13579][26])
b.能被400整除的年份:正常的规则是(0[48]|[2468][048]|[3579][26])00，但是根据现状只有2000符合
4）最后四位可以都是数字，也可以是三位数字加字母 x（X）

代码如下：

  var reg = /^[1-9][0-9]{5}((19|20)([0-9]{2}(01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|30|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|
  02(0[1-9]|[1-2][0-9]))|(0[48]|[2468][048]|[13579][26])0229)|(20000229)[0-9]{3}([0-9]|x|X)$/
  if(reg.test('验证字符串')){
    // 验证成功！
  }

二、截取字符串内容

这个功能在以前我往往没有想到，通常我使用的都是 substring() 方法来截取字符串，这个方法有两个参数，分别式开始位置和结束位置，但是在字符串动态变化的情况下，获取截取的开始和结束位置很不方便，往往需要再配合indexOf()等方法，这时使用正则表达式就非常方便了。

这里使用的是正则表达式的 match方法，这个方法的作用是在一个字符串中执行查找匹配的String，它返回一个数组，在未匹配到时会返回 null。

语法：str.match(regexp)
参数：regexp 正则表达式对象。如果传入一个非正则表达式对象，则会隐式地使用 new RegExp(obj) 将其转换为一个 RegExp 。
如果你没有给出任何参数并直接使用match() 方法 ，你将会得到一个包含空字符串的 Array ：[""] 。
返回值：
如果使用g标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组。
如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array）。 在这种情况下，返回的项目将具有如下所述的其他属性。

groups: 一个捕获组数组 或 undefined（如果没有定义命名捕获组）。
index: 匹配的结果的开始位置
input: 搜索的字符串.
方法返回的Array，其内容取决于global（g）标志的存在与否，如果未找到匹配则为null。

下面介绍一个我遇到的例子获取url参数，其他方面我还没有用到，以后遇到再进行补充。

1.匹配获取Url参数

在进行Url传参时，通常的格式是http://xxx?xx=xx&xx=xx，我们想要获取特定参数的参数值，需要截取“=”后面，“&”前面的字符串（最后一个参数不带“&”）
好了这样就可以定义出正则表达式规则了：
1）以空字符或者"&"字符开头
2）后面跟着参数名称和“=”
3）然后是几个非“&”字符的任意字符
4）以“&”字符或者空字符结束
按照这个规则定义正则表达式，匹配“？”后的字符串，得到捕获组。

代码如下：

  function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURI(r[2]);
    }
    return null;
}

这里引入一下捕获组的概念，捕获组就是把正则表达式中子表达式匹配的内容，保存到内存中以数字编号或显式命名的组里，方便后面引用。

什么意思？还是不明白？简单来说可以理解为正则表达式中的一个括号就是一个捕获组，可以用编号来引用匹配的值，编号0默认是整个匹配结果，捕获组编号从1开始。在调用match 方法时，会把每个捕获组的捕获值返回来，实现我们想要的截取效果。

举个栗子：
var str = ‘For more information, see Chapter 3.4.5.1’;
var re = /see (chapter \d+(.\d)*)/i;
var found = str.match(re);

上面的例子中有两个捕获组，最终found 的值为：

[ 'see Chapter 3.4.5.1',    // 是整个匹配
  'Chapter 3.4.5.1',       // 被'(chapter \d+(\.\d)*)'捕获，捕获组1的结果
  '.1',                   // 被'(\.\d)'捕获的最后一个值（多个捕获值满足捕获时返回最后一个值），捕获组2的结果
  index: 22,              // 'index' 属性(22) 是整个匹配从零开始的索引
  input: 'For more information, see Chapter 3.4.5.1',  // 'input' 属性是被解析的原始字符串
  groups: undefined ]     // 如果没有定义命名捕获组

基于这个概念，上面Url获取参数的用法就比较好理解了，捕获组2就是我们想要的结果。

三、字符串替换

这个功能我之前真是想都没有想过，因为C#开发的习惯，在JavaScript开发时我也习惯的使用了replace方法进行字符串替换功能，
但是替换结果却出乎我的意料，replace竟然只能替换第一满足的字符串，并不能替换所有结果。

举个栗子：
var test = “abcd abcd abcd”；
test.replace(“ab”,“ef”);

替换的结果并不是我想象的“efcd efcd efcd”，而是“efcd abcd abcd”,这怎么办？正则表达式可以做到！！！
操作起来只需要将需要替换的字符串写成正则表达式对象，并且使用g标志即可。

因此上面的例子应该改写为：
var test = “abcd abcd abcd”；
test.replace(/ab/g,“ef”);

按照改写的方式进行字符串替换，就可以实现预期的替换效果。以上就是我在开发中遇到的几个正则表达式的应用，欢迎各位朋友批评指正。

如果本文有帮到你，记得加关注哦
————————————————
版权声明：本文为CSDN博主「愤斗的程序猿」的原创文章，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chengbao315/article/details/106194685