使用正则表达式提取 CSS 属性并生成对象

本文将介绍如何使用正则表达式提取 CSS 代码块中的属性，并将其转换为 JavaScript 对象。

示例代码:

const str = '.red-bg {
  background-color: rgba(255, 0, 0, 0.5);
  font-size: 15px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000;
}';
const regex = /{([^}]+)}/; // 定义正则表达式匹配{}内容
const match = regex.exec(str);
const cssProps = match[1].trim().split(';').reduce((acc, prop) => {
  if (prop) {
    const [key, value] = prop.split(':').map(str => str.trim());
    acc[key] = value;
  }
  return acc;
}, {});
console.log(cssProps); // {background-color: 'rgba(255, 0, 0, 0.5)', font-size: '15px', font-weight: 'bold', text-shadow: '1px 1px 1px #000'}

代码解析:

定义正则表达式: /{([^}]+)}/ 匹配 { 和 } 之间的内容，并将其捕获到组 1 中。
执行正则表达式: regex.exec(str) 将正则表达式应用于 CSS 代码字符串，并返回匹配结果。
提取属性: match[1].trim().split(';') 提取组 1 中的属性列表，并将其按 ; 分割成数组。
生成对象: reduce() 方法迭代属性数组，将每个属性以 : 分割成键值对，并将其添加到 cssProps 对象中。
输出对象: console.log(cssProps) 输出生成的 JavaScript 对象。

总结:

使用正则表达式和 reduce() 方法可以方便地提取 CSS 属性并生成 JavaScript 对象。这在处理 CSS 代码时非常有用，可以方便地获取和操作 CSS 属性。