如何在CSS代码的大括号内精确匹配无前后缀的颜色名？

原正则\b(red|black)\b会误匹配.red这类选择器里的颜色名，核心问题是单词边界\b会把.、#这类符号和字母的分界视为有效边界，导致选择器里的颜色名被错误识别。

要匹配大括号内无任何前缀（如.#~-）和后缀的精确颜色名，可使用带负向环视的正则：

const regex = /(?<![\w.#~-])(red|black)(?![\w.#~-])/g;

正则规则解释 #

• (?<![\w.#~-])：负向后行断言，确保颜色名前面没有单词字符（字母、数字、下划线）或CSS选择器常见符号（.、#、~、-）
• (red|black)：目标匹配的颜色名列表，可根据需求扩展（比如加入blue、green等）
• (?![\w.#~-])：负向前瞻断言，确保颜色名后面没有上述字符

JS示例代码 #

如果已经提取了CSS大括号内的内容（推荐先提取再匹配，避免误触选择器部分）：

// 示例：CSS大括号内的内容片段
const cssInnerContent = `
  color: red;
  background: black;
  .red-text { color: #fff; } /* 这里的.red不会被匹配 */
  border-color: red;
`;

const regex = /(?<![\w.#~-])(red|black)(?![\w.#~-])/g;
const matches = cssInnerContent.match(regex);
console.log(matches); // 输出: ["red", "black", "red"]

处理完整CSS文本的拓展方案 #

如果需要直接处理完整CSS代码，建议先提取所有大括号内的内容再匹配，避免干扰选择器部分：

const fullCss = `
  .red { color: red; }
  #black-box { background: black; }
`;

// 提取所有{}内的内容（简单处理，不考虑嵌套大括号场景）
const braceContents = fullCss.match(/\{([^}]+)\}/g)?.map(str => str.slice(1, -1)) || [];

// 在每个大括号内容里匹配目标颜色名
braceContents.forEach(content => {
  const matches = content.match(/(?<![\w.#~-])(red|black)(?![\w.#~-])/g);
  if (matches) console.log(matches);
});

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