Antd Design's inputNumber implements the coexistence of thousands separators and decimal points

The code comes from the article: Input/InputNumber using antDesign in react can retain up to two decimal places, and input of more decimal places is prohibited, and real-time input verification is implemented and thousands separators are added. Symbol, I have forgotten a lot of regular expressions, I mainly make notes.

//定义InputNumber的参数              
const NumberProps = {
    
    
    min: '0',//最小值
    max: '999999999999999.99',//最大值
    stringMode: true,//字符值模式，开启后支持高精度小数
    step: '0.01',//小数位数
    formatter: (value: any) => {
    
    //指定输入框展示值的格式
      const reg1 = `${
      
      value}`.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      return reg1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      //如果不需要添加千位分隔符可以直接返回return reg1 
    },
  };
 
			//在InputNumber中使用NumberProps 
             <Col span={
    
    10}>
                <Form.Item
                  label="金额"
                  name="amount"
                  rules={
    
    [
                    {
    
    
                      required: true,
                      message: '请输入金额',
                    },
                  ]}
                >
                  <InputNumber {
    
    ...NumberProps} style={
    
    {
    
     width: '100%' }} />
                </Form.Item>
              </Col>

There are mainly two regular expressions involved here:

value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
value1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

1. The function of the first expression is: Ensure that the number in the inputNumber box can only retain two digits after the decimal point, and the third digit cannot be entered.< /span>

Detailed explanation of regular expressions:

• ^start of line
• $end of line
• Dot sign. can match any character, only once.
• The asterisk* can copy the character before it any number of times, including 0 times, that is, [0, +∞] times.
• +Indicates more than 0; the character before the + sign must appear at least once (1 or more times), that is, [1, +∞] times.
• ? means 0 or 1
  Example: colou?r can match color or colour,
  ? The question mark means that the previous character can only appear at most Once (0 times, or 1 time).

value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

(\-)* indicates the presence of negative numbers. * can also be 0 times, so both positive and negative numbers will be matched. But there is a problem, --121215644.061245 this kind of number also meets the matching conditions, , so it can be changed to (\-)?, ? means 0 or 1 -, to avoid special situations

(\d+)Indicates matching one or more numbers

\.In \ is an escape character, which means matching .(decimal point)

(\d\d).* also matches numbers, but here it matches the numbers after the decimal point. There are two \d because two decimal places are retained after the decimal point (the third digit cannot be lost) a>

$1$2$3 is a match (placeholder), each corresponding to a () group.

I originally had a question here. Didn't I already set it earlier?stringMode: true, step: '0.01' turned on the mode to support high-precision decimals and set the precision to two decimal places. Why do I need to set it up? This regularity?

After testing, it was found that stringMode: true, step: '0.01' cannot limit only two decimal places to two digits after the decimal point. You can still enter any number of digits after the decimal point. These two sentences can only ensure that the second digit after the decimal point changes when the upper and lower buttons on the right are clicked. For example, if you click the Add button, the decimal point becomes .0912

2. The function of the second expression is: Use thousands separators to separate. This regular expression has been given in the antd example Out.

value1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

\b is a special code specified by regular expressions (well, some people call it a metacharacter), which represents the beginning or end of a word, that is, the boundary of a word. Although English words are usually separated by spaces, punctuation, or newlines, \b does not match any of these word-separating characters, it only matches one position.

If more precise is needed, \b matches a position where the character before and after it must be \w (alphanumeric) and \W (non-alphanumeric), i.e. the match must occur in on the boundary between \w (alphanumeric) and \W (non-alphanumeric) characters.
\b is a metacharacter that belongs to the matching position. It is generally used as a placeholder and is not captured. Also belonging to the matching position are the matching line starting bit ^ and line ending bit $