RegEx美化縮小的CSS

我想使用JavaScript美化CSS代碼。RegEx美化縮小的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）

來源

2012-11-21 Mohsen

爲什麼不使用預先構建的css縮小器？ http://stackoverflow.com/questions/787789/any-recommendations-for-a-css-minifier – tjameson

@tjameson他希望UN-minify，而不是縮小。 – ean5533

@tjameson他正在尋找一位美麗的人，而不是一個縮小者。 –

我認爲很難減少正則表達式的數量，因爲有時你只需要一個換行符，有時候你也需要一個選項卡。有時你需要寫回一個，有時甚至兩個字符。但這裏是使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-21 21:08:12

對我來說這是一個非常好的起點。我個人比較喜歡冒號後跟一個空格。另外，請考慮設置'background-image：url（'/ crazy {u; rl}'）會發生什麼情況;' - 我知道OP可能沒有要求一個堅實的算法:) – Raffaele

@Raffaele right，now we由於正則表達式不推薦用於語言分析，因此陷入了尷尬的境地;）。有了一些奇怪的lookaheads，這仍然是可能的，但可笑地混亂了正則表達式。 –

當然，這就是爲什麼如果我使用RegEx，我不會使用這種簡單的方法:)但是，正如我在之前的評論中所說的，我覺得CSS可以與RegEX匹配（並且您的聲明表明它是常規語言似乎確認這一點 - 但我沒有接受過CS培訓，因此無法判斷），當有人提出類似的XML或代碼問題時（*「你不能這樣做」*）不應該在這裏解僱：） – Raffaele

我不知道如果CSS是一種常規語言（我的猜測是肯定），但這應該與正則表達式無論如何。

不需要匹配最後一個屬性，不管它是否包含分號。第一場比賽結束所有大括號，像你這樣做，除了之前和之後每增加一個新行：

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

然後匹配所有分號除了那些來換行之前（這是由插入上述正則表達式），並添加一個新行和標籤使用\t每個字符之後：

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

不幸的是，這只是冰山一角。不要忘記尋找所有不同類型的選擇器，例如那些包含:或>的選擇器，如果您打算在這些選擇器之間添加空格。可能還有很多你需要考慮的其他東西。

來源

2012-11-21 20:52:56 sgroves

哎呀，修好了，謝謝。我不相信任何比這兩條規則更復雜的東西來處理CSS塊的結尾。 – sgroves

不，沒有，除非你想添加那些省略';' –

RegEx美化縮小的CSS

回答

相關問題