我的循环中有这一行:
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”中,因此我的问题是我不能太精确。
最佳答案
我知道您想获取任何 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+ 个字符
$
- 字符串结尾。
关于javascript - 如何在正则表达式中使用变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45496075/