Antd InputNumber正则掩码需求：实时插入连字符而非输入完成后生效

要实现InputNumber组件实时插入123-456-789-123格式的连字符，直接用匹配完整长度的正则无法满足实时需求，推荐利用Antd InputNumber自带的formatter和parser属性来处理，既能保证显示格式，又不影响原始值的逻辑处理。

最终实现代码 #

import React, { useState } from "react";
import "./index.css";
import { InputNumber } from "antd";

const App = () => {
  const [value, setValue] = useState("");

  // 格式化显示文本：每3位插入连字符，避免末尾多余符号
  const formatDisplay = (rawValue) => {
    if (!rawValue) return "";
    // 过滤所有非数字字符
    const pureNumStr = rawValue.toString().replace(/\D/g, "");
    // 每3位数字后插入连字符（仅当后面还有数字时）
    return pureNumStr.replace(/(\d{3})(?=\d)/g, "$1-");
  };

  // 解析输入值：移除所有连字符，返回纯数字字符串
  const parseRawValue = (displayValue) => {
    if (!displayValue) return "";
    return displayValue.replace(/-/g, "");
  };

  return (
    <InputNumber
      value={value}
      onChange={setValue}
      formatter={formatDisplay}
      parser={parseRawValue}
      style={{ width: "220px" }}
    />
  );
};

export default App;

关键逻辑说明 #

• formatDisplay函数：负责将原始数字转换为带连字符的显示格式。先过滤掉所有非数字字符，再用正则/(\d{3})(?=\d)/g匹配每3个连续数字（且后面仍有数字），在其后插入连字符，实现输入过程中实时添加分隔符，同时不会在末尾生成多余的连字符。
• parseRawValue函数：负责将用户输入的带连字符的文本解析为纯数字，确保组件内部维护的value是纯净的数字字符串，方便后续业务逻辑处理。
• 长度限制（可选）：如果需要限制最多输入10位数字，可在formatDisplay中对pureNumStr进行截断：

  const pureNumStr = rawValue.toString().replace(/\D/g, "").slice(0, 10);
  

内容的提问来源于stack exchange，提问作者Натик