时间戳

首页 > 解决方案 > JavaScript 正则表达式：当输入字段 onChange 事件触发时，格式化字段

javascript - JavaScript 正则表达式：当输入字段 onChange 事件触发时，格式化字段

问题描述

我正在使用 react 16.8.2新的钩子 API。-仅供参考-

我的问题只涉及JS。

我有两个输入字段。他们只接受数字作为输入。如果用户输入/\D+/（非数字），则该字段设置为 ''（空）。如果他输入2.3393，则该数字应始终四舍五入到小数点后两位2.34

Field1：onChange将数字格式化为$ 32,233,233,322.24

Field2：onChange将数字格式化为99%. 小数位被简单地截断。

输入字段也应该能够处理e.nativeEvent.inputType deleteContentBackward。这样，如果用户在$ 2并删除2， Field1 变为空。Field2 也是如此。1%删除%时变为空。

到目前为止，我有这个：

const handleInputChange = function (e) {
     const val = e.target.value;
     const formatValue = function () {
        if (/.*\d?\.\d*/.test(val)) return val.replace(/(?<=\d?\.\d*)\..*/g, '');
        return +val.replace(/\$\s?|(,+)|%/g, '');
      };  

      if (formatValue()) {
        if (fieldSuffix === 'Percentage') {
          if (e.nativeEvent.inputType === 'deleteContentBackward') return setVal(`${formatValue()}%`.replace(/^\d%$|\d(?=%)/, ''));
          return setVal(`${formatValue()}%`);
        }   
        if (fieldSuffix === 'Dollars') return setVal(`$ ${formatValue()}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
        return setVal(formatValue());
      }   
      return setVal('');
 };

return (
    <input
        value={val}
        onChange={handleInputChange}
    /> 
)

当用户输入 single 时，它​​不起作用.。$为每次.击键添加。/\D+/不处理用户进入的情况。%Field2 小数位截断情况也不处理。我还可以想到其他未处理的情况。

我的代码越来越复杂。这种方法并不优雅。请帮忙。

标签： javascriptregex

解决方案

以下代码运行良好。

const handleInputChange = function (e) {
      const formatValue = function () {
        // Remove non-digit, except '.' and remove everything beginning from second decimal '.'
        return e.target.value.replace(/[^0-9.]|(?<=^[^.]*\.[^.]*)\..*/g, '');
      };

      if (formatValue()) {
        if (fieldSuffix === 'Percentage') {
          // Percentage decimal truncated
          const truncatedPercentage = formatValue().replace(/\..*/, '');
          if (e.nativeEvent.inputType === 'deleteContentBackward') return setVal(`${formatValue()}%`.replace(/^\d%$|(\d|\.)(?=%)/, ''));
          return setVal(`${truncatedPercentage}%`);
        } 
        if (fieldSuffix === 'Dollars') {
          // Truncated to two decimal places, not rounded
          const truncatedDollar = formatValue().replace(/(?<=\.\d{2}).*/, '');
          // Format and insert ','
          return setVal(`$ ${truncatedDollar}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
        } 
      } 
      return setVal('');
};

我还是觉得这段代码有很多冗余和未处理的情况

推荐阅读