如何在Regex中使用变量？

Question

我的循环中有这一行：

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

其中＆＃34;字符串＆＃34;是一个类选择器的字符串，例如：.hb-border-top:before, .hb-border-left

和＆＃34; myClass＆＃34;是一个班级：.hb-border-top

当我遍历字符串时，我需要匹配具有＆＃34; myClass＆＃34;的字符串。在其中，包括：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}的内容。 字符串可以是单个类，也可以是具有伪元素的类，或者包含少量clases的规则，除以逗号。

必须选择包含.hb-fill-top 仅或.hb-fill-top: +某些内容（悬停，之后等）的每个字符串。班级将变为变量＆＃34; myClass＆＃34;因此，我的问题可能过于精确。

Answer 1

我知道你想获得包含任何内部值的任何CSS选择器名称，并且在字符串结尾处有EITHER :和0+字符，或者在那里完成。< / p>

然后，要获得.hb-fill-top值的匹配，您需要一个像

这样的解决方案

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

以及以下JS代码使其全部工作：

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

请注意，.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')代码是必要的，以转义.，它是一个特殊的正则表达式字符，匹配任何字符，但是换行符。请参阅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)

这个正则表达式选择我的类，如果它以:开头，则选择它，并在遇到空白字符时停止。

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+)*$`)

＆＃13;

＆＃13;

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)));

＆＃13;

＆＃13;

＆＃13;