JavaScript中如何通过正则实现带字母后缀数字的精准过滤

原有写法问题说明 #

• 直接拼接正则对象到字符串的写法无效：filter + /[a-zA-Z]/ 会把正则对象默认转成字符串"/[a-zA-Z]/"拼接，最终判断的是值是否等于11/[a-zA-Z]/，完全不符合预期
• 裸用match(filter)没有加匹配边界，会匹配字符串任意位置包含过滤值的内容，才会出现输入1时命中11、123的误匹配问题
• 硬编码单个后缀字母的写法需要枚举所有字母，维护成本极高，完全不可取

正确实现代码 #

用带起止锚点的正则做匹配即可，规则为：字符串从开头起必须完全等于输入的过滤值，后面可以接任意个英文字母，直到字符串结束，不会出现前缀误匹配的问题。

const num = some.innerText.toUpperCase().trim();
const filter = input.value.toUpperCase().trim();
// 转义用户输入里的正则特殊字符，避免规则异常
const escapedFilter = filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 正则规则：^匹配字符串开头，[a-zA-Z]*匹配0个或多个英文字母，$匹配字符串结尾
const matchRule = new RegExp(`^${escapedFilter}[a-zA-Z]*$`);

if (matchRule.test(num)) {
  // 匹配成功后执行你的业务逻辑
}

匹配效果说明 #

• 输入11时，可以正常命中11、11A、11b、11XYZ这类前缀为11、后缀接任意英文字母的内容
• 不会误命中1、111、112A、A11、11-2这类不符合前缀要求的内容
• 如果业务要求后缀最多只能接1个英文字母，只需要把正则里的*改成?即可，即规则改为^${escapedFilter}[a-zA-Z]?$，此时输入11就不会命中11AB这类多字母后缀的内容，可以按需调整。

内容的提问来源于stack exchange，提问作者SirThanksALot