`<!DOCTYPE html>
Offline SQL Formatter 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; }
Offline SQL Formatter
Format SQL
// --- 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;
});
`
Top comments (0)