HEX与RGB互转函数自动检测功能报错求助

问题背景 #

需要实现一个自动检测输入格式的颜色转换工具：输入HEX格式颜色返回RGB，输入RGB格式返回HEX。现有转换函数可正常工作，但格式检测的detect函数存在错误，调用detect(0, 0, 0)时直接报错，无法完成双向转换。

现有代码问题分析 #

原detect函数的核心问题：

• 参数接收不兼容：仅定义单个input参数，但调用时传入三个数值参数（如0,0,0），导致input仅为第一个值，且数字类型无includes方法，直接触发报错。
• RGB输入处理逻辑错误：rgbToHex需要三个独立数值参数，但原detect直接将单个input传入，不符合函数参数要求。
• 格式检测覆盖不全：未考虑多种RGB输入形式（如"rgb(0,0,0)"、逗号分隔字符串"0,0,0"），也未处理无效输入场景。

修复后的完整代码 #

// HEX转RGB：支持标准HEX（#ffffff）和简写HEX（#fff）
const hexToRgb = (hex) => {
    // 移除#号，统一处理
    const cleanHex = hex.replace(/^#/, '');
    // 处理简写HEX：#fff → #ffffff
    const fullHex = cleanHex.length === 3 
        ? cleanHex.split('').map(c => c + c).join('') 
        : cleanHex;
    
    const r = parseInt(fullHex.slice(0, 2), 16);
    const g = parseInt(fullHex.slice(2, 4), 16);
    const b = parseInt(fullHex.slice(4, 6), 16);
    
    return { r, g, b };
};

// RGB分量转HEX辅助函数
const componentToHex = (c) => {
    const hex = c.toString(16);
    return hex.length === 1 ? `0${hex}` : hex;
};

// RGB转HEX：支持接收三个独立数值、数组或对象
const rgbToHex = (...args) => {
    let r, g, b;
    if (args.length === 3) {
        [r, g, b] = args;
    } else if (Array.isArray(args[0])) {
        [r, g, b] = args[0];
    } else if (typeof args[0] === 'object') {
        ({ r, g, b } = args[0]);
    } else {
        throw new Error('无效的RGB输入格式');
    }
    // 确保分量在0-255范围内
    const clamp = (num) => Math.max(0, Math.min(255, parseInt(num)));
    return `#${componentToHex(clamp(r))}${componentToHex(clamp(g))}${componentToHex(clamp(b))}`;
};

// 格式检测与自动转换函数
const detect = (...input) => {
    try {
        // 处理三个数值参数的情况（如detect(0,0,0)）
        if (input.length === 3 && input.every(val => !isNaN(parseInt(val)))) {
            return rgbToHex(...input);
        }
        
        // 合并输入为字符串统一处理
        const inputStr = input.join(',');
        
        // 检测HEX格式（带#或不带#，支持3位/6位）
        if (/^#?[0-9A-Fa-f]{3,6}$/.test(inputStr.replace(/\s/g, ''))) {
            return hexToRgb(inputStr.replace(/\s/g, ''));
        }
        
        // 检测RGB格式（如"rgb(0,0,0)"或"0,0,0"）
        const rgbMatch = inputStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/) || inputStr.match(/(\d+),\s*(\d+),\s*(\d+)/);
        if (rgbMatch) {
            const [, r, g, b] = rgbMatch;
            return rgbToHex(r, g, b);
        }
        
        throw new Error('无法识别的颜色格式');
    } catch (err) {
        console.error(err.message);
        return null;
    }
};

// 测试用例
console.log(detect("#ff33ff")); // { r: 255, g: 51, b: 255 }
console.log(detect("#f3f")); // { r: 255, g: 51, b: 255 }
console.log(detect(0, 0, 0)); // #000000
console.log(detect("0, 255, 128")); // #00ff80
console.log(detect("rgb(255, 0, 255)")); // #ff00ff
console.log(detect("invalid")); // 输出错误提示并返回null

代码说明 #

1. hexToRgb优化：支持标准HEX和简写HEX格式，自动移除#号并补全简写格式。
2. rgbToHex增强：兼容多种输入形式（三个独立数值、数组、对象），并对分量值做0-255范围限制。
3. detect函数修复：
   • 处理多参数输入场景（如detect(0,0,0)）；
   • 通过正则表达式准确识别HEX和RGB格式；
   • 增加错误捕获，返回友好提示；
   • 支持带空格的输入（如"0, 255, 128"）。

内容的提问来源于stack exchange，提问作者Cristina Caldeira