Question

我有一个JavaScript正则表达式，它可以在在线正则表达式测试器中正常工作但是使用正则表达式是不正常的：const classNameReg= new RegExp('\.?.+{[\S\s]+?}', 'g')

我将下面的所有文本作为单个字符串传递，并使用该正则表达式来拆分字符串以生成一个css类数组，如下所示，但我返回的是整个字符串作为数组中的一个元素我首先尝试了这个let arrOfClasses = css.split(classNameReg.constructor)然后喜欢这个let arrOfClasses = css.split(classNameReg)，然后我尝试了这个let arrOfClasses = css.split(/\.?.+{[\S\s]+?}/g)，它给了我一个只有类名称部分的数组.c-value-prop-box__icon {和一堆白色空间元素。我是两天前开始的RegEx新手，我做错了什么

.c-btn--vertical-center {
  align-self: center; }

.c-btn.c-btn--sm {
  min-width: 80px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 400; }

 a.c-btn.c-btn--sm {
    height: 24px; }

button.c-btn.c-btn--sm {
    min-height: 24px; }

.c-btn.c-btn--md {
  padding: 9px 32px;
  font-weight: 600; }

a.c-btn.c-btn--md {
    height: 32px; }

button.c-btn.c-btn--md {
    min-height: 32px; }

等。

Answer 1

你的正则表达式应该看起来更像下面的内容（尽管这可能也不完美）。

(\S+)\s*\{([^}]*)\}

在这个例子中，我转义了大括号，因为它们通常用于表示区间量词。我包括2个捕获组以获取元素名称，然后获取内容。通常更好的做法是不使用点，而是更具体。在示例中，\ S匹配任何不是空格的内容。 [^}]匹配任何不是结束花括号的东西，但如果CSS可以包含嵌套的花括号（我现在不知道），这是不够的。

学习正则表达式的好网站是rexegg.com。另外，regular-expressions.info非常有用。

JavaScript Regex没有抓住它应该发生的事情

1 个答案: