站长实用工具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>
相关推荐
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird5 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者6 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强6 小时前
Chrome和IE获取本机ip地址
前端
天***88966 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*6 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v7 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵7 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构