前端sql语句输入框以及格式化sql语句和sql关键词高亮---sql-formatter、vue-codemirror

1.下载

npminstall sql-formatter --save   //sql语句格式化 版本2.3.3（不然报错） 
npminstall vue-codemirror --save  //用于sql语句关键词高亮

2.引入

import sqlFormatter from 'sql-formatter';import CodeMirror from 'codemirror/lib/codemirror';import'codemirror/lib/codemirror.css';import'codemirror/theme/darcula.css';import'codemirror/mode/sql/sql.js';

3.使用

<template><textarea  autofocus="true"ref="mycode"class="codesql" v-model="sqlCode"></textarea><Button class="mr"type="primary" @click="handleFormat">格式化</Button></template><script>export default {data(){
       return{
         sqlCode: '',
         sqlScript：'select * from 表格名称'，
         editor:null
       }},
      method:{
       // sql初始化
        sqlInit(){
          this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
              value: this.sqlCode,
              mode: 'text/x-mariadb', 
              indentWithTabs: true,
              smartIndent: true,
              lineNumbers: true,
              matchBrackets: true,
              cursorHeight: 1,
              lineWrapping: true,
              readOnly: false,
              theme: 'darcula',
              autofocus: true,
         });},
       // 格式化
        handleFormat(){let sql = sqlFormatter.format(this.sqlScript, { syntax: 'sql'});
           this.editor.setValue(sql);  // 设置sql语句
           this.sqlScript=this.editor.getValue();  //获取sql语句
         },
      }}</script>

4.遇到的问题

“select * from 表格名称” 这个字符包含了中文，如果进行格式化，就会变成 “select * from 表 格 名 称” 中文之前添加了空格

解决方法：使用正则去掉空格

使用正侧格式化去掉空格我尝试的几种方法

方法一

//  const result = sql.replace(/([\u4e00-\u9fa5])\s+/g, '$1'); 
   // 这种方式如果中文后面还有引文就不行
   例如 "select * from 表格名称 where age='1'"
   // "select * from 表格名称where age='1'" 就会把中文后面的空格去掉❌

方法二

//  const result = sql.replace(/(\s*)([\u4e00-\u9fa5])/g, '$2').replace(/([a-zA-Z])([\u4e00-\u9fa5])/g, '$1 $2');
 ql.replace(/(\s*)([\u4e00-\u9fa5])/g, '$2') 这个是去掉中文前面的空格，中文前面可能是英文，所以还需一步给英文前面添加空格replace(/([a-zA-Z])([\u4e00-\u9fa5])/g, '$1 $2')
// 例如 "select * from 表格名称 where age='18' and name='rose中文'" 
   //"select * from 表格名称 where age='18' and name='rose 中文'" 就会把name='rose 中文'" 中间加一个空格❌

方法三（最终版本）

 // 格式化
    handleFormat(){let sql = sqlFormatter.format(this.editor.getValue());let arr =['select', 'from', 'as', 'where', 'group by', 'order by', 'and', 'on', 'like', 'end'];let result = this.addSpaceAfterWord(sql.replace(/(\s*)([\u4e00-\u9fa5])/g, '$2'), arr);
      this.editor.setValue(result);
      console.log(result, 'result');},
    addSpaceAfterWord(sql, keywords){
      const keywordPattern = new RegExp(`\\b(${keywords.join('|')})\\b`, 'gi');return sql.replace(keywordPattern, '$& ');},
//先把中文之间的空格给去掉，这时候英文单字后面就不会有空格，那么这是我就把关键字写成数组使用正侧来替换
1.keywords.join('|') 来创建一个用于匹配目标英文单词的正则表达式模式，其中 | 表示逻辑或运算符，用于将关键字连接在一起。
2.replace 方法来匹配查询字符串中的目标英文单词，并在其后添加一个空格。$& 是替换字符串中的特殊字符，表示与正则表达式匹配的内容本身。
3. \b 单词边界，以确保只匹配完整的目标英文单词，并避免在其他地方不必要地添加空格。另外，gi 修饰符用于进行全局匹配和忽略大小写匹配。

5.优化 可以控制sql输入框的高度

<!-- 拖动改变大小 --><div id="resizeId"class="resize"></div>dragControllerDiv(){
      const resize = document.querySelector('#resizeId'); // 拖拽条
      // 鼠标按下事件
      resize.addEventListener('mousedown', this.onMouseDown);//鼠标按下
    },
    onMouseDown(e){
      this.resizeBox = e.target;
      const sqlStatement = document.querySelector('.sqlStatement');
      this.startY = e.clientY;
      this.curLen = sqlStatement.clientHeight;
      document.addEventListener('mousemove', this.onMousemove);//鼠标移动改变高度
      document.addEventListener('mouseup', this.onMouseup);  // 鼠标抬起销毁
    },
    onMousemove(e){
      const endX = e.clientY;
      const moveLen = endX - this.startY; // （endX-startY）= 移动的距离
      const CurBoxLen = this.curLen + moveLen; // sql的高+移动的距离=现在sql的高度
      const sqlStatement = document.querySelector('.sqlStatement');
      const rightCenter = document.querySelector('.rightCenter');let tH = rightCenter.clientHeight - CurBoxLen - 120; //表格的高=一整个区域减去sql的高-其他元素的高
      this.resizeBox.style.background ='#2d8cf0';if(CurBoxLen <200|| tH <=300)return;
      sqlStatement.style.height = CurBoxLen + 'px';
      this.$nextTick(()=>{
        this.resultHeight = tH + 'px';});},
    onMouseup(e){
      this.resizeBox.style.background ='#d6d6d6';
      document.removeEventListener('mousedown', this.onMouseDown);
      document.removeEventListener('mousemove', this.onMousemove);},
 
 //css
 .resize {
  cursor: row-resize;
  float: left;
  position: relative;
  left: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -24px;
  width: 50px;
  height: 10px;
  background-size: cover;
  background-position: center;
  font-size: 32px;
  color: white;}