js 正则表达式来测试/查找无效的 css 类名（以数字开头）

Question

我正在尝试找到一种解决方案来获取无效的 css 类名。我有：

if (/[^A-Za-z0-9_-]+/.test(classname)) {}

它工作正常，只是当名称以数字开头时它不是“真”，这在 css 类中是不允许的。所以我尝试了很多东西，比如：

/[0-9]+[^A-Za-z0-9_-]+/

它不起作用……有什么想法吗？谢谢！

Answer 1

如果基本假设是有效的类名仅包含字母、数字、连字符或下划线但不能以数字开头，那么您可以使用这样的正则表达式作为有效名称：

/^[a-z_-][a-z\d_-]*$/i

也就是说，字符串开头的任何字母或下划线或连字符，后跟零个或多个任何字母、数字、下划线或连字符，直到字符串末尾。

其中，如果您想测试无效，您可以使用：

if (!/^[a-z_-][a-z\d_-]*$/i.test(classname)) {
   // invalid, do something
}

但是，尽管我相信它实现了您所描述的内容，但我认为类名不应该以连字符开头，后跟数字。所以也许：

if (!/^([a-z_]|-[a-z_-])[a-z\d_-]*$/i.test(classname)) {
   // invalid, do something
}

请注意，通过i标志使正则表达式不区分大小写然后使用a-zA-Z.