form2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Offline SQL Formatter</title>
<style>
  body { font-family: sans-serif; margin: 20px; }
  textarea { width: 100%; height: 200px; margin-bottom: 10px; font-family: monospace; }
  button { padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>

<h2>Offline SQL Formatter</h2>

<textarea id="input" placeholder="Paste your SQL here"></textarea><br>
<button id="formatBtn">Format SQL</button><br>
<textarea id="output" placeholder="Formatted SQL will appear here"></textarea>

<script>
// Minimal inlined version of sql-formatter (supports basic SQL formatting)
const sqlFormatter = {
  format: function(query) {
    if (!query) return "";
    // Replace multiple spaces and line breaks
    query = query.replace(/\s+/g, " ");
    // Add newlines before keywords
    const keywords = ["SELECT","FROM","WHERE","GROUP BY","ORDER BY","INSERT INTO","VALUES","UPDATE","SET","DELETE"];
    keywords.forEach(k => {
      const re = new RegExp("\\b" + k + "\\b","gi");
      query = query.replace(re, "\n" + k);
    });
    // Clean up extra newlines
    query = query.replace(/\n\s+/g,"\n").trim();
    return query;
  }
};

document.getElementById("formatBtn").addEventListener("click", () => {
  const sql = document.getElementById("input").value;
  const formatted = sqlFormatter.format(sql);
  document.getElementById("output").value = formatted;
});
</script>

</body>
</html>
DEV Community

form2

Top comments (0)
