js正则匹配class和css

如果你想要同时匹配类名和对应的 CSS 样式，可以使用正则表达式来处理。

下面是一个示例，展示如何使用正则表达式匹配类名和对应的 CSS 样式：

const input = `
  .class1 {
    color: red;
    font-size: 12px;
  }
  .class2 {
    background-color: blue;
    font-weight: bold;
  }
  .class3 {
    font-family: Arial, sans-serif;
    font-size: 14px;
  }
`;

const regex = /\.([a-zA-Z0-9_-]+)\s*{([^}]+)}/g;
let match;
const classAndStyles = {};

while ((match = regex.exec(input)) !== null) {
  const className = match[1];
  const cssRules = match[2];
  classAndStyles[className] = cssRules;
}

console.log(classAndStyles);

这个示例中，我们定义了一个包含类名和对应 CSS 样式的字符串 `input`。

然后，我们使用正则表达式 `\.([a-zA-Z0-9_-]+)\s*{([^}]+)}` 进行匹配。其中 `\.` 表示匹配 `.` 字符，`([a-zA-Z0-9_-]+)` 表示匹配一个或多个字母、数字、下划线和破折号，并将其捕获为类名，`\s*` 表示匹配零个或多个空格，`{([^}]+)}` 表示匹配一对大括号内的内容，并将其捕获为 CSS 样式。

接下来，我们使用 `while` 循环和 `regex.exec(input)` 来执行匹配操作，并将每个匹配结果存储在 `match` 变量中。

在循环中，我们从每次匹配结果中提取类名和对应的 CSS 样式，并将它们存储在 `classAndStyles` 对象中，其中类名作为键，CSS 样式作为值。

最后，我们输出 `classAndStyles` 对象，它包含了所有匹配的类名和对应的 CSS 样式。

请注意，上述示例中使用了循环和正则表达式的 `exec()` 方法来实现全局匹配。你可以根据自己的需求进行调整和扩展。