格式化css代码

浏览：598次- 评论：0次- 发布时间：2017-09-25

Html

Css


    html,body{
				margin: 0;
				width: 100%;
			  	height: 100%;
				background: linear-gradient(to bottom right, blue, green);
			}
			.module-content{
				padding-top: 100px;
				width: 80%;
				min-width: 750px;
				max-width: 1200px;
				margin:0 auto;
			}
			#cssCode,#newCssCode{
				width: 100%;
				height: 200px;
				padding: 10px;
				border-radius: 10px;
				font-size: 14px;
				resize: none;
				outline: none;
			}
			.btn{
				display: inline-block;
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin-right: 10px;
				margin-top: 20px;
				margin-bottom: 20px;
				cursor: pointer;
				border-radius: 5px;
				border: 1px solid #999;
				color: #fff;
				font-size: 14px;
				background: linear-gradient(to bottom right, lightblue, lightgreen);
				transition: all 1s;
			}
			.btn:hover{
				background: linear-gradient(to bottom right, lightgreen, lightyellow);
			}
    压缩代码
    格式(多行)
    格式(单行)
    还原代码

(() => {
    window.$ = function(id) {
        return document.getElementById(id);
    }
    window.code = function(obj) {
        return new CodeFormat(obj);
    }

function CodeFormat(obj) {
        let my = this;
        //初始化操作
        this.init = function() {
            let code = obj.value;

if (!this.code || this.code == "") this.code = code; //先保存起来  以方便后续还原
            code = code.replace(/(\n|\t|\s)*/ig, '$1');
            code = code.replace(/\n|\t|\s(\{|\}|\,|\:|\;)/ig, '$1');
            code = code.replace(/(\{|\}|\,|\:|\;)\s/ig, '$1');
            return code;
        }
        //压缩代码接口
        this.compress = function() {
            let code = this.init();
            return code;
        }
        //格式化多行代码接口
        this.format = function() {
            let code = this.init();

code = code.replace(/(\{)/ig, ' $1');
            code = code.replace(/(\{|\;)/ig, '$1\n\t');
            code = code.replace(/\t*(\})/ig, '$1\n');
            code = code.replace(/(\*\/)/ig, '$1\n');
            return code;
        }
        //格式化单行代码接口
        this.formatOver = function() {
            let code = this.init();
            code = code.replace(/(\})/ig, '$1\n');
            code = code.replace(/(\*\/)/ig, '$1\n');
            return code;
        }
        //还源代码接口
        this.recover = function() {
            return (this.code) ? this.code : obj.value;
        }

obj.onkeydown = function() {
            my.code = "";
        }
    }
})()

function formatBtn(param) {
    $('newCssCode').value = param === 0 ? code($('cssCode')).compress() :
        param === 1 ? code($('cssCode')).format() :
        param === 2 ? code($('cssCode')).formatOver() :
        param === 3 ? code($('cssCode')).recover() : '';
}
formatBtn(1);

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：通过正则表达式格式化css代码

formatBtn(param)直接调用这个函数，当参数param为0的时候是压缩代码，当参数param为1的时候是格式多行，当参数param为2的时候是格式化为单行，当参数param为3的时候是还原代码。

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取