原生js脚本格式化CSS代码的方法
墨初 Web前端 840阅读
为了加快前端web网页的加载速度,很多网站的站长都会将网站中的一些静态文件比如css样式代码进行压缩。但压缩后的代码不适合阅读与修改,为了方便阅读代码,需要将压缩后的代码进行格式化。下面的博文73so博客就和大家说一说利用js脚本来格式化css代码的方法。
js脚本格式化css样式代码
下面的js脚本代码可以将压缩化的CSS代码进行格式化,方便阅读与修改!
// https://www.73so.com var css = 'CSS样式代码'; //输入要格式化的CSS代码 css = css.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); css = css.replace(/;\s*;/g, ";"); css = css.replace(/\,[\s\.\#\d]*{/g, "{"); css = css.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2"); css = css.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2"); css = css.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2"); console.log(css); //输出格式化后的CSS代码
js脚本格式化css代码的工具
复制下面的代码并保存为html文件,就可以在线格式化CSS代码的方法。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS代码格式化工具-73so.com</title> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> </head> <body> <textarea id="css" style="width:500px;height: 200px;"></textarea> <button id="yasuo">格式化</button> <script> $('#yasuo').on('click',function(){ $('#css').val(format_css($('#css').val())); }); function format_css(s) { s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1"); s = s.replace(/;\s*;/g, ";"); s = s.replace(/\,[\s\.\#\d]*{/g, "{"); s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2"); s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2"); s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2"); return s; } </script> </body> </html>