使用正则表达式动态格式化字符串

debugcn 发表于 Dev

特里斯坦

我有一个试图格式化的日期输入（字符串），所以当我将其发送到数据库时，它的格式正确。我想要的格式是DD-MM-YYYY。
理想情况下，我想在代码到达相关点（即在DD和MM之后）时动态添加“-”。我当前的代码是：

    const formattedDate = date.replace(
      /^(\d{2})(\d{0,2})(\d{0,4})/,
      `$1-$2-$3`,
    );

当我输入数字时，它工作正常，但是当我尝试退格时，它将不会超过第一个“-”。
我知道为什么这样做（每次字符串更改时，我的正则表达式都会添加“-”），但是我无法解决。

const [expiry, setExpiry] = useState<string>();

const formatValue = () => {
      /^(\d{2})(\d{0,2})(\d{0,4})/,
    `$1-$2-$3`,
  );
  setExpiry(formattedDate);
}

<TextInput value={expiry} onChange={formatValue} />

样本输入和输出：

input0 - '2'
output0 - '2'
input1 - '22'
output1 - '22-'
input2 - '220'
output2 - '22-0'
etc

finalInput - '22022022'
finalOutput - '22-02-2022'

请注意，您的onChange也将带有破折号。因此，只需-在应用正则表达式之前删除不需要的内容，并-在设置状态时删除不需要的内容

您的代码的工作副本在这里

像这样

export default function App() {
  const [expiry, setExpiry] = useState();

  const formatValue = e => {
    const val = e.target.value.replace(/-/gi, "");
    const formattedDate = val.replace(/^(\d{2})(\d{0,2})(\d{0,4})/, `$1-$2-$3`);
    setExpiry(formattedDate.replace(/-$|--$/gi, ""));
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input value={expiry} onChange={formatValue} />
    </div>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。