javascript - 在javascript中匹配css规则

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，而不仅仅是字符串“label-blue”。

但是，如果您尝试匹配:

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

然后您将需要一个不同的 RegExp 和整个 css 字符串。只需要说明您需要哪条路线？

更新

从 css 文本中还不清楚您希望匹配什么，这就是我准确概述的原因。但是，假设您想要匹配我提到的最后四项(并且假设您不希望匹配 label-blu-not-match)，那么以下内容应该会有所帮助:

http://jsfiddle.net/5d7JX/

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

然而，上面的内容并不能完全证明所有可能的 css 格式，也不能防止 css 规则集本身内的匹配。一般来说，扫描通常非常复杂的代码，仅使用正则表达式解析成逻辑内容是不受欢迎的；除非您要解决非常具体的用例。

更新2

是的，排除 ID 选择器只涉及删除 Reg Exp 的 # 部分...

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

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

http://www.regular-expressions.info/

更新3

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

How to escape regular expression in 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);

http://jsfiddle.net/5d7JX/1/