Today, when I was doing an interview on the Internet, I found a question about color conversion
The topics are as follows:
Please write a JavaScript function toRgb, which is used to transform the color coding requirements commonly used in CSS. Requirement:

alert(toRgb("#0000FF"));//rgb(0,0,255);
alert(toRgb("invalid")) //invalid
alert(toRgb("#G00"))//#G00

Train of thought:
1. Understand the meaning of the topic, that is to say, convert the hexadecimal that meets the requirements, and return the parameter itself if it does not meet the requirements
2. First, judge whether the parameters meet the conditions. First, start with ා and then meet the hex specification. All numbers need to be between 0-F
3. The second radix parameter of parseInt is required for the value conversion to carry out the binary conversion

My code

    const sixtyradix = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'A', 'B', 'C', 'D', 'E', 'F']
    function toRgb(param) {
        if (typeof param == "string" && param.startsWith('#') && param.length == 7) {
            let result = '';
            let status = true
            let parta = param.substring(1, 3);
            let partb = param.substring(3, 5);
            let partc = param.substring(5, 7)
            parta.split('').every(item =>
                sixtyradix.includes(item)
            ) ?
                result = result + 'rgb(' + parseInt(parta, 16) + ','
                :
                status = false
            partb.split('').every(item =>
                sixtyradix.includes(item)
            ) ? result = result + parseInt(partb, 16) + ',' : status = false
            partc.split('').every(item =>
                sixtyradix.includes(item)
            ) ? result = result + parseInt(partc, 16) + ')' : status = false
            if (status) {
                return result
            }
            else {
                return param
            }

        }
        else {
            return param
        }
    }
    alert(toRgb("#0000FF"));
    alert(toRgb("invalid"));
    alert(toRgb("#G00")); 

After writing, we can still find many shortcomings
1. Smelly and long, code logic is too complex, unnecessary
2. Too many variables. If each function is written in this way, the memory performance cannot be tolerated
3. The judgment logic is rigid, without paying attention to details such as case and case
Take a look at the answer with a question. It's only three lines of code

function toRGB(color) {
    var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    match = color.match(regex)
    return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color
}

I just saw teacher Yao's regular expression a few days ago, and I also took reading notes (regular expression reading notes). When I was dealing with the problem, I didn't think of regular expression for the first time.
The regular is divided into two checks. The matching value captured by () in the regular is obtained by math[index], which is a good alternative to the character splitting problem in my method. Although the idea of understanding the problem is the same, after using the regular, all the problems above are basically solved, and the method does not have browser compatibility problem.

The paper must be light at last, and we must do it. Only when we learn to use, can we remember deeply and integrate~