Question

我需要检查用户的输入是否是有效的CSS语法（输入字符串基本上是一个CSS文件）。它可以包含类，选择器，!important等。

我没有开始研究它，因为我希望已经有一些正则表达式语法，所以我不必从头开始。

我尝试使用谷歌搜索，但我发现的是部分css匹配字符串，而不是验证所有可能的CSS的正则表达式。

Answer 1

好的，所以我想出了一个匹配有效css样式的正则表达式。

([#.@]?[\w.:> ]+)[\s]{[\r\n]?([A-Za-z\- \r\n\t]+[:][\s]*[\w .\/()\-!]+;[\r\n]*(?:[A-Za-z\- \r\n\t]+[:][\s]*[\w .\/()\-!]+;[\r\n]*(?2)*)*)}

这里的工作示例：

http://regex101.com/r/fK9mY3

请记住..在检查上面的示例链接后，您会看到此正则表达式适用于常见的基本CSS2样式，但是，要匹配与http://www.w3.org/TR/css3-syntax/#detailed-grammar相关的所有CSS3样式变体，此正则表达式需要进行一些调整......上面的正则表达式是一个起点但是..

Answer 2

增加了布莱恩的答案。并添加笔记

javascript支持：there was an error with the (?2)
多个类：.class, .class2 {...}
类分度计：.class-name, .class_name
空类：.class {}
百分比：width: 100%;
引用网址：background: url("/img.jpg");

const multi = /((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/()\-!%]+;?)*)*\s*}(?:\s*))/mi

const example = `
div.css-class-10_9::hover, .active {
  width: 100%;
  background: rgba(1.0,0,1,1); 
  background-url: url("http://img.jpg");   
}

div.css-class-10_9::hover,
.active {
  width: 100%;
  background: rgba(1.0,0,1,1);
  background-url: url("http://img.jpg");
}

html {
  background: white;
}
`

let out = example.replace(multi, '')
// "
// div.css-class-... {...}
// html {...}
// "

out = out.replace(multi, '')
// "html {...}"

out = out.replace(multi, '')
// ""

您还可以添加全局以一次全部替换

const global_re = /((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/()\-!%]+;?)*)*\s*}(?:\s*))/gmi


example.replace(global_re, '');
// ""


example.replace(global_re,'$1') // group 1 all css
//
// div.css-class-...{
//   width...
//   rest_css...
// }
//
// ...
//
// html {
//   ...
// }

类名

example.replace(global_re,'$2\n\n') // group 1 all class names
// "
// div.css-class-10_9::hover, .active 
// 
// div.css-class-10_9::hover,
// .active 
// 
// html  
// "

班级主体（代替班级主体）

example.replace(global_re,'$3\n')
// "
// width: 100%;
// background: rgba(1.0,0,1,1); 
// background-url: url("http://img.jpg");   
// 
// 
// width: 100%;
// background: rgba(1.0,0,1,1);
// background-url: url("http://img.jpg");
// 
// 
// background: white;
// 
// "

https://regex101.com/r/fK9mY3/55

（免责声明：这肯定不会验证CSS）

ex：“ ............ a {}”成真

使用Regex检查字符串是否有效

2 个答案: