南飓风 发表于 2024-8-31 20:20:13

sql-formatter -- 格式化sql数据

首先你须要一个可以展示代码的组件;
我利用的是tech-ui(内部组件库);
你如果没有类似的组件,可以参考以下链接替代:
react-monaco-editor -- 代码编辑器(适用Umi)_umi monaco editor-CSDN博客
Codemirror -- 代码编辑器(react、umi)_codemiror-CSDN博客

第一种 :后端处置惩罚过的数据

import { Highlight } from '@alipay/tech-ui';

const sqlValue = " SELECT\\ntrisk_adm.mid_qat_sct_baseline_sigma.clustername, trisk_adm.mid_qat_sct_baseline_sigma.namespace, trisk_adm.mid_qat_sct_baseline_sigma.configsource, trisk_adm.mid_qat_sct_baseline_sigma.configkey\\n \\n FROM trisk_adm.mid_qat_sct_baseline_sigma\\n WHERE 1=1AND trisk_adm.mid_qat_sct_baseline_sigma.dt = '20240318' "

const sqlFormat = (text : string) => {
    if (!text) return '';
    return text?.replaceAll('\\n', '\n')
}

<Highlight
    language="sql"
    copyable={true}
    lineNumber={true}
>
    {sqlFormat(sqlValue)}
</Highlight> https://i-blog.csdnimg.cn/blog_migrate/d8967eebf87675b1b972b3953393819b.png


第二种 :后端未未处置惩罚的数据 (借助sql-formatter插件处置惩罚)

   pnpm install sql-formatter@12.2.0
import { format } from 'sql-formatter';
import { Highlight } from '@alipay/tech-ui';

const sqlValue = " SELECT   split_part( split_part( aliyun_network.top100_channel_pid_fy_cash_ex_fy.pid, 'd',4, 1),'end', 1 , 1 ) as 222   ,split_part( split_part( aliyun_network.top100_channel_pid_fy_cash_ex_fy.pid, 's',2, 1),'d', 1 , 1 ) as 333   ,split_part( split_part( aliyun_network.top100_channel_pid_fy_cash_ex_fy.pid, '1',4, 1),'1', 1 , 1 ) as 111   ,split_part( split_part( intern_study_dev.a.a1, 'D',2, 1),'v', 1 , 1 ) as test1   ,split_part( split_part( intern_study_dev.a.a1, 'start',1, 1),'D', 1 , 1 ) as test2   ,split_part( split_part( intern_study_dev.a.a1, '拭',2, 1),'end', 1 , 1 ) as test3   , null.a.a1, null.a.item_id, null.a.key, null.a.a2, null.a.a_id, null.top100_channel_pid_fy_cash_ex_fy.ds, null.aaa.dds   FROM intern_study_dev.a JOIN intern_study_dev.a ON intern_study_dev.a.a_id = intern_study_dev.a.intern_study_dev.a   JOIN aliyun_network.top100_channel_pid_fy_cash_ex_fy ON crm_data.aaa.dds = aliyun_network.top100_channel_pid_fy_cash_ex_fy.aliyun_network.top100_channel_pid_fy_cash_ex_fy   JOIN aliyun_network.top100_channel_pid_fy_cash_ex_fy ON intern_study_dev.a.a2 = aliyun_network.top100_channel_pid_fy_cash_ex_fy.aliyun_network.top100_channel_pid_fy_cash_ex_fy   JOIN crm_data.aaa ON intern_study_dev.a.key = crm_data.aaa.crm_data.aaa "

const sqlFormat = (text : string) => {
    if (!text) return '';
    try {
      return format(text, {
      expressionWidth: 500,
      paramTypes: {
          custom: [{ regex: String.raw`#\{.+?\}` }],
      },
      });
    } catch (error) {
      return text
    }
}

<Highlight
    language="sql"
    copyable={true}
    lineNumber={true}
>
    {sqlFormat(sqlValue)}
</Highlight> https://i-blog.csdnimg.cn/blog_migrate/c8438768a4d67ec96cba40e2f9a446a2.png

暂时就接触这两种语言,其他语言后续会更新~~~

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: sql-formatter -- 格式化sql数据