需要帮助使用regex从网格模板列css字符串中查找每一行/列css属性

Question

我正在构建一个应用程序，其中需要一个行和列CSS解析器。因此，我需要使用regex提取CSS数据并返回一个数组。

Css字符串为：1fr minmax(75px, auto) fit-content(40%) repeat(3, 200px) 200px repeat(auto-fill, 100px) 300px repeat(auto-fill, minmax(75px, auto))

阵列输出需要：["1fr", "minmax(75px, auto)", "fit-content(40%)", "repeat(3, 200px)", "200px", "repeat(auto-fill, 100px)", "300px", "repeat(auto-fill, minmax(75px, auto))"]

我试过了：

const getTotalColumnOrRowArray = (css_string) => {
// abc123 ||OR|| abc-abc(abc123, abc123) ||OR|| abc
let arr = css_string.match(/d+[a-zA-ZS]+|([a-zA-Z-S]+([a-zA-Z-dS]+, [a-zA-Z-dS]+))|[a-zA-ZS]+/g);
return arr;
};

但是它不能返回"repeat(auto-fill, minmax(75px, auto))"这个值。

Answer 1

如果总是有一个没有括号的零件首先匹配，然后是一个带括号的可选零件，而这个零件本身只能有一层嵌套：

[^s()]+(?:([^s()]+(?:([^()]+))?(?:, *[^s()]+(?:([^()]+))?)*))?

部件内

• [^s()]+匹配1+倍除()或空白字符之外的任何字符
• (?:非捕获组
  • (匹配(
  • [^s()]+匹配除()或空白字符之外的任何字符1+次
  • (?:非捕获组
    • ([^()]+)匹配(1+乘以除()之外的任何字符或空白字符并匹配)
  • )?关闭组并将其设为可选
  • (?:非捕获组
    • , *[^s()]+匹配逗号、可选空格和除()或空白字符之外的任何字符的1倍以上
    • (?:([^()]+))?像以前一样用括号匹配可选部分
  • )*关闭组并可选择重复
  • )匹配)
• )?关闭组并将其设为可选

Regex演示

const s = "1fr minmax(75px, auto) fit-content(40%) repeat(3, 200px) 200px repeat(auto-fill, 100px) 300px repeat(auto-fill, minmax(75px, auto))";
const regex = /[^s()]+(?:([^s()]+(?:([^()]+))?(?:, *[^s()]+(?:([^()]+))?)*))?/g;
let result = Array.from(s.matchAll(regex), m => m[0])
console.log(result);