简单实现一个css代码格式化功能

ppylox
·3/8/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

介绍用JavaScript正则表达式实现CSS代码格式化与反格式化的方法。CSSencode通过链式replace去除换行、制表符和多余空格,压缩花括号与选择器间空白,输出紧凑代码;CSSdecode则反向处理,在花括号、分号、注释后插入换行与缩进,规范注释和属性布局,恢复可读格式。核心是多次正则替换控制空白与换行。

\n

如果 你想自己实现一个格式化css代码的小工具的话可以参考一下代码,使用方法:

\n\n\n\n

var str=`.evaluateContainer{padding:10px 20px;margin:20px}`

\n\n\n\n

CSSencode(str)

\n\n\n\n

function CSSencode(code)

\n\n\n\n

{

\n\n\n\n

 code = code.replace(/\\r\\n/ig,'');

\n\n\n\n

 code = code.replace(/(\\s){2,}/ig,'$1');

\n\n\n\n

 code = code.replace(/\\t/ig,'');

\n\n\n\n

 code = code.replace(/\\n\\}/ig,'\\}');

\n\n\n\n

 code = code.replace(/\\n\\{\\s*/ig,'\\{');

\n\n\n\n

 code = code.replace(/(\\S)\\s*\\}/ig,'$1\\}');

\n\n\n\n

 code = code.replace(/(\\S)\\s*\\{/ig,'$1\\{');

\n\n\n\n

 code = code.replace(/\\{\\s*(\\S)/ig,'\\{$1');

\n\n\n\n

 return code;

\n\n\n\n

}

\n\n\n\n

function CSSdecode(code)

\n\n\n\n

{

\n\n\n\n

 code = code.replace(/(\\s){2,}/ig,'$1');

\n\n\n\n

 code = code.replace(/(\\S)\\s*\\{/ig,'$1 {');

\n\n\n\n

 code = code.replace(/\\*\\/(.[^\\}\\{]*)}/ig,'\\*\\/\\n$1}');

\n\n\n\n

 code = code.replace(/\\/\\*/ig,'\\n\\/\\*');

\n\n\n\n

 code = code.replace(/;\\s*(\\S)/ig,';\\n\\t$1');

\n\n\n\n

 code = code.replace(/\\}\\s*(\\S)/ig,'\\}\\n$1');

\n\n\n\n

 code = code.replace(/\\n\\s*\\}/ig,'\\n\\}');

\n\n\n\n

 code = code.replace(/\\{\\s*(\\S)/ig,'\\{\\n\\t$1');

\n\n\n\n

 code = code.replace(/(\\S)\\s*\\*\\//ig,'$1\\*\\/');

\n\n\n\n

 code = code.replace(/\\*\\/\\s*([^\\}\\{]\\S)/ig,'\\*\\/\\n\\t$1');

\n\n\n\n

 code = code.replace(/(\\S)\\}/ig,'$1\\n\\}');

\n\n\n\n

 code = code.replace(/(\\n){2,}/ig,'\\n');

\n\n\n\n

 code = code.replace(/:/ig,':');

\n\n\n\n

 code = code.replace(/  /ig,' ');

\n\n\n\n

 return code;

\n\n\n\n

}

\n

相关文章

评论 (0)

暂无评论,来写第一条吧