JSFiddle - React, Tailwind, and code Playground

by Ilya Kolesnikov

HTML

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn-format").on("click", () =>{
                    var insql = $("#textarea-in").val();        

                    var regex = new RegExp("exec sp_executesql N'(?<command>.+?(?='(,N'$)?))'(,\s*N'(?<types>.+?(?=',))',\s*(?<vals>.+))?");
                    var groups = insql.replace(/\n|\r/g, "").match(regex).groups;
                    
                    var outsql = "";
                    if (groups.types)
                    {
                        var types = groups.types.match(/@[^\s]+ \w+(\([\w\d,]+\))?/g);
                        for (const typeDeclaration of types) {
                            outsql = outsql + 'declare ' +  typeDeclaration + '\n';
                        }
                        outsql = outsql + '\n';
                        for (const setVal of groups.vals.split(',')) {
                            outsql = outsql + 'set ' +  setVal + '\n';
                        }
                        outsql = outsql + '\n';
                    }
                    $.ajax({
                        url: 'https://sqlformat.org/api/v1/format',
                        type: 'POST',
                        dataType: 'json',
                        crossDomain: true,
                        data: {
                            sql: groups.command, reindent: 1
                        },
                        success: (data) => {
                            outsql = outsql + data.result;
                            $("#textarea-out").val(outsql);
                        },
                        error: () =>{
                            outsql = outsql + '-- No format happened. See browser console for details \n';
                            outsql = outsql + groups.command;
                            $("#textarea-out").val(outsql);
                        }
        ...