常用正则表达式
正文:
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}
/>
);
};