CSS 类选择器
匹配CSS 类选择器。两端都锚住了,整个字符串合上才算通过。没有捕获组。
表达式
/^\.-?[_a-z][_a-z0-9-]*$/- 匹配范围
- 整个字符串
- 捕获组
- 0
- 在第一个例子里抓到的部分
- .btn
自己试一试
随便输入一段文字,这个式子抓到的部分就会高亮出来。全部在你的浏览器里运行,不会发往任何地方。
.btn
匹配到 1 处
匹配的例子
- .btn
- .-my-class
不匹配的例子
- btn
- .1st
同一类的其他式子
^.+\.(?:jpe?g|png|gif|webp|avif|svg)$图片文件的扩展名^/(?:[^/\0]+/)*[^/\0]*$Unix 风格的路径^[A-Za-z]:\\(?:[^\\/:*?"<>|]+\\)*[^\\/:*?"<>|]*$Windows 路径^</?[a-z][a-z0-9]*(?:\s[^<>]*)?/?>$单个 HTML 标签^M{0,3}(?:CM|CD|D?C{0,3})(?:XC|XL|L?X{0,3})(?:IX|IV|V?I{0,3})$罗马数字^-?(?:90(?:\.0+)?|[1-8]?\d(?:\.\d+)?)$纬度值^-?(?:180(?:\.0+)?|1[0-7]\d(?:\.\d+)?|\d{1,2}(?:\.\d+)?)$经度值^(?:0|[1-9]\d*)$开头不带 0 的数怎么看这一页
- 两端加上 ^ 和 $,整个字符串就必须合上;不加,匹配落在文中任何位置都行。用来做输入校验的式子,一定要加锚。
- 圆括号 ( ) 会把括住的部分捕获下来。只是想分组的话写成 (?: ),后面各组的编号才不会往后挪。
- 这里的每个式子都拿它自己的例子跑过。不过「长得像电子邮件」和「真有这个信箱」始终是两回事。
- 开放式重复层层嵌套(比如 (a+)+)时,遇到某些输入耗时会爆炸式增长。把别人的式子粘进代码前,先找找有没有这种形状。
常见问题
Q. 匹配CSS 类选择器的正则表达式是什么?
^\.-?[_a-z][_a-z0-9-]*$。
Q. 哪些字符串能匹配?
像 .btn 这样的文字能匹配,像 btn 这样的不能。
Q. 必须整个字符串都匹配吗?
是的。它被 ^ 和 $ 括住,只有整串合上才算通过。
Q. 抓到的内容怎么用?
没有捕获组,所以只会返回整段匹配(match[0])。只需要其中一部分的话,把那一段用圆括号括起来。