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

【问题标题】：Dynamically format string using regex使用正则表达式动态格式化字符串
【发布时间】：2020-05-27 01:54:04
【问题描述】：

我有一个我正在尝试格式化的日期输入（字符串），所以当我将它发送到数据库时，它的格式是正确的。我想要的格式是 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'

【问题讨论】：

请添加示例输入和输出以使您的问题可重现。
您很可能需要发布事件侦听器，最好也发布您的 HTML。我猜你在 input.value 上使用某种正则表达式替换输入？您可能必须恢复选择位置才能使其正常工作。同样\d 不包括空格也不包括-
@TimBiegeleisen 我添加了一个我想要发生的例子。

标签： javascript regex reactjs

【解决方案1】：

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

Working copy of your code is here

像这样

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>
  );
}

【讨论】：