javascript - JS 正则表达式替换 SCSS 中关闭花括号和打开类/id 之间的空行

Question

我正在尝试创建一个正则表达式来替换 SCSS 规则集之间的空行。正则表达式应从右大括号匹配到类 (.) 或 ID (#)，并删除任何行。任何未放置在这些标识符之间的空行都不应受到影响，包括中间是否也有评论之类的内容。

我已经设置了一个可用于测试以下示例的 fiddle : https://jsfiddle.net/9y33cvtg/2/

示例:

之前

// START

.test1 {
    background: #FFFFFF;

    .test2 {
        background: #FFFFFF;

        .test3 {
            background: #FFFFFF;
        }
    }
}

.test5 {
    background: #FFFFFF;
}

.test6 {
    background: #FFFFFF;
}

// Comment

.test7 {
    background: #FFFFFF;
}

---

之后:

// 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 文件应该使用专门的库来完成。

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

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

参见 regex demo .

详情

• ^ - 一行的开始(由于 m 修饰符)
• - 一个
• $ - 行尾
• \s+ - 1 个或多个空格
• ^ - 一行的开始
• \. - 一个点(注意:如果你想确保它后面跟着一些字符字符，你可以使用 \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>