正则表达式匹配以bg-或text-开头且以0结尾的HTML类名

正确的正则表达式 #

要匹配HTML中class属性里仅以bg-或text-开头、以0结尾的类名，可以使用以下正则：

\b(bg-|text-)\S*0\b

正则说明 #

• \b：单词边界，确保匹配的是完整的类名，避免匹配到长字符串中的子串
• (bg-|text-)：指定必须以bg-或text-开头
• \S*：匹配任意数量的非空格字符，覆盖类名中可能包含的字母、数字、连字符、斜杠等合法字符
• 0：指定必须以数字0结尾

为什么之前的正则失效 #

• \b(bg-\w*)\b/\b(text-\w*)\b：
  1. \w仅匹配字母、数字和下划线，无法覆盖类名中可能出现的连字符、斜杠等字符
  2. 没有限制结尾必须是0，会匹配所有以bg-/text-开头的类名
• /(bg.*00)/g：
  1. .*是贪婪匹配，会跨类名匹配多余内容，比如从第一个bg-开始匹配到后面的00，包含中间的其他类名
  2. 仅针对bg-前缀，未覆盖text-
  3. 要求结尾是两个0，不符合“以0结尾”的需求

测试示例 #

针对你提供的HTML代码，如果补充符合条件的类名：

<div class="text-slate-500 text-white text-5xl bg-white bg-slate-600 bg-red/5 text-blue-50 bg-gray-10 ....."> </div>

正则会匹配到text-blue-50和bg-gray-10两个类名。

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