常用正则表达式

正文：
MDN正则参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

我的正则笔记：https://www.yuque.com/docs/share/36f69420-115f-4e01-b897-550d94b404ab?# 《正则》

千分位表示价格

1.针对正数、负数，整数，浮点数都可以（IE不支持，会出现错误的数量词错误）

/(^-?\d{1,2}|-?(?<!\.\d*)\d{3})(?=((\d{3})+(\.\d*)?)$)/g

示例：

let str = "123456789122324342223231.5648323";
let reg = /(^-?\d{1,2}|-?(?<!\.\d*)\d{3})(?=((\d{3})+(\.\d*)?)$)/g;
str.replace(reg,"$&,") // 结果：123,456,789,122,324,342,223,231.5648323
 
let str = "-1234567891223243422.5648323";
let reg = /(^-?\d{1,2}|-?(?<!\.\d*)\d{3})(?=((\d{3})+(\.\d*)?)$)/g;
str.replace(reg,"$&,") // -1,234,567,891,223,243,422.5648323

2、旁门左道实现（针对正整数）

(str || "").split("").reverse().join("").replace(/(\d{3})(?!=\d*\.)/g,"$1,").replace(/,$/g,"").split("").reverse().join("")

3.整数小数均可，传是否保留小数入参
示例：

/* 处理整数部分 */
function intFormatPrice(str){
    return (str || "").split("").reverse().join("").replace(/(\d{3})(?!=\d*\.)/g,"$1,").replace(/,$/g,"").split("").reverse().join("")
}
 
/* 千分位主函数 */
function formatPrice(str="",fixed){
    let price =  fixed!=='undefined' ? `${Number(str).toFixed(fixed)}`: str;
    return `${price}`.split(".").map((item,index) =>{
    if(!index){
        return intFormatPrice(item)
    }    
    return item
}).join(".")
}

主要针对价格：

1、只能输入100、100.00、100.（失去焦点之后自动补全小数）、.122

2、不能输入100.0.0这种非法价格

3、正数

4、可输入0、0.0、0.00、0.、.0

5.输入.时，失去焦点自动补全为0.0
6.不能输入00

let reg = /^\s*([1-9]\d*|0)?(\.)?([1-9]|(?<!^0)0)*\s*$/g;

示例：

import React, { useState } from 'react';
import { Input } from '@casstime/bricks';
 
const Demo = () => {
  const [value, setValue] = useState('');
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value;
    let reg = /^\s*([1-9]\d*|0)?(\.)?([1-9]|(?<!^0)0)*\s*$/g;
    if(value.search(reg)!==-1){
        setValue(e.target.value);
    }
     
  };
  const handleBlur = () => {
    let regex = /(\.$|^\.)/g;
    let numberValue = Number(value);
     if(isNaN(numberValue)){
     setValue("0.00");
    }else if(value.search(regex)!==-1 ){
     setValue(`${Number(value)}`);
    }
   }
  return (
    <Input
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
      placeholder="请输入..."
      defaultValue="123"
    />
  );
};

主要针对数量：

1、默认为1个，不能输入0、以及小数

2、可删除为空的，空的失去焦点则自动填为1

3、最多为9999999，至少一个

4、正整数

/^\s*([1-9]\d*)?\s*$/g

示例：

import React, { useState } from 'react';
import { Input } from '@casstime/bricks';
 
const Demo = () => {
  const [value, setValue] = useState('');
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value;
    let reg = /^\s*([1-9]\d*)?\s*$/g;
    if(value.search(reg)!==-1){
        setValue(e.target.value);
    }
     
  };
  const handleBlur = () => {
     if(!value.trim()){
     setValue("1");
    }
   }
  return (
    <Input
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
      placeholder="请输入..."
      defaultValue="123"
    />
  );
};

与中文有关：

1、只能输入中文、空格
中文+空格

/^[\u4e00-\u9fa5\s]*$/g

非（中文+空格）

/[^\u4e00-\u9fa5\s]/g

此示例可以解决微软输入法限制输入中文时也可以输入拼音

import React, { useState,useRef,useEffect } from 'react';
import { Input } from '@casstime/bricks';
 
const Demo = () => {
  const [value, setValue] = useState('');
  const [puase,setPuase] = useState(false);
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let val = e.target.value || "";
    let reg = /^[\u4e00-\u9fa5\s]*$/g;
    let reg1 = /[^\u4e00-\u9fa5\s]/g;
     
    setValue(val);
     
    if(!puase && val.search(reg) === -1 && val){
      setValue(val.replace(reg1,""))
    }
  };
   
  const compositionstart = () => {
   setPuase(true)
  }
   
  const onCompositionEnd = () => {
    setPuase(false)
    let reg = /^[\u4e00-\u9fa5\s]*$/g;
    let reg1 = /[^\u4e00-\u9fa5\s]/g;
    if(value.search(reg) === -1 && value){
      setValue(value.replace(reg1,""))
    }
   }
   
  return (
    <Input
      value={value}
      onChange={handleChange}
      placeholder="请输入..."
      onCompositionStart={compositionstart}
      onCompositionEnd={onCompositionEnd}
    />
  );
};

只能输入中文，不能输入空格
中文

/^[\u4e00-\u9fa5]*$/g

非中文

/[^\u4e00-\u9fa5]/g

此示例可以解决微软输入法限制输入中文时也可以输入拼音

import React, { useState,useRef,useEffect } from 'react';
import { Input } from '@casstime/bricks';
 
const Demo = () => {
  const [value, setValue] = useState('');
  const [puase,setPuase] = useState(false);
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let val = e.target.value || "";
    let reg = /^[\u4e00-\u9fa5]*$/g;
    let reg1 = /[^\u4e00-\u9fa5]/g;
     
    setValue(val);
     
    if(!puase && val.search(reg) === -1 && val){
      setValue(val.replace(reg1,""))
    }
  };
   
  const compositionstart = () => {
   setPuase(true)
  }
   
  const onCompositionEnd = () => {
    setPuase(false)
    let reg = /^[\u4e00-\u9fa5]*$/g;
    let reg1 = /[^\u4e00-\u9fa5]/g;
    if(value.search(reg) === -1 && value){
      setValue(value.replace(reg1,""))
    }
   }
   
  return (
    <Input
      value={value}
      onChange={handleChange}
      placeholder="请输入..."
      onCompositionStart={compositionstart}
      onCompositionEnd={onCompositionEnd}
    />
  );
};