如何修改正则表达式以捕获含number%或none的CSS颜色语法？

根据CSS规范，需要捕获包含数值百分比（number%）或none关键字的CSS颜色语法。当前使用的正则表达式仅能匹配含数值百分比的颜色表达式，无法识别包含none关键字的情况。

现有正则表达式 #

((?:rgba?|hsla?|hwb|(ok)?lab|(ok)?lch)\((:?-?[\d.]+%?(deg|rad|grad|turn)?[,\s]+){2,3}[\s/]*-?[\d.]+%?\))

测试代码示例 #

const str = `{  
    rgb(102 none none / none);
    rgba(40%, 20%, 60%, 100%);
    hsl(270deg none none);
    hsla(270deg none none 100);
    hwb(0.75turn 20 40));
    hwb(none 20% 40%);
    lch(32.39 61.25 none)
    oklch(0.44 0.16 303.38)
    lab(32.39 38.43 -47.69 / 1)
    oklab(44% 0.09 -0.13)
    hwb(0.75turn 20% 40%);
    rgba(40%, 20%, 60%, 100%);
    hwb(4.712rad 20% 40%);
}`;

const ptrn = `((?:rgba?|hsla?|hwb|(ok)?lab|(ok)?lch)\\((:?-?[\\d\\.]+%?(deg|rad|grad|turn)?[,\\s]+){2,3}[\\s/]*-?[\\d\\.]+%?\\))`;

const rgx = new RegExp(ptrn, 'mig');

const matches = str.matchAll(rgx);

[...matches].forEach( m => {
 console.log(m[1]);
})

修改方案 #

核心改动是将正则中仅匹配数值分量的部分，扩展为允许匹配none关键字。具体来说，把每个分量的匹配模式从-?[\d.]+%?(deg|rad|grad|turn)?替换为(?:-?[\d.]+%?(deg|rad|grad|turn)?|none)，用非捕获组包裹数值模式和none两种可能，同时保持分隔符（逗号/空格）和alpha通道的逻辑适配。

修改后的正则表达式 #

((?:rgba?|hsla?|hwb|(ok)?lab|(ok)?lch)\((?:(?:-?[\d.]+%?(deg|rad|grad|turn)?|none)[,\s]+){2,3}[\s/]*(?:-?[\d.]+%?|none)\))

修改后的测试代码 #

const str = `{  
    rgb(102 none none / none);
    rgba(40%, 20%, 60%, 100%);
    hsl(270deg none none);
    hsla(270deg none none 100);
    hwb(0.75turn 20 40));
    hwb(none 20% 40%);
    lch(32.39 61.25 none)
    oklch(0.44 0.16 303.38)
    lab(32.39 38.43 -47.69 / 1)
    oklab(44% 0.09 -0.13)
    hwb(0.75turn 20% 40%);
    rgba(40%, 20%, 60%, 100%);
    hwb(4.712rad 20% 40%);
}`;

const ptrn = `((?:rgba?|hsla?|hwb|(ok)?lab|(ok)?lch)\\((?:(?:-?[\\d\\.]+%?(deg|rad|grad|turn)?|none)[,\\s]+){2,3}[\\s/]*(?:-?[\\d\\.]+%?|none)\\))`;

const rgx = new RegExp(ptrn, 'mig');

const matches = str.matchAll(rgx);

[...matches].forEach( m => {
 console.log(m[1]);
})

运行上述代码后，原本无法匹配的rgb(102 none none / none)、hsl(270deg none none)、hwb(none 20% 40%)等含none的颜色表达式都会被正确捕获。

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