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

Question

I am using react 16.8.2 new hooks API. -Just for info-

My problem only involves JS.

I have two input fields. They take only numbers as inputs. If the user enters /\\D+/ (non-digits), the field is set to ''(empty). If he enters 2.3393 , the number should always be rounded to two decimal places 2.34

Field1 : onChange formats the number to $ 32,233,233,322.24

Field2 : onChange formats the number to 99% . Decimals places are simply truncated.

The Input field should be able to handle e.nativeEvent.inputType deleteContentBackward as well. Such that if the user is at $ 2 and deletes 2 , Field1 becomes empty. Similarly for Field2. 1% on deleting % becomes empty.

So far I have this:

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

It does not work well for when user enters single . . $ are prepend for every . keystroke. The case that when user enters /\\D+/ is not handled. % Field2 decimal place truncation case is also not handled. I can think of other cases also that are not handled.

My code is getting complicated. This approach is not elegant. Please Help.

Answer 1

The following code works well.

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

I still feel that there is a lot of redundancy and unhandled cases in this code