正则表达式

一、正则表达式是用来干什么的?

正则表达式是用来匹配字符串的,用来检查一个字符串中是否含有某种子串,或者将匹配的子串替换成需要的子串。

二、正则表达式在项目中的应用?

1.需求:数值转换--输入val为-2,则输出-2%;输入为2,则输出+2%;若输入为0,则输出为‘-’

function formateValue(val) {
    if(/-/.test(val)) {
        return `${val}%`
    } else if (val == 0) {
        return ''
    } else {
        return `+${val}%`
    }
}
View Code

2.需求:颜色转换--输入val为-2,则输出颜色绿色;输入为2,则输出颜色红色;若输入为0,则输出颜色白色

function formateColor(val) {
        if(/-/.test(val)) {
            return 'green'
        } else if (val == 0) {
            return '#fff'
        } else {
            return 'red'
        }
    }
View Code

3.需求:图标转换--输入val为-2,则输出图标down;输入为2,则输出图标up;若输入为0,则输出图标level

function formateIcon(val) {
      if(/-/.test(val)) {
            return 'down'
        } else if (val == 0) {
            return 'level'
        } else {
            return 'up'
        }
    }
View Code

注:这里图标我是用字符串表示的,项目中需引入对应图片,输出图标

4.需求:若输入val为2,则输出+2%,val颜色为红色,icon为up;若输入val为-2,则输出-2%,val颜色为绿色,icon为down;若输入val为0,则输出'',val颜色为白色,icon为level;

function formateStyleValue(item) {
    function formateName(str) {
        return /同比|环比|占比/.test(str)
    }
    function formateColor(val) {
        if(/-/.test(val)) {
            return 'green'
        } else if (val == 0) {
            return '#fff'
        } else {
            return 'red'
        }
    }
    function formateIcon(val) {
      if(/-/.test(val)) {
            return 'down'
        } else if (val == 0) {
            return 'level'
        } else {
            return 'up'
        }
    }
    if(formateName(item.name)) {
        return {
            ...item,
            value: formateValue(item.value),
            color: formateColor(item.value),
            icon: formateIcon(item.value)
        }
    }

}
View Code

测试:formateStyleValue({name: '基金支出同比', value:0}).icon 输出:"level";

5.需求:根据regionCode不同,返回全国、省份或市;regionCode=100000为china,regionCode=20000为province,regionCode=20200为市

function checkProviceOrCity(regionCode) {
    if(String(regionCode).length!=6) return false;
    if(/[1-9]{1}00000/.test(regionCode)) {
        return 'china'
    } else if(/[1-9]{1}0000/.test(regionCode)) {
        return 'provice'
    } else if (/[1-9]{1}[0]{0,3}$/.test(regionCode)) {
        return 'city'
    }

}
View Code
致力于前端技术学习与分享,会及时更新博客。
原文地址:https://www.cnblogs.com/caoxueying2018/p/12160235.html