正則表達式的平常使用

該文章記錄平常工做中用到的正則表達式前端

1.非CSSmodule轉成CSSmodule類型

image.png
(className='([^']+?)')正則表達式

  • 查找文件中全部的className部分

image.png
className={styles.$2}小程序

  • 將匹配到的內容換成styles.格式

image.png
(styles.((\w+)-(\w+)))antd

  • 查找到全部的使用-命名的樣式

image.png
~~~~styles.$3$4ide

  • 替換全部的使用-命名的樣式

image.png

2.將全部使用的moment方法統一管理作判空

場景:項目需求有大量使用antd的DatePiker的使用,當後臺傳參爲空的時候顯示invaliddate就很醜
因此通常須要對參數進行判空,數量多起來就要進行抽成統一方法,一個個改的話就很累
統一放在經常使用方法文件中
image.png函數

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

momentNotNull($1,$2)
image.png
替換以後須要作校驗,防止有些已經作了null判空的參數被也被修改了
以上~this

3.清除代碼中的debugger

剛學習前端的時候喜歡打debugger
而後以後以爲在for循環裏打debugger又很是的痛苦
再而後就是用谷歌控制檯打斷點調試
奈何有時候項目文件過多,搜一個名字又N多重名文件,還要對這列表來找~(心塞)
因此定位小問題的時候仍是喜歡用debugger
定位的問題多了一天下來,文件準備提交了
發現debugger沒刪
之前的項目組debugger一個沒刪扣五塊錢~
話很少說
上正則阿里雲

\sdebugger\n
經過正則表達式一鍵匹配全部的debugger
而後用空字符替換
(直接搜索debugger進行全局替換會出現把名字包含debugger的函數或者語句給替換掉)spa

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

5.傳入時間格式,格式化當前時間

在學習小程序代碼的時候偶然看到老師分享的一段時間處理的代碼,正好最近有用到moment插件中的format方法,應該moment中的實現方案和這個原理差很少吧,作下記錄,代碼出處由於太多地方轉載,找不到,侵刪(狗頭)

Date.prototype.Format = function (fmt) { 
    if(!fmt){
        fmt="yyyy-MM-dd hh:mm:ss"
    }
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小時 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    return fmt;
}

var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");
console.log(time1)
console.log(time2)

to be continue...

相關文章
相關標籤/搜索