Box Shadow CSS Parser

Question

我正试图为我的项目实现一个盒影CSS解析器。最初，我试图使用,拆分CSS，但这不是一个合适的解决方案。因为一些框阴影有RGB颜色代码和一些十六进制颜色代码。我需要正确的正则表达式代码和javascript代码片段为这个任务。我不知道怎么做这个数组。我的框阴影CSS是:rgb(165, 33, 33) 5px 4px 20px 0px, inset rgb(0, 80, 255, 0.3) 15px 21px 36px 6px, #000000 5px 4px 20px 0px;

我想要的输出是:

[
{
color: {
value: 'rgb(165, 33, 33)'
},
x: {
value: 5,
unit: 'px'
},
y: {
value: 4,
unit: 'px'
},
blur: {
value: 20,
unit: 'px'
},
spread: {
value: 0,
unit: 'px'
},
placement: {
value: 'outset'
}
},
{
color: {
value: 'rgb(0, 80, 255, 0.3)'
},
x: {
value: 15,
unit: 'px'
},
y: {
value: 21,
unit: 'px'
},
blur: {
value: 36,
unit: 'px'
},
spread: {
value: 6,
unit: 'px'
},
placement: {
value: 'inset'
}
},
{
color: {
value: '#000000'
},
x: {
value: 5,
unit: 'px'
},
y: {
value: 4,
unit: 'px'
},
blur: {
value: 20,
unit: 'px'
},
spread: {
value: 6,
unit: 'px'
},
placement: {
value: 'outset'
}
}
]

我代码:

const getValueAndUnit = (val = '') => {
if (!specialValues.has(val.toLowerCase())) {
const propRegx = /^([+-]?(?:d+|d*.d+))([a-z]*|%)$/;
const matches = val.match(propRegx);
let value = 0;
let unit = 'px';
if (Array.isArray(matches)) [, value, unit] = matches;
return {
value: Number(value),
unit,
};
}
return { value: 'auto', unit: 'auto' };
}

const getBoxShadowArray = (boxshadow) => {
let shadow_arr = [];
boxshadow
.trim()
.split(',')
.forEach((v) => {
let styleObj = {};
let styleArray = v.trim().split(' ');
if (styleArray.length === 6) {
const [placementValue, colorValue, xValue, yValue, blurValue, spreadValue] = styleArray;
styleObj.placement = { value: placementValue };
styleObj.color = { value: colorValue };
styleObj.x = { ...getValueAndUnit(xValue) };
styleObj.y = { ...getValueAndUnit(yValue) };
styleObj.blur = { ...getValueAndUnit(blurValue) };
styleObj.spread = { ...getValueAndUnit(spreadValue) };
} else {
const [colorValue, xValue, yValue, blurValue, spreadValue] = styleArray;
styleObj.placement = { value: 'outset' };
styleObj.color = { value: colorValue };
styleObj.x = { ...getValueAndUnit(xValue) };
styleObj.y = { ...getValueAndUnit(yValue) };
styleObj.blur = { ...getValueAndUnit(blurValue) };
styleObj.spread = { ...getValueAndUnit(spreadValue) };
}
shadow_arr.push(styleObj);
});
return shadow_arr;
}

getBoxShadowArray('rgb(165, 33, 33) 5px 4px 20px 0px, inset rgb(0, 80, 255, 0.3) 15px 21px 36px 6px, #000000 5px 4px 20px 0px;');

Answer 1

正如@AKX在评论中所说，你不能仅仅通过使用正则表达式来可靠地做到这一点，因为CSS格式可以是多种格式。

然而，如果你仍然想尝试，你可以使用这个正则表达式，它不会在颜色中间分割:

/(?<!rgb(s*d+(?:,s*d+(?:.d+)?)*),/g

:

(?<!-阴性看后面

rgb(s*d+-字面值rgb(后面跟着0个或多个空格和1个或多个数字

(?:-非捕获组

,s*d+-逗号(,)后跟0个或多个空格和1个或多个数字

(?:.d+)?可选一个点(.)后面跟着一个或多个数字

)*0个或多个

)-结束组,- finally match逗号(,)

这至少可以在你给出的例子中工作，分成如下:

0   rgb(165, 33, 33) 5px 4px 20px 0px
1   inset rgb(0, 80, 255, 0.3) 15px 21px 36px 6px
2   #000000 5px 4px 20px 0px;