javascript - 如何在正则表达式中使用变量？

Question

我的循环中有这一行:

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

其中“string”是类选择器的字符串，例如:.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-top 的字符串仅 或.hb-fill-top: + 必须选择某些东西(悬停、之后等)。类将在变量“myClass”中，因此我的问题是我不能太精确。

Answer 1

我知道您想获取任何 CSS 选择器名称，该名称​​包含内部任何位置的值，并且具有 EITHER : 和 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, '\\$&') 代码是必需的转义 . 这是一个特殊的正则表达式元字符，它匹配除换行符以外的任何字符。参见 Is there a RegExp.escape function in Javascript? .

^ 匹配字符串的开头。

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

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