Javascript 正则表达式美化小型CSS

我试图用JavaScript美化CSS代码

缩小的CSS代码如下所示：

body {
    margin:0;
    padding:0;
}

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

str='body{margin:0；padding:0；}节，文章，.class{font-size:2em；}'

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

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

这是工作，但我想改善它

• 如何在每个属性前添加选项卡
• 是否可以在一个正则表达式中聚合所有替换调用
• 是否可以检测最后一个没有分号的属性？（这是有效的CSS）

---

我不知道CSS是否是一种常规语言（我的猜测是肯定的），但无论如何，这在正则表达式中都是可行的

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

.replace（/}/g，“\n}\n”）

然后匹配所有分号，除了在换行符之前的分号（由上面的正则表达式插入），并在每个分号之后使用

\t

字符添加一个换行符和选项卡：

.replace（/；（[^\n]）/g，“；\n\t$1”）

---

---

不幸的是，这只是冰山一角。如果您计划在选择器周围添加空格，请不要忘记查找所有不同类型的选择器，例如包含

：

或

的选择器。可能还有很多其他的事情需要考虑。

< P>我认为很难减少正则表达式的数量，因为有时你只需要一个断线，有时你也需要一个标签。有时你需要回写一个字符，有时需要回写两个字符。但下面是一个替换列表，它使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()

---

为什么不使用一个预先构建的css缩微器呢@tjameson他想取消缩小，而不是缩小。@tjameson他在找一个美化者，而不是缩小者。网上有很多美化者的脚本。最有可能的是，其中一些还使用JavaScript。除非您接受/接受它的局限性（它无法管理CSS语言的整个语法和语法），否则仅使用正则表达式对这类任务是有限制的。@MihaiStancu您在解析编程语言时所说的是正确的。我不确定它是否也适用于CSS-如果擅长CS的人能够证明itoops，那将很有趣，修复了，谢谢。我不认为需要比这两条规则更复杂的东西来处理css块的结尾。对我来说，这是一个很好的起点。我个人更喜欢冒号后面跟一个空格。此外，考虑设置<代码>背景图像时发生的事情：URL（'/Field{u；RL}'）；<代码>-我知道也许OP没有要求一个坚如磐石的算法：）@Raffaele没错，现在我们进入了一个尴尬的领域，因为正则表达式不推荐用于语言解析；）。有了一些奇怪的外观头，这仍然是可能的，但会让正则表达式混乱得可笑。当然，这就是为什么如果我使用正则表达式，我不会使用这种简单的方法：）然而，正如我在前面的评论中所说的，我觉得CSS可以与正则表达式匹配（你说这是一种常规语言似乎证实了这一点——但我没有接受过CS培训，所以说不出来）当有人问XML或代码类似问题时，通常的回答（“你做不到”）不应该在这里被解雇：）