【正则】正则表达式的日常使用

577 阅读1分钟

该文章记录日常工作中用到的正则表达式

1.非CSSmodule转成CSSmodule类型

image.png (className='([^']+?)')

  • 查找文件中所有的className部分 image.png className={styles.$2}
  • 将匹配到的内容换成styles.格式 image.png (styles.((\w+)-(\w+)))
  • 查找到所有的使用-命名的样式 image.png styles.$3$4
  • 替换所有的使用-命名的样式 image.png

2.将所有使用的moment方法统一管理做判空

场景:项目需求有大量使用antd的DatePiker的使用,当后台传参为空的时候显示invaliddate就很丑 所以一般需要对参数进行判空,数量多起来就要进行抽成统一方法,一个个改的话就很累 统一放在常用方法文件中 image.png

moment\((.*)\).format\((.*)\) image.png

momentNotNull($1,$2) image.png 替换之后需要做校验,防止有些已经做了null判空的参数被也被修改了 以上~

3.清除代码中的debugger

刚学习前端的时候喜欢打debugger 然后之后觉得在for循环里打debugger又非常的痛苦 再然后就是用谷歌控制台打断点调试 奈何有时候项目文件过多,搜一个名字又N多重名文件,还要对这列表来找~(心塞) 所以定位小问题的时候还是喜欢用debugger 定位的问题多了一天下来,文件准备提交了 发现debugger没删 以前的项目组debugger一个没删扣五块钱~ 话不多说 上正则

\sdebugger\n

通过正则表达式一键匹配所有的debugger 然后用空字符替换

直接搜索debugger进行全局替换会出现把名字包含debugger的函数或者语句给替换掉

4.根据不同的文件后缀显示不同的图标

最近boss要求做一个类似于网盘的需求,用的是某里云的前端直传oss 然后根据保存的文件进行分类显示 涉及到不同的文件需要有不同的图标显示

const musicsuf = /\S*\.[mp3|wma|avi|rm|rmvb|flv|mpg|mov|mkv]/
const videosuf = /\S*\.[mp4|rmvb|flv|mpeg|avi]/
const imgsuf = /\S*\.[gif|jpeg|png|jpg|bmp]/
	if (videosuf.test(filename)) {
		return (<i className="iconfont icon-videoicon"></i>)
	} else if (musicsuf.test(filename)) {
		return (<i className="iconfont icon-musicicon"></i>)
	}
		else if (imgsuf.test(filename)) {
		return (<i className="iconfont icon-imgicon"></i>)
	} else {
		return (<i className="iconfont icon-excelicon"></i>)
	}

代码分别匹配了常见的视频,音频和图片格式,剩余的默认为文档格式 效果如下 image.png

to be continue...