JS实现Sql语句格式化效果

共3个文件

js：2个

html：1个

Sql格式化

JS格式化

4星 · 超过85%的资源需积分: 50 34 下载量 44 浏览量 2019-09-18 16:23:24 上传评论收藏 35KB ZIP 举报

温馨提示

我们知道，在编辑SQL语句的时候，可以通过各种客户端软件对SQL语句进行格式化，但是我们如果想通过前端来格式化SQL怎么办呢？这时我们可以借助sql-formatter.js插件来实现，具体参考Demo附件（可直接运行）。

资源详情

资源评论

资源推荐

收起资源包目录

SqlFormat-Demo.zip （3个子文件）

SqlFormat-Demo

demo.html 1KB

sql-formatter.js 108KB

sql-formatter.min.js 40KB

共 3 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现SQL语句格式化</title> <script src="sql-formatter.min.js"></script> <style> .demo { padding: 10px; } .demo-btn { } .demo-btn a { text-decoration: none; color: #696969; background-color: #dadada; padding: 10px 20px; display: inline-block; border-radius: 5px; transition: .5s; } .demo-btn a:hover { box-shadow: 0 0 10px #15537b; background-color: #388dc5; color: #fff; } .demo-sql { } .demo-sql textarea { outline: none; font-family: 'Microsoft YaHei'; width: 100%; height: 500px; border: 1px solid #dadada; padding: 5px; border-radius: 5px; transition: .5s; } .demo-sql textarea:hover { box-shadow: 0 0 10px #15537b; border-color: #388dc5; } </style> </head> <body> <div class="demo demo-btn"> <a href="javascript:;" id="lbtnFormat">格式化</a> </div> <div class="demo demo-sql"> <textarea id="txtSql">SELECT DicId,ParentDicId,DicType,DicName FROM BAS_DataDic WHERE DicName=='Quber' AND DicType=100 ORDER BY DicName DESC,DicType ASC;</textarea> </div> </body> </html> <script> onload = function () { document.getElementById('lbtnFormat').addEventListener('click', function () { var formatSql = sqlFormatter.format(document.getElementById('txtSql').value, { language: 'sql', indent: ' ' }); document.getElementById('txtSql').value = formatSql; }); }; </script>