浅析正则表达式+范围规则校验表达式+js从字符串中截取数字
平时项目中经常需要用到正则表达式，可惜之前太懒(当然最主要是太菜也不会写)都是直接网上搜。之前用的也简单，无非是校验手机号码格式、校验邮箱格式、偶尔有校验密码这种，网上一搜一大堆，根本不用自己写，结果前段时间有个需求稍微有点点复杂，网上也搜不到现成的，不得不尝试自己动手丰衣足食。。。
不过我还是只会简单的，复杂的什么断言、组之类的还在艰难学习中，也希望有大佬不吝赐教。
这个需求是：管理员在某个工单定义一个范围，比如成绩是0-100之间，或者调查问卷的年龄范围，然后工单流转后其他用户输入的数字收到管理员定义个范围影响，所以要求用正则校验管理员输入的范围规则是否合法，然后根据输入的范围，去校验普通用户输入的数值是否合法。
- 首先是最核心的规则校验表达式，我们的规则是： (或者[开头+数字+英文逗号+数字+)或]结尾，就是这种：
(1,100) 或者 (1,100]，就是初中数学的那种范围区间。我用的正则表达式是：
let reg = /^(\(|\[)-?[0-9]*,-?[0-9]*(\)|\])$/;
// 其中 ^是匹配开头
// (|\[)是以(或者[开头，在 (和[之前加上\是转义字符，避免表达式把 (和[当成括号的开头来匹配，而是把它们当做字符串 (和[
// -?是有一个或者0个-，因为可能是负数也可能是正数
// [0-9]*就是重复的数字
// ,就是中间隔开的逗号；
// -?[0-9]* 跟逗号前面的一样，是一个数字校验
// (\)|\]) 是以或]结尾
// $是匹配结尾
上面这个正则表达式有个缺陷就是：两个数字的大小没有作比较，也就是用户输入的第二个数字可能比第一个数字小，这个我现在实在是无能为力[手动哭笑不得]
心得：刚开始觉得无从下手是因为不知道开头和结尾匹配到哪里，现在其实也没太明白，感觉就是^从开始匹配到结束，$从结尾匹配到开头。。。目前这个不影响，要紧的是中间的规则
- 拿到字符串的规则之后，从字符串中截取出最大值和最小值（这里没有考虑()和[]的区别，因为()的区间是不包含开头和结尾，[]的区间是包含开头和结尾），我用的方法是：
// 从范围的字符串中获取数字
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]
- 根据需要在数字输入框中限定输入的最大值和最小值
下面是我最近学到的正则里的一点小知识：
// 正则中常见的限定符：
a* // 字符a出现0次或多次
a+ // 字符a出现1次或多次
a? // 字符a出现0次或1次
a{3} // 字符a出现3次
a{3,7} // 字符a出现3-7次
a{3,} // 字符a出现3次以上
// 或运算符，这个用的还挺多的
（图片来源网络，侵删）
学习路上最大的敌人是恐惧，如果感兴趣可以去搜一些正则表达式的视频学习，还是很有帮助的。希望本文对您有所帮助！