JavaScript 基于正则实现输入框非法字符移除的功能求助

原有实现的逻辑偏差 #

• 事件触发时机不对：onkeydown触发时输入值还未完成更新，无法拿到最新的输入内容做处理
• 正则用途错位：原有正则/^(\d+[,]+\d{2})$/是用来匹配“完整合法的两位小数金额格式”，而非匹配需要清除的非法字符，当输入内容不满足这个完整格式时，调用replace替换该正则不会有任何实际效果（因为不满足格式的内容根本不会被这个正则匹配到）
• 处理方向相反：需求是保留合法字符、清除非法字符，原有代码的逻辑是当内容不匹配合法格式时，删除匹配到的合法内容，和实际目标完全相反。

核心实现逻辑 #

• 事件绑定调整：弃用onkeydown事件，改用oninput事件。oninput会在输入框值实际变化时触发，能准确捕捉最新输入状态，不存在取值延迟问题。
• 正则清洗规则分两步执行，不需要提前做整体格式判断：
  • 第一步匹配所有非数字、非逗号的字符，用/[^\d,]/g全局匹配，将这类字符（字母、小数点、各类特殊符号）替换为空字符串。比如输入k12.40时，这一步会清除k和.，得到1240，完全匹配示例需求。
  • 第二步处理多逗号场景，保证整个字符串里最多只出现一个逗号：不管逗号是连续重复出现，还是分散在字符串不同位置，只保留第一次出现的逗号，后续所有的逗号全部移除，满足“仅单个逗号”的规则要求。

可直接运行的实现代码 #

document.getElementById('item_price').oninput = function() {
    // 取出当前输入框的最新值
    let cleanValue = this.value;
    // 清除所有非数字、非逗号的内容
    cleanValue = cleanValue.replace(/[^\d,]/g, '');
    // 处理多逗号场景：仅保留第一个出现的逗号，其余全部移除
    cleanValue = cleanValue.replace(/,/g, (match, offset, fullStr) => {
        return fullStr.indexOf(',') === offset ? ',' : '';
    });
    // 将清洗后的值重新赋值给输入框
    this.value = cleanValue;
}

实际运行效果 #

• 输入混合内容k12.40，最终输出为1240，符合示例要求
• 输入多逗号内容12,,34,56，最终输出为12,3456，整个字符串仅保留第一个逗号，没有多逗号、重复逗号问题
• 输入特殊字符混合内容3!@#5a,6,7，最终输出为35,67，特殊字符和字母全部被清除，多余的逗号被自动移除

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