站长实用工具css压缩与格式化html单页工具
可以本地使用(.html格式)，不依赖服务器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS压缩工具</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,sans-serif;}
body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f4f4f9;}
.container{width:90%;min-width:600px;text-align:center;}
h1{margin-bottom:20px;color:#333;}
textarea{width:100%;height:228px;margin:10px 0;padding:10px;font-size:14px;line-height:1.4;resize:vertical;border:1px solid #ccc;border-radius:5px;}
button{padding:10px 20px;font-size:16px;cursor:pointer;background-color:#4CAF50;color:#fff;border:none;border-radius:5px;transition:background-color 0.3s ease;}
button:hover{background-color:#45a049;}
</style>
</head>
<body>
<div class="container">
<h1>CSS 压缩工具</h1>
<textarea id="input-css" placeholder="待处理的CSS代码"></textarea>
<button id="compress-button">压缩CSS</button>
<button id="format-button">格式化CSS</button>
<textarea id="output-css" placeholder="处理(压缩/格式化)后的代码" readonly></textarea>
</div>
<script>
document.getElementById('compress-button').addEventListener('click', function() {
const inputCss = document.getElementById('input-css').value;
let compressedCss = inputCss
// 移除注释
.replace(/\/\*[\s\S]*?\*\//g, '')
// 移除多余空白和换行
.replace(/\s*{\s*/g, '{')
.replace(/\s*}\s*/g, '}\n')
.replace(/\s*;\s*/g, ';')
.replace(/\s*:\s*/g, ':')
.replace(/\s*,\s*/g, ',')
.replace(/\s+/g, ' ')
// 将每个选择器块独立一行
.replace(/}(?!\s*$)/g, '}\n');
document.getElementById('output-css').value = compressedCss;
});
document.getElementById('format-button').addEventListener('click', function() {
const inputCss = document.getElementById('input-css').value;
let formattedCss = inputCss
// 移除多余的空格符号
.replace(/\s*{\s*/g, ' {\n\t') // {后加换行和缩进
.replace(/;\s*/g, ';\n\t') // 每个属性后换行并缩进
.replace(/\s*}\s*/g, '\n}\n') // }后加换行
// 清除多余的缩进和换行符
.replace(/\n\t\n/g, '\n')
.replace(/\t}/g, '}'); // 去掉多余的缩进符号
document.getElementById('output-css').value = formattedCss;
});
</script>
</body>
</html>
原文地址：https://blog.csdn.net/YUJIANYUE/article/details/143770361
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！