将字符串中的rgb颜色转换为16进制

有一个项目需要和原生对接，而原生的颜色无法识别rgb，因此出现了这个转换需求。

细分析，这个需求需要：

1. 提取出rgb颜色 ； 

2. 转换rgb为16进制

3. 替换

 

正好强大的js正则可以简化这个步骤，replace函数可以简化这个过程，省略掉了3这个步骤。

废话不多说，直接上代码

1. 把转换rgb的函数formatColor提取出来，利用toString()可以转换数字为16进制的字符串

function formatColor(str) {
    const newstr = str.replace(/(rgb\()|(\))/g, '')
    const arr = newstr.split(',')
    let res = '#'
    for(var val of arr){
        res += fillZero(switchNumToSixteen(parseInt(val)))
    }
    return res
}

function switchNumToSixteen(num) {
    return num.toString(16)
}


function fillZero(str) {
    if(parseInt(str, 16) < 16) {
        return '0' + str
    }
    return str
}

 

2.利用replace函数，替换string中的对应处

function formatStr(str) {
    return str.replace(/(rgb\().+?(\))/g,function() {
        return formatColor(arguments[0])
    });
}

 

3.任务完成，检验一下是否可以正常工作~

var str = `<font style=""><b style="">未命<span style="color: rgb(221, 75, 75);">jsdsd</span>名</b><i style=""><u style="color: rgb(12, 12, 0);">组件</u></i></font>`

console.log(formatStr(str))
//<font style=""><b style="">未命<span style="color: #dd4b4b;">jsdsd</span>名</b><i style=""><u style="color: #0c0c00;">组件</u></i></font>