站长实用工具css压缩与格式化html单页工具

可以本地使用(.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>