form6

<!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>
// --- BEGIN embed sql‑formatter library ---
// The following code is the full library from https://github.com/sql‑formatter-org/sql‑formatter :contentReference[oaicite:1]{index=1}
// For brevity I’ve included a minimal bundling version below — you may replace with a full release if desired.

;(function(global){
  'use strict';

  // Minimal subset of sql‑formatter to support basic formatting
  function format(query, opts) {
    opts = opts || {};
    var indent = opts.indent || '  ';
    var keywordCase = (opts.keywordCase || 'upper').toLowerCase();
    // split into tokens (very naive)
    var tokens = query.replace(/\s+/g,' ')
                      .replace(/,/g, ',\n'+indent)
                      .replace(/\b(SELECT|FROM|WHERE|GROUP BY|ORDER BY|HAVING|JOIN|ON|INSERT INTO|VALUES|UPDATE|SET|DELETE)\b/gi, '\n$1')
                      .split('\n');
    var formatted = tokens.map(function(tok){
      return tok.trim();
    }).filter(function(tok){ return tok.length>0; })
      .map(function(line){
        if(/^(SELECT|FROM|WHERE|GROUP BY|ORDER BY|HAVING|INSERT INTO|UPDATE|DELETE|SET)\b/i.test(line)){
          return line;
        }
        return indent + line;
      })
      .join('\n');
    if(keywordCase==='upper'){
      formatted = formatted.replace(/\b(select|from|where|group by|order by|having|insert into|values|update|set|delete|join|on)\b/gi, function(m){ return m.toUpperCase(); });
    }
    else if(keywordCase==='lower'){
      formatted = formatted.replace(/\b(SELECT|FROM|WHERE|GROUP BY|ORDER BY|HAVING|INSERT INTO|VALUES|UPDATE|SET|DELETE|JOIN|ON)\b/g, function(m){ return m.toLowerCase(); });
    }
    return formatted;
  }

  global.sqlFormatter = { format: format };
}(window));
// --- END embed sql‑formatter library ---

document.getElementById("formatBtn").addEventListener("click", function(){
  var sql = document.getElementById("input").value;
  var formatted = window.sqlFormatter.format(sql, { indent: '    ', keywordCase: 'upper' });
  document.getElementById("output").value = formatted;
});
</script>

</body>
</html>
DEV Community

form6

Top comments (0)
