浅析正则表达式+范围规则校验表达式+js从字符串中截取数字

平时项目中经常需要用到正则表达式可惜之前太懒(当然最主要是太菜也不会写)都是直接网上搜。之前用的也简单无非是校验手机号码格式、校验邮箱格式、偶尔有校验密码这种网上一搜一大堆根本不用自己写结果前段时间有个需求稍微有点点复杂网上也搜不到现成的不得不尝试自己动手丰衣足食。。。

不过我还是只会简单的复杂的什么断言、组之类的还在艰难学习中也希望有大佬不吝赐教。

这个需求是管理员在某个工单定义一个范围比如成绩是0-100之间或者调查问卷的年龄范围然后工单流转后其他用户输入的数字收到管理员定义个范围影响所以要求用正则校验管理员输入的范围规则是否合法然后根据输入的范围去校验普通用户输入的数值是否合法。

1. 首先是最核心的规则校验表达式我们的规则是 (或者[开头+数字+英文逗号+数字+)或]结尾就是这种
   (1,100) 或者 (1,100]就是初中数学的那种范围区间。我用的正则表达式是

let reg = /^(\(|\[)-?[0-9]*,-?[0-9]*(\)|\])$/;
//   其中 ^是匹配开头
//  (|\[)是以(或者[开头在 (和[之前加上\是转义字符避免表达式把 (和[当成括号的开头来匹配而是把它们当做字符串 (和[
//  -?是有一个或者0个-因为可能是负数也可能是正数
// [0-9]*就是重复的数字
// ,就是中间隔开的逗号
// -?[0-9]* 跟逗号前面的一样是一个数字校验
// (\)|\]) 是以或]结尾
//  $是匹配结尾

上面这个正则表达式有个缺陷就是两个数字的大小没有作比较也就是用户输入的第二个数字可能比第一个数字小这个我现在实在是无能为力[手动哭笑不得]

心得刚开始觉得无从下手是因为不知道开头和结尾匹配到哪里现在其实也没太明白感觉就是^从开始匹配到结束$从结尾匹配到开头。。。目前这个不影响要紧的是中间的规则

2. 拿到字符串的规则之后从字符串中截取出最大值和最小值这里没有考虑()和[]的区别因为()的区间是不包含开头和结尾[]的区间是包含开头和结尾我用的方法是

// 从范围的字符串中获取数字
  const pickNumbersFromString = (v) => {
    if (typeof v === 'string') {
      const regEx = /[^\d|^.|^-]/g;
      const t = v.replace(regEx, ',').split(',');
      const r = [];
      t.forEach((item) => {
        if (item || item === 0) {
          r.push(Number(item));
        }
      });
      return r;
    }
    return [];
  };
  // 这里会返回一个数组数组中就是范围中的两个数字
  let a = '(2,200)';
console.log(pickNumbersFromString(a));  //  [2, 200]

3. 根据需要在数字输入框中限定输入的最大值和最小值

下面是我最近学到的正则里的一点小知识

 // 正则中常见的限定符
  a* // 字符a出现0次或多次
  a+ // 字符a出现1次或多次
  a? // 字符a出现0次或1次
  a{3} // 字符a出现3次
  a{3,7} // 字符a出现3-7次
  a{3,} // 字符a出现3次以上
  // 或运算符这个用的还挺多的

图片来源网络侵删

学习路上最大的敌人是恐惧如果感兴趣可以去搜一些正则表达式的视频学习还是很有帮助的。希望本文对您有所帮助