Question

我需要创建一个正则表达式来查找css文件中的类。

例如我有这个css文件：

#label-blu{

}

.label-blu, .test{

}

.label-blu-not-match{

}

.label-blu{

}

.label-blu span{

}

在这种情况下，我需要返回3场比赛

这是我的正则表达式：

var css = data;
var find_css = 'label-blu';
var found = css.match(/([#|\.]?)([\w|:|\s|\.]+)/gmi).length;
console.log('found: ' + found);

内部var数据中包含所有css字符串

我该如何解决？

由于

Answer 1

有两点：

("word-does-not-include-hyphen").replace(/\w+/g, 'test')

你确定你应该匹配css标签文本label-blu吗？而不是完整的CSS文本本身？目前，您正在查找label-blu ...

的连字符间隔

var css = 'label-blu';
var found = css.match(/([#|\.]?)([\w|:|\s|\.]+)/gmi);
/// which gives ['label','blu']

返回长度为2的原因是什么，而不是3。你不希望匹配css文本中的三个项目，即

#label-blu
.label-blu-not-match
.label-blu

如果是这样，你需要使用不同的文字来匹配整个css，而不仅仅是字符串＆＃39; label-blue＆＃39;。

但是如果你想匹配：

#label-blu
.label-blu, .test
.label-blu
.label-blu span

然后你需要一个不同的RegExp和整个css字符串。只需要澄清你需要哪条路线？

目前还不清楚css文本中你想要匹配的内容，这就是我之前完全概述的原因。但是，假设您想要匹配我提到的最后四个项目（假设您不希望匹配label-blu-not-match），那么以下内容应该有所帮助：

var found = csstext.match(/[#\.]label-blu([,:\s\.][^\{]*)?\{/gmi);

但是，上述内容并非针对所有可能的css格式的完全证明，也不能防止css规则集本身内的匹配。一般来说，通过代码扫描通常非常复杂，只使用正则表达式解析成逻辑的东西是不受欢迎的;除非你正在解决一个非常具体的用例。

是的，除了ID选择器之外，只需删除Reg Exp ...的#部分

var found = csstext.match(/\.label-blu([,:\s\.][^\{]*)?\{/gmi);

我建议您阅读正则表达式，这个网站是个好地方：

要将变量作为正则表达式的一部分包含在内，您需要确保转义字符以使字符串为字面值，因此任何特殊字符都不会干扰。据我所知，在JavaScript中没有内置函数来转义或引用正则表达式;但你可以在这里找到一个：

因此，如果您将其添加到您的代码中：

RegExp.quote = function(str) {
  return (str+'').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
};

然后您还需要将正则表达式转换为等效的对象：

var reg = new RegExp('\\.label-blu([,:\\s\\.][^\\{]*)?\\{', 'gmi');
var found = csstext.match(reg);

然后添加：

var label = 'label-blu';
var reg = new RegExp('\\.' + RegExp.quote(label) + '([,:\\s\\.][^\\{]*)?\\{', 'gmi');
var found = csstext.match(reg);

Answer 2

在您的示例中，如果您使用：

var findClass = /(\.label-blu)(?!-)+/g;
var found = css.match(findClass).length;

应该返回3 ...

也许更好的解决方案是：

var findClass = /(\.label-blu)[\s{,]+/g;
var found = css.match(findClass).length;

以涵盖你可能有别的东西而不是' - '添加到你想要的课程的可能性，它只会寻找一个后跟'''''''或''，'......的类。

如果您有任何问题，请告诉我