gpt4 book ai didi

javascript - 正则表达式美化缩小的 CSS

转载 作者:行者123 更新时间:2023-11-29 10:20:22 27 4
gpt4 key购买 nike

我正在尝试使用 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)

最佳答案

我认为很难减少正则表达式的数量,因为有时您只需要一个换行符,有时您还需要一个制表符。有时您需要回写一个字符,有时需要回写两个字符。但这里有一个替换列表,使 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()

关于javascript - 正则表达式美化缩小的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13501565/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com