零点博客实战：手把手教你用Javascript实现客户端SQL格式化工具

哈喽，我是零点博客的博主。做建站开发久了，最头疼的就是看那些没换行的SQL语句，调试起来眼睛都要瞎了。以前这种工具都要后端跑一遍，费性能不说，还在乎本地方案里增加服务器负载。今天咱们就用Javascript在浏览器端搞定它，实测用在EMLOG主题或者纯静态页里都特别香。

一、痛点分析与思路

咱说句实话，很多小白复制粘贴SQL时往往不会特意换行，这导致复杂的逻辑（比如多表关联、嵌套WHERE）极难辨认。咱们要做的就是利用正则表达式，把原本挤在一起的代码“撑开”。

这个工具的核心不在于复杂的后端逻辑，而在于前端的JS处理和HTML的布局。对于零点博客这种站点，这种轻量级前端工具加载速度极快，用户体验也是一流。

二、HTML结构与样式搭建

首先，我们需要一个输入框和一个按钮。CSS方面，我使用了Flex布局，保证了在移动端和PC端都不错的反色效果。注意，这里我们重点演示功能，样式可以自由发挥。

<div class="sql-tool-container">
  <textarea id="sqlInput" placeholder="请在此粘贴你的SQL语句..."></textarea>
  <button onclick="formatSql()">一键美化</button>
  <textarea id="sqlOutput" placeholder="格式化后的结果..."></textarea>
</div>

三、核心代码：JS正则处理

这部分是灵魂。这里我准备了一个基础的格式化函数，它能够识别关键字并插入换行符。这其实就是前端开发中常见的字符串操作。

function formatSql() {
  const input = document.getElementById('sqlInput').value;
  if (!input) return alert('请输入内容');

  // 核心正则逻辑：以 SELECT, FROM, WHERE, ORDER BY 等单词结尾并换行
  let formattedSql = input
    .replace(/\s+/g, ' ')  // 先把多余空格压缩
    .replace(/\b(SELECT|FROM|WHERE|AND|OR|ORDER BY|GROUP BY|LEFT JOIN|RIGHT JOIN|INNER JOIN)\b/gi, '\n$1'); // 关键字前加换行

  // 清理掉开头可能多余的空格
  formattedSql = formattedSql.replace(/^\n+/, '');

  document.getElementById('sqlOutput').value = formattedSql;
}

四、避坑指南与安全提示

虽然这是一个纯前端的Javascript工具，但如果用户把处理后的数据拿去用，还是要提醒大家注意安全。千万记得，前端格式化只是为了“看着顺眼”，绝不能用来直接执行复杂的逻辑查询，否则极易被利用进行SQL注入。

在EMLOG或其他CMS二次开发时，如果你打算把这个做成插件，记得在接口开发层面加上预处理语句来保护MySQL数据库。前端只是辅助，安全永远在服务端。

五、总结

看，就是这么简单！无需PHP后端支持，一个简单的JS脚本就能让你的SQL代码瞬间变清爽。这种小工具适合开发者在调试时快速查看逻辑，也是前端开发中处理字符串和正则表达式的绝佳案例。如果你觉得有用，欢迎在零点博客分享给更多建站的小伙伴！