.sd-sqlfmt{ --t-primary:#008fbf;--t-bg:transparent;--t-fg:#0f172a;--t-muted:#4b5563; --t-border:#e5e7eb;--t-surface:#ffffff;--t-surface-2:#f0f2f7; --t-code:#1e293b;--t-code-border:#e5e7eb; --t-error-bg:#fef2f2;--t-error:#dc2626;--t-radius:12px;--t-pad:16px; font-family:inherit;color:var(--t-fg);background:var(--t-bg); border:none;border-radius:0;padding:0;width:100%;max-width:100%;margin:0;box-shadow:none; } .sd-sqlfmt *,.sd-sqlfmt *::before,.sd-sqlfmt *::after{box-sizing:border-box;} .sd-sql-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .sd-sql-controls{margin-bottom:16px;gap:8px;} .sd-sql-spacer{flex:1;} .sd-sql-label{font-size:13px;color:var(--t-muted);display:flex;align-items:center;gap:6px;} .sd-sqlfmt select.sd-sql-select{ padding:6px 10px;border:1px solid var(--t-border) !important;background:var(--t-surface) !important; color:var(--t-fg) !important;border-radius:6px;outline:none;font-size:13px; line-height:1.4;height:auto;min-height:0; appearance:auto;-webkit-appearance:auto;transition:border-color .2s ease; } .sd-sqlfmt select.sd-sql-select:focus{border-color:var(--t-primary) !important;} .sd-sqlfmt button.sd-sql-btn{ padding:7px 16px !important;border:1px solid var(--t-border) !important;border-radius:8px !important; background:var(--t-surface) !important;color:var(--t-fg) !important;cursor:pointer; font-size:13px !important;font-weight:500 !important;line-height:1.4 !important; box-shadow:none !important;text-transform:none !important;letter-spacing:0 !important; transition:all .15s ease;display:inline-flex;align-items:center;gap:4px; margin:0 !important;text-decoration:none !important; } .sd-sqlfmt button.sd-sql-btn:hover{ border-color:var(--t-primary) !important;color:var(--t-primary) !important;background:rgba(0,143,191,.04) !important; } .sd-sqlfmt button.sd-sql-btn:active{transform:translateY(1px);} .sd-sqlfmt button.sd-sql-btn--primary{ background:var(--t-primary) !important;border-color:var(--t-primary) !important;color:#fff !important; } .sd-sqlfmt button.sd-sql-btn--primary:hover{ background:#2fbfef !important;border-color:#2fbfef !important;color:#fff !important; } .sd-sqlfmt button.sd-sql-btn--ghost{ background:transparent !important;border-color:transparent !important;color:var(--t-muted) !important; } .sd-sqlfmt button.sd-sql-btn--ghost:hover{ background:rgba(0,143,191,.04) !important;color:var(--t-primary) !important;border-color:transparent !important; } .sd-sql-panehead{font-size:12px;font-weight:600;color:var(--t-muted);letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px;} .sd-sql-panes{display:flex;gap:10px;align-items:stretch;} .sd-sql-pane{flex:1;min-width:280px;display:flex;flex-direction:column;gap:6px;} .sd-sqlfmt textarea.sd-sql-textarea{ width:100%;min-height:340px;resize:vertical;padding:var(--t-pad); border-radius:var(--t-radius);border:1px solid var(--t-border) !important; background:var(--t-surface) !important;color:var(--t-fg) !important; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;line-height:1.6;box-shadow:none !important; transition:border-color .2s ease;flex:1; } .sd-sqlfmt textarea.sd-sql-textarea:focus{border-color:var(--t-primary) !important;outline:none;} .sd-sql-output{ width:100%;min-height:340px;margin:0;padding:var(--t-pad); border-radius:var(--t-radius);border:1px solid var(--t-code-border); background:var(--t-surface-2);color:var(--t-code);overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;line-height:1.6;white-space:pre;flex:1; } .sd-sql-error{ margin-top:12px;padding:12px 16px;border-radius:var(--t-radius); background:var(--t-error-bg);color:var(--t-error);font-size:14px; border:1px solid rgba(220,38,38,.12); } .sd-sqlfmt .tok-kw{color:#0369a1;font-weight:600;} .sd-sqlfmt .tok-fn{color:#9333ea;} .sd-sqlfmt .tok-str{color:#047857;} .sd-sqlfmt .tok-num{color:#b45309;} .sd-sqlfmt .tok-op{color:#6366f1;} .sd-sqlfmt .tok-comm{color:#9ca3af;font-style:italic;} .sd-sqlfmt .tok-paren{color:#d946ef;} .sd-sqlfmt .tok-ident{color:#1e293b;} @media(max-width:768px){ .sd-sql-panes{flex-direction:column;} .sd-sqlfmt button.sd-sql-btn{padding:7px 12px !important;} .sd-sqlfmt textarea.sd-sql-textarea,.sd-sql-output{min-height:220px;} } (function(){ var root=document.getElementById('sd-sqlfmt');if(!root)return; function qs(s){return root.querySelector(s);} var el={ input:qs('#sdsql-input'),output:qs('#sdsql-output'),error:qs('#sdsql-error'), indent:qs('#sdsql-indent'), btnFmt:qs('#sdsql-format'),btnMin:qs('#sdsql-minify'), btnCopy:qs('#sdsql-copy'),btnDl:qs('#sdsql-download'),btnClr:qs('#sdsql-clear') }; function showError(m){el.error.textContent=m;el.error.hidden=false;} function clearError(){el.error.hidden=true;el.error.textContent='';} function escH(s){return s.replace(/&/g,'&').replace(//g,'>');} function getIndent(){ var v=el.indent.value; if(v==='\\t'||v==='\t')return'\t'; return' '.repeat(parseInt(v,10)); } /* ---- Keywords (MySQL + MSSQL) ---- */ var KW_SET={}; var KW_ALL=[ 'SELECT','FROM','WHERE','JOIN','INNER','LEFT','RIGHT','FULL','OUTER','CROSS', 'ON','AND','OR','NOT','IN','EXISTS','BETWEEN','LIKE','IS','NULL', 'ORDER','BY','GROUP','HAVING','LIMIT','OFFSET','TOP','PERCENT', 'UNION','ALL','INTERSECT','EXCEPT', 'INSERT','INTO','VALUES','UPDATE','SET','DELETE','MERGE','USING', 'CREATE','ALTER','DROP','TABLE','VIEW','INDEX','DATABASE','SCHEMA', 'TRUNCATE','RENAME','ADD','COLUMN','MODIFY','CHANGE', 'PRIMARY','KEY','FOREIGN','REFERENCES','CONSTRAINT','DEFAULT','CASCADE', 'UNIQUE','CHECK','AUTO_INCREMENT','IDENTITY','CLUSTERED','NONCLUSTERED', 'AS','DISTINCT','ASC','DESC','WITH','NOLOCK','RECURSIVE','CTE', 'CASE','WHEN','THEN','ELSE','END', 'IF','BEGIN','COMMIT','ROLLBACK','TRANSACTION','SAVEPOINT', 'GRANT','REVOKE','DENY', 'OVER','PARTITION','WINDOW','RANGE','ROWS','PRECEDING','FOLLOWING', 'UNBOUNDED','CURRENT','ROW','FETCH','NEXT','ONLY','FIRST', 'DECLARE','CURSOR','OPEN','CLOSE','DEALLOCATE', 'EXEC','EXECUTE','PROCEDURE','FUNCTION','RETURNS','RETURN', 'TRIGGER','AFTER','BEFORE','INSTEAD','OF', 'WHILE','BREAK','CONTINUE','GOTO','WAITFOR', 'TRUE','FALSE','REPLACE','CONVERT','CAST','COALESCE','NULLIF', 'OUTPUT','INSERTED','DELETED','APPLY','PIVOT','UNPIVOT', 'TABLESAMPLE','OPTION','RECOMPILE','MAXRECURSION', 'GO','USE','PRINT','RAISERROR','THROW', 'TEMPORARY','TEMP','ENGINE','CHARSET','COLLATE','UNSIGNED','SIGNED', 'EXPLAIN','ANALYZE','SHOW','DESCRIBE','LOCK','UNLOCK','TABLES', 'STRAIGHT_JOIN','SQL_CALC_FOUND_ROWS','HIGH_PRIORITY','LOW_PRIORITY', 'DELAYED','IGNORE','DUPLICATE','FORCE','SPATIAL','FULLTEXT', 'SEPARATOR','LIMIT','OFFSET','HAVING','ROLLUP','CUBE','GROUPING' ]; for(var ki=0;ki<KW_ALL.length;ki++){KW_SET[KW_ALL[ki]]=true;} /* Multi-word keywords for tokenizer lookahead */ var MULTI_KW=['INNER JOIN','LEFT JOIN','RIGHT JOIN','LEFT OUTER JOIN','RIGHT OUTER JOIN', 'FULL JOIN','FULL OUTER JOIN','CROSS JOIN','CROSS APPLY','OUTER APPLY', 'ORDER BY','GROUP BY','PARTITION BY','INSERT INTO','DELETE FROM', 'CREATE TABLE','ALTER TABLE','DROP TABLE','CREATE VIEW','DROP VIEW', 'CREATE INDEX','CREATE DATABASE','DROP DATABASE','DROP INDEX', 'PRIMARY KEY','FOREIGN KEY','NOT NULL','IS NULL','IS NOT NULL', 'NOT IN','NOT EXISTS','NOT LIKE','NOT BETWEEN', 'UNION ALL','CURRENT ROW','INSTEAD OF', 'SQL_CALC_FOUND_ROWS','ON DUPLICATE KEY UPDATE']; /* Clause keywords that get a new line */ var CLAUSE_SET={}; var CLAUSE_LIST=['SELECT','FROM','WHERE','JOIN','INNER JOIN','LEFT JOIN','RIGHT JOIN', 'LEFT OUTER JOIN','RIGHT OUTER JOIN','FULL JOIN','FULL OUTER JOIN','CROSS JOIN', 'CROSS APPLY','OUTER APPLY', 'ON','ORDER BY','GROUP BY','HAVING','LIMIT','OFFSET', 'UNION','UNION ALL','INTERSECT','EXCEPT', 'INSERT INTO','DELETE FROM','VALUES', 'UPDATE','SET','MERGE','USING', 'CREATE TABLE','ALTER TABLE','DROP TABLE', 'CREATE VIEW','DROP VIEW','CREATE INDEX','DROP INDEX', 'WITH','FETCH']; for(var ci=0;ci<CLAUSE_LIST.length;ci++){CLAUSE_SET[CLAUSE_LIST[ci]]=true;} /* Sub-indent keywords */ var SUB_SET={}; var SUB_LIST=['AND','OR','WHEN','THEN','ELSE']; for(var si=0;si<SUB_LIST.length;si++){SUB_SET[SUB_LIST[si]]=true;} /* ---- Tokenizer ---- */ function tokenize(sql){ var tokens=[],i=0,len=sql.length; while(i<len){ /* whitespace – capture it */ if(/\s/.test(sql[i])){ var ws=i; while(i<len&&/\s/.test(sql[i]))i++; tokens.push({type:'ws',value:sql.substring(ws,i)}); continue; } /* single-line comment */ if(sql[i]==='-'&&sql[i+1]==='-'){ var ce=sql.indexOf('\n',i);if(ce===-1)ce=len; tokens.push({type:'comment',value:sql.substring(i,ce)});i=ce;continue; } /* multi-line comment: avoid literal star-slash in source */ if(sql[i]==='/'&&sql[i+1]==='*'){ var mc=sql.indexOf('*'+'/',i+2);if(mc===-1)mc=len-2; tokens.push({type:'comment',value:sql.substring(i,mc+2)});i=mc+2;continue; } /* single-quoted string */ if(sql[i]==="'"){ var ss=i;i++; while(i<len){ if(sql[i]==="'"&&sql[i+1]==="'"){i+=2;continue;} if(sql[i]==='\\'){i+=2;continue;} if(sql[i]==="'"){i++;break;} i++; } tokens.push({type:'string',value:sql.substring(ss,i)});continue; } /* double-quoted identifier (MSSQL/MySQL ANSI) */ if(sql[i]==='"'){ var ds=i;i++; while(i<len&&sql[i]!=='"')i++; if(i<len)i++; tokens.push({type:'ident',value:sql.substring(ds,i)});continue; } /* backtick-quoted identifier (MySQL) */ if(sql[i]==='`'){ var bs=i;i++; while(i<len&&sql[i]!=='`')i++; if(i<len)i++; tokens.push({type:'ident',value:sql.substring(bs,i)});continue; } /* bracket-quoted identifier (MSSQL) */ if(sql[i]==='['){ var brs=i;i++; while(i<len&&sql[i]!==']')i++; if(i<len)i++; tokens.push({type:'ident',value:sql.substring(brs,i)});continue; } /* number */ if(/[0-9]/.test(sql[i])){ var ns=i; while(i<len&&/[0-9.]/.test(sql[i]))i++; if(i<len&&/[eE]/.test(sql[i])){i++;if(i<len&&/[+-]/.test(sql[i]))i++;while(i<len&&/[0-9]/.test(sql[i]))i++;} tokens.push({type:'number',value:sql.substring(ns,i)});continue; } /* parentheses */ if(sql[i]==='('||sql[i]===')'){ tokens.push({type:'paren',value:sql[i]});i++;continue; } /* comma, semicolon */ if(sql[i]===','||sql[i]===';'){ tokens.push({type:'punct',value:sql[i]});i++;continue; } /* dot, at */ if(sql[i]==='.'||sql[i]==='@'){ tokens.push({type:'dot',value:sql[i]});i++;continue; } /* operators */ if('=!'.indexOf(sql[i])!==-1){ var os=i; if(i+1')){i++;} i++; tokens.push({type:'operator',value:sql.substring(os,i)});continue; } if('+-*/%&|^~'.indexOf(sql[i])!==-1){ tokens.push({type:'operator',value:sql[i]});i++;continue; } /* word */ if(/[a-zA-Z_#]/.test(sql[i])){ var wds=i; while(i<len&&/[a-zA-Z0-9_#$@]/.test(sql[i]))i++; var word=sql.substring(wds,i); var upper=word.toUpperCase(); /* try multi-word keyword match */ var matched=false; for(var mk=0;mk<MULTI_KW.length;mk++){ var parts=MULTI_KW[mk].split(' '); if(parts[0]!==upper)continue; var ahead=i,p=1,ok=true; while(p<parts.length&&ok){ while(ahead<len&&/\s/.test(sql[ahead]))ahead++; var ps=ahead; while(ahead<len&&/[a-zA-Z0-9_]/.test(sql[ahead]))ahead++; if(sql.substring(ps,ahead).toUpperCase()!==parts[p])ok=false; p++; } if(ok){ tokens.push({type:'keyword',value:sql.substring(wds,ahead)}); i=ahead;matched=true;break; } } if(!matched){ if(KW_SET[upper]){ tokens.push({type:'keyword',value:word}); }else{ tokens.push({type:'ident',value:word}); } } continue; } /* fallback */ tokens.push({type:'other',value:sql[i]});i++; } return tokens; } /* ---- Formatter ---- */ function kwNorm(t){return t.type==='keyword'?t.value.toUpperCase().replace(/\s+/g,' '):'';} function formatSQL(tokens,IND){ var out='',depth=0,newline=true,i,t; function pad(){return IND.repeat(depth);} function nl(){if(!newline){out+='\n';}newline=true;} for(i=0;i=0;p--){if(tokens[p].type!=='ws'){prevReal=tokens[p];break;}} if(prevReal&&prevReal.type==='dot'){} else{out+=' ';} } out+=t.value; } return out.trim(); } /* ---- Minify ---- */ function minifySQL(tokens){ var out='',prev=null,i,t; for(i=0;i<tokens.length;i++){ t=tokens[i]; if(t.type==='ws'||t.type==='comment')continue; if(prev&&t.type!=='punct'&&t.type!=='dot'&&t.value!==')' &&prev.type!=='paren'&&prev.type!=='dot'&&prev.value!=='('){ out+=' '; } out+=t.value; prev=t; } return out.trim(); } /* ---- Highlight (token-based, preserves formatted whitespace) ---- */ function highlight(sql){ var toks=tokenize(sql); var parts=[]; for(var i=0;i<toks.length;i++){ var t=toks[i]; var v=escH(t.value); switch(t.type){ case 'keyword':parts.push(''+v+'');break; case 'string':parts.push(''+v+'');break; case 'number':parts.push(''+v+'');break; case 'operator':parts.push(''+v+'');break; case 'comment':parts.push(''+v+'');break; case 'paren':parts.push(''+v+'');break; default:parts.push(v); } } return parts.join(''); } /* ---- Actions ---- */ function doFormat(minify){ clearError(); var raw=el.input.value.trim(); if(!raw){el.output.innerHTML='';return;} try{ var tokens=tokenize(raw); var result=minify?minifySQL(tokens):formatSQL(tokens,getIndent()); el.output.innerHTML=highlight(result); }catch(e){ showError('Fehler: '+(e&&e.message?e.message:e)); } } el.btnFmt.addEventListener('click',function(){doFormat(false);}); el.btnMin.addEventListener('click',function(){doFormat(true);}); el.btnCopy.addEventListener('click',function(){ var text=el.output.innerText||''; if(navigator.clipboard){navigator.clipboard.writeText(text);return;} var ta=document.createElement('textarea');ta.value=text; document.body.appendChild(ta);ta.select();document.execCommand('copy');ta.remove(); }); el.btnDl.addEventListener('click',function(){ var text=el.output.innerText||''; var blob=new Blob([text],{type:'text/sql;charset=utf-8'}); var a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='formatted.sql'; document.body.appendChild(a);a.click();a.remove();URL.revokeObjectURL(a.href); }); el.btnClr.addEventListener('click',function(){el.input.value='';el.output.innerHTML='';clearError();}); el.input.addEventListener('keydown',function(ev){ if((ev.ctrlKey||ev.metaKey)&&ev.key==='Enter')doFormat(false); }); })();