4

我正在尝试使用 JavaScript 美化 CSS 代码。

缩小的 CSS 代码如下所示：

str = 'body{margin:0;padding:0;}section,article,.class{font-size:2em;}'

到目前为止，我可以通过使用多个替换来美化代码：

str.replace(/{/g, " {\n")
    .replace(/}/g, "}\n")
    .replace(/;/g,";\n")
    .replace(/,/g, ",\n")

这很有效，但我想改进它

  • 如何在每个属性之前添加一个选项卡？
  • 是否可以在一个 RegEx 中汇总所有替换调用？
  • 是否可以检测到最后没有分号的属性？（这是有效的 CSS）
4

2 回答 2

3

我认为减少正则表达式的数量很难，因为有时您只需要换行符，有时您也需要一个制表符。有时您需要写回一个字符，有时是两个字符。但这里有一个使 CSS 看起来相当不错的替换列表：

str.replace(/\{/g, " {\n\t")        // Line-break and tab after opening {
   .replace(/;([^}])/g, ";\n\t$1")  // Line-break and tab after every ; except
                                    // for the last one
   .replace(/;\}/g, ";\n}\n\n")     // Line-break only after the last ; then two
                                    // line-breaks after the }
   .replace(/([^\n])\}/g, "$1;\n}") // Line-break before and two after } that
                                    // have not been affected yet
   .replace(/,/g, ",\n")            // line break after comma
   .trim()                          // remove leading and trailing whitespace

使这个：

 str = 'body{margin:0;padding:0}section,article,.class{font-size:2em;}'

看起来像这样：

body {
    margin:0;
    padding:0;
}

section,
article,
.class {
    font-size:2em;
}

如果您不关心那些省略的分号被放回原处，您可以通过更改顺序来缩短它：

str.replace(/\{/g, " {\n\t")
   .replace(/\}/g, "\n}\n\n")    // 1 \n before and 2 \n after each }
   .replace(/;(?!\n)/g, ";\n\t") // \n\t after each ; that was not affected
   .replace(/,/g, ",\n")
   .trim()
于 2012-11-21T21:08:12.433 回答
1

我不知道 CSS 是否是一种常规语言（我的猜测是肯定的），但无论如何，这应该可以使用正则表达式。

不需要匹配最后一个属性，无论它是否包含分号。首先匹配所有右花括号，就像你所做的那样，除了在每个之前和之后添加一个换行符：

.replace(/}/g, "\n}\n")

然后匹配除换行符之前的所有分号（由上面的正则表达式插入）并使用每个后的字符添加换行符和制表\t符：

.replace(/;([^\n])/g, ";\n\t$1")

不幸的是，这只是冰山一角。不要忘记查找所有不同类型的选择器，例如包含:or的选择器>，如果您打算在它们周围添加空格。你可能还需要考虑很多其他的东西。

于 2012-11-21T20:52:56.620 回答