hi,欢迎访问本站!
当前位置: 首页Web前端正文

原生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>
声明:无特别说明,转载请标明本文来源!
相关推荐