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")

これは機能していますが、改善したいです

  • 各プロパティの前にタブを追加するにはどうすればよいですか？
  • すべての置換呼び出しを1つの正規表現に集約することは可能ですか？
  • セミコロンを持たない最後のプロパティを検出することは可能ですか？（これは有効なCSSです）
4

2 に答える 2

3

改行だけが必要な場合もあれば、タブも必要な場合もあるため、正規表現の数を減らすのは難しいと思います。1文字、場合によっては2文字を書き戻す必要がある場合があります。しかし、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")

残念ながら、これは氷山の一角にすぎません。それらの周りにスペースを追加する場合は、:またはを含むセレクターなど、さまざまなタイプのセレクターをすべて探すことを忘れないでください。>おそらく、他にも考慮する必要のあることがたくさんあります。

于 2012-11-21T20:52:56.620 に答える