格式化css代码

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);
			}
    压缩代码
    格式(多行)
    格式(单行)
    还原代码

html,body {
	margin:0;
	width:100%;
	height:100%;
	background:linear-gradient(to bottom right,blue,green);
}
.module-content {
	padding-top:10px;
	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

立即下载

格式化css代码



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

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?花心境

相关代码

格式化css代码

最新