实施例

Question

我正在尝试创建一个正则表达式来替换SCSS规则集之间的空行。正则表达式应该从一个结束的大括号到一个类（。）或id（＃）匹配并删除任何行。任何未置于这些识别者之间的空行不应受到影响，包括中间还有类似评论的内容。

我设置了一个小提琴，可以用来测试下面的例子： https://jsfiddle.net/9y33cvtg/2/

实施例

BEFORE

// START

.test1 {
    background: #FFFFFF;

    .test2 {
        background: #FFFFFF;

        .test3 {
            background: #FFFFFF;
        }
    }
}

.test5 {
    background: #FFFFFF;
}

.test6 {
    background: #FFFFFF;
}

// Comment

.test7 {
    background: #FFFFFF;
}

AFTER：

// START

.test1 {
    background: #FFFFFF;

    .test2 {
        background: #FFFFFF;

        .test3 {
            background: #FFFFFF;
        }
    }
}
.test5 {
    background: #FFFFFF;
}
.test6 {
    background: #FFFFFF;
}

// Comment

.test7 {
    background: #FFFFFF;
}

到目前为止，我尝试使用以下内容，但它没有奏效：

str.replace(/\}(.*?)\./g, '')

Answer 1

解析CSS文件应该使用专用库来完成。

以下解决方案仅执行以下操作：它将检测等于}的行，后跟一个或多个空格字符，直到以点开头的行。使用它需要您自担风险。

.replace(/^}$\s+^\.\b/gm, '}\n.')

请参阅regex demo。

<强>详情

^ - 一行开始（由于m修饰符）
} - }
$ - 行尾
\s+ - 一个或多个空格
^ - 开始行
\. - 一个点（注意：如果你想确保它后跟一些单词char，你可以使用\b甚至\w）

以下是JS演示：

var str = document.querySelector('.string').innerText;
var output = document.querySelector('.output');

output.innerText = str.replace(/^}$\s+^\.\b/gm, '}\n.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<strong>Input:</strong>
<pre class="string">
// START

.test1 {
	background: #FFFFFF;

	.test2 {
		background: #FFFFFF;

		.test3 {
			background: #FFFFFF;
		}
	}
}

.test5 {
	background: #FFFFFF;
}

.test6 {
	background: #FFFFFF;
}

// Comment

.test7 {
	background: #FFFFFF;
}
</pre>

<br>
<strong>Output:</strong>
<pre class="output">
</pre>

Answer 2

你好，你需要像这样抓住换行符：

output.innerText = str.replace(/^}[\r\n]{2,}(?!\/\/)/gm, '}\n');

它似乎有用，告诉我它是否能解决你的问题

JS正则表达式在关闭大括号和打开class / id之间替换SCSS中的空行

实施例

2 个答案: