正则表达式 InputNumber 格式化程序 ant-design答案

【问题标题】：regex InputNumber formatter ant-design正则表达式 InputNumber 格式化程序 ant-design
【发布时间】：2020-12-05 09:50:14
【问题描述】：

伙计们，我真的不了解正则表达式，我正在使用 ant-design 输入数字组件来制作货币过滤器。

目前是这样的：

 <InputNumber
    style={{ width: 175 }}
    formatter={value => `R$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, 
    ".")}
    parser={value => value.replace(/[A-Z]|[a-z]|[$ ]|\.+/g, "")}
    onChange={(value) => setSelectedKeys(value ? value : [])}
  />

目前的格式，例如千五百是这样的：1.500 我也需要它接受负数 (-1.500) 和美分的逗号，例如 1.500,25

你们能帮帮我吗？我尝试了一些解决方案，但无法按我的需要工作

【问题讨论】：

标签： javascript reactjs regex antd

【解决方案1】：

各位，经过大量搜索，我找到了一种解决方案，不可能是更好的解决方案，但目前正在做它的工作..

我安装了 MaskedInput 和 text-mask-addons 依赖项。

import MaskedInput from "react-text-mask";
import createNumberMask from "text-mask-addons/dist/createNumberMask";

const defaultMaskOptions = {
    prefix: "R$",
    suffix: "",
    includeThousandsSeparator: true,
    thousandsSeparatorSymbol: ".",
    allowDecimal: true,
    decimalSymbol: ",",
    decimalLimit: 2,
    integerLimit: 7,
    allowNegative: true,
    allowLeadingZeroes: false,
  };
  const currencyMask = createNumberMask(defaultMaskOptions);


const NumberFilter = (
    <Space style={{ marginRight: 20 }}>
      <MaskedInput
        mask={currencyMask}
        render={(ref, props) => (
          <Input
            placeholder="Valor inicial"
            ref={(input) => ref(input && input.input)}
            {...props}
            value={selectedKeys[0]}
            onChange={(event) => {
              props.onChange(event);
              let betweenInitial = [...selectedKeys];
              betweenInitial[0] = event.target.value;
              setSelectedKeys(betweenInitial);
            }}
          />
        )}
      />
      <RiArrowLeftRightLine />
      <MaskedInput
        mask={currencyMask}
        render={(ref, props) => (
          <Input
            placeholder="Valor final"
            ref={(input) => ref(input && input.input)}
            {...props}
            value={selectedKeys[1]}
            onChange={(event) => {
              props.onChange(event);
              let betweenFinal = [...selectedKeys];
              betweenFinal[1] = event.target.value;
              setSelectedKeys(betweenFinal);
            }}
          />
        )}
      />
    </Space>
  );

【讨论】：

【解决方案2】：

我的解决方案：

// formatter and parser input number
export const formatterNumber = (val) => {
  if (!val) return 0;
  return `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ".").replace(/\.(?=\d{0,2}$)/g, ",");
}

export const parserNumber = (val) => {
  if (!val) return 0;
  return Number.parseFloat(val.replace(/\$\s?|(\.*)/g, "").replace(/(\,{1})/g, ".")).toFixed(2)
}

<InputNumber 
  {...props}
  formatter={(value) => formatNumber(value)}
  parser={(value) => parserNumber(value)}
/>

【讨论】：