零点博客复盘：用 C# 实现高精度 CSS 在线格式化工具，含正则与防注入实战

大家好，我是零点博客的博主。今天不整虚的，直接复盘一个最近开发的CSS在线格式化工具的后端逻辑。很多小伙伴在开发前端页面，或者在做EMLOG主题美化时，经常会遇到代码压缩在一起、格式乱七八糟的问题。如果直接手写正则去处理，稍微大点的文件就崩了。

这篇文章将把后端的C#开发流程、MySQL存储、接口交互，以及最关键的CSS解析和SQL注入防护串联起来。虽然是实战案例，但细节里全是干货。

一、为什么选择 C# 做这个工具？

其实用 PHP 也能做，但为了练习C#后端的正则表达式和字符串处理能力，我选了 .NET Core。我们的目标很简单：用户输入一坨乱糟糟的 CSS 代码，后端解析后，按照标准规范（如增加缩进、排序属性）重新输出。

二、底层逻辑拆解：核心是正则

格式化 CSS 的核心难点在于，它不是一个简单的文本替换。我们需要把选择器和大括号里的内容剥离开。

在 C# 中，我们可以利用 `Regex` 把所有规则块提取出来。比如从 "div{color:red}" 中匹配出 "div" 和 "{color:red}"。

public string FormatCss(string rawCss)
{
    // 正则匹配：寻找选择器和大括号内的内容
    // 匹配逻辑：(选择器) { 内容 }
    var pattern = @"([^{]+){([^}]*)}";
    var matches = Regex.Matches(rawCss, pattern);

    var sb = new StringBuilder();

    foreach (Match match in matches)
    {
        var selector = match.Groups[1].Value.Trim();
        var properties = match.Groups[2].Value;

        // 进一步解析大括号内的属性：color:red; font-size:12px;
        // 这里也是正则大展身手的地方
        var propPattern = @"([a-z-]+):([^;]+);";
        var propMatches = Regex.Matches(properties, propPattern);

        var props = new List<string>();
        foreach (Match prop in propMatches)
        {
            var key = prop.Groups[1].Value.Trim();
            var value = prop.Groups[2].Value.Trim();
            // 对属性进行排序，确保美观（可选）
            props.Add($"{key}: {value};");
        }

        // 重新组装
        sb.AppendLine($"{selector} {{ ");
        foreach (var p in props)
        {
            sb.AppendLine($"  {p}");
        }
        sb.AppendLine(" }");
    }

    return sb.ToString();
}

上面这段代码，你可以直接复制到你的 EMLOG 或者独立后端项目中跑。它能处理基本的压缩代码。

三、交互开发：接口与 JSON

前端怎么调？很简单，就是一个简单的 Web API。

我们通常使用 HTTP 请求接收数据，然后返回 JSON 格式。这里有一个坑：CSS 属性中的值可能包含特殊字符，如果直接拼接 SQL，或者直接传回前端，可能会乱码。所以，必须对输入做清洗，对输出做转义。

[HttpPost("api/format")]
public IActionResult Format([FromBody] dynamic data)
{
    // 接收前端传来的字符串
    // 注意：这里不要直接用 @data.Css，需要小心处理特殊字符
    string raw = data?.css?.ToString();

    if (string.IsNullOrEmpty(raw))
        return BadRequest("请输入CSS代码");

    string formatted = FormatCss(raw);

    // 返回 JSON 结果
    return Ok(new
    {
        code = 200,
        message = "格式化成功",
        data = formatted
    });
}

四、避坑指南：SQL注入与预处理

很多新手在开发这类工具时，习惯把用户输入存入数据库做记录。**这是大忌！**

虽然 CSS 格式化看起来只是展示，但如果未来你要把这个工具加上“保存草稿”功能，一定要用预处理语句。

错误示范：

string sql = $"INSERT INTO tools (name, content) VALUES ('{userInput}', ...)"; // SQL注入风险

正确示范：

using (var cmd = new SqlCommand("INSERT INTO tools (name, content) VALUES (@Name, @Content)", conn))
{
    cmd.Parameters.AddWithValue("@Name", "CSS工具");
    // 防注入，强制转义
    cmd.Parameters.AddWithValue("@Content", rawCss); 
    cmd.ExecuteNonQuery();
}

我在零点博客的实战中发现，很多脚本小子喜欢在 CSS 值里输入 ``，如果不做处理，页面直接弹窗。虽然后端格式化工具不展示 HTML，但养成良好的安全习惯至关重要。

五、结语

从 CSS 的正则解析，到 C# 的字符串处理，再到接口与数据库的安全交互，这个小小的工具其实涵盖了后端开发的方方面面。技术没有捷径，多敲代码，多踩坑，才能写出健壮的代码。

如果你在开发 EMLOG 主题或者个人博客时遇到类似的前后端交互问题，欢迎在零点博客留言讨论！