如何在Regex中使用变量？

Question

我有这条线在我的循环：

var regex1 = new RegExp('' + myClass + '[:*].*'); 
var rule1 = string.match(regex1) 

其中 “串” 是类选择的一个字符串，例如：.hb-border-top:before, .hb-border-left

和 “MyClass的” 是一类：.hb-border-top

由于我循环字符串，我需要匹配其中包含“myClass”的字符串，包括：before和：hover，但不包括hb-border-top2之类的内容。

我对这个正则表达式的想法是匹配hb-border-top然后:*匹配一个或多个冒号，然后匹配字符串的其余部分。

我需要匹配：

.hb-fill-top::before .hb-fill-top:hover::before .hb-fill-top .hb-fill-top:hover

但只以上的回报：

.hb-fill-top::before .hb-fill-top:hover::before .hb-fill-top:hover

，不返回.hb-fill-top本身。

因此，它必须匹配.hb-fill-top自身，然后什么，只要它与:

编辑将启动如下：下面

图片：我的字符串是{} selectorText的内容。 一个字符串可以是一个单独的类，也可以是一个带有伪元素的类，或者是一个只有少数句柄的规则，用逗号分隔。

包含.hb-fill-topONLY或.hb-fill-top: +某物（悬停，后等），必须选择每个字符串。类将会变成可变的“myClass”，因此我的问题是我不能太精确。

Answer 1

我明白你想要得到任何CSS选择器名称包含值内的任何地方，有无论是:和0+字符了到字符串的末尾或在那里结束。

然后，为了获得比赛的.hb-fill-top价值，你需要像

/\.hb-fill-top(?::.*)?$/ 

的解决方案和下面的JS代码，使这一切工作：

var key = ".hb-fill-top"; 
 
var rx = RegExp(key.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "(?::.*)?$"); 
 
var ss = ["something.hb-fill-top::before","something2.hb-fill-top:hover::before","something3.hb-fill-top",".hb-fill-top:hover",".hb-fill-top2:hover",".hb-fill-top-2:hover",".hb-fill-top-bg-br"]; 
 
var res = ss.filter(x => rx.test(x)); 
 
console.log(res);

注.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')代码是必要的逃脱.这是一个特殊的正则表达式元字符匹配任何字符，但换行符char。见Is there a RegExp.escape function in Javascript?。

^匹配字符串的开头。

(?::.*)?$将匹配：

• (?::.*)?$ - 任选的（由于最后?量词匹配1点或0的出现的量化子模式）序列（(?:...)?是non-capturing group）的
  • : - 冒号
  • .* - 除换行符字符以外的任何0+字符
• $ - 字符串的结尾。

Answer 2

var regex1 = new RegExp('\\' + myClass + '(?::[^\s]*)?'); 
var rule1 = string.match(regex1) 

此正则表达式选择我的课，如果它与:开始，当遇到一个空白字符停止后everething。

See the regex in action.

还要注意，我在开始时加入'\\'。这是为了逃避你的className中的点。否则，它会匹配其他东西一样

ahb-fill-top 
.some-other-hb-fill-top 

另外要小心.*可能匹配之后其他的东西（我不知道你的字符串的设置）。您可能希望在最后一组中使用:{1,2}[\w-()]+更加精确。所以：

var regex1 = new RegExp('\\' + myClass + '(?::{1,2}[\w-()]+)?'); 

Answer 3

var regex1 = new RegExp(`^\\${myClass}(:{1,2}\\w+)*$`)

var passes = [ 
 
    '.hb-fill-top::before', 
 
    '.hb-fill-top:hover::before', 
 
    '.hb-fill-top', 
 
    '.hb-fill-top:hover', 
 
    '.hb-fill-top::before', 
 
    '.hb-fill-top:hover::before', 
 
    '.hb-fill-top:hover' 
 
]; 
 

 
var fails = ['.hb-fill-top-bg-br']; 
 

 
var myClass = '.hb-fill-top'; 
 
var regex = new RegExp(`^\\${myClass}(:{1,2}\\w+)*$`); 
 

 
passes.forEach(p => console.log(regex.test(p))); 
 
console.log('---'); 
 
fails.forEach(f => console.log(regex.test(f)));