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

更新:之前写的时候没有考虑负数和小数点,所以如果你的范围规则是:以英文状态的“ [”或者"(“开头,然后是一个任意数值(正负整数、小数),然后是英文逗号,然后又是一个任意数值(正负整数、小数),最后以英文的”)“或”]"结尾,类似: (-10.5,20)这种,你可以参考这个正则表达式:

let reg = /^(\(|\[)-?[0-9]*.?[0-9]*,-?[0-9]*.?[0-9]*(\)|\])$/; 
let str ='[-12.3,456.7)'; 
console.log(reg.test(str));  // true

——————————手动分割,以下是原文——————————————————

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

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

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

  1. 首先是最核心的规则校验表达式,我们的规则是: (或者[开头+数字+英文逗号+数字+)或]结尾,就是这种:
    (1,100) 或者 (1,100],就是初中数学的那种范围区间。我用的正则表达式是:
let reg = /^(\(|\[)-?[0-9]*,-?[0-9]*(\)|\])$/;
//   其中 ^是匹配开头
//  (|\[)是以(或者[开头,在 (和[之前加上\是转义字符,避免表达式把 (和[当成括号的开头来匹配,而是把它们当做字符串 (和[
//  -?是有一个或者0个-,因为可能是负数也可能是正数
// [0-9]*就是重复的数字
// ,就是中间隔开的逗号;
// -?[0-9]* 跟逗号前面的一样,是一个数字校验
// (\)|\]) 是以或]结尾
//  $是匹配结尾

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

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

  1. 拿到字符串的规则之后,从字符串中截取出最大值和最小值(这里没有考虑()和[]的区别,因为()的区间是不包含开头和结尾,[]的区间是包含开头和结尾),我用的方法是:
// 从范围的字符串中获取数字
  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]
  1. 根据需要在数字输入框中限定输入的最大值和最小值

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

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

图片来源网络,侵删
(图片来源网络,侵删)

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

猜你喜欢

转载自blog.csdn.net/JaneLittle/article/details/128719560
今日推荐