markDown生成代码工具的实现

       为了提升开发速度，因为低代码平台的搭建工程比较大且目前所开发的项目比较急，所以开发了一个通过markDown数据自动生成对应代码的工具marked2View，接下来大概记录下开发过程及方法，以防忘记，代码就不一一贴出来了，需要的可以上git瞅一瞅。

1. 先查看markDown文档，找出各文档之间的共性；

2. 通过marked将md数据转html;

    // md数据转table
     const html = marked(markedContent);
   

3. 截取需要生成对应代码的数据，生成字符串数组；

     // 截取需要进行转换的数据，自定义截取条件
     const tableList = html.match(/<table>([\s\S]*?)<\/table>/g);
   

4. 使用map将字符串数组转换成dom数据；

     // 生成tableDOM
     const tableDOM = tableList?.map((tableStr: string) => {
       return document.createRange().createContextualFragment(tableStr).firstChild;
     });
   

5. 使用tableToJson方法将数组转换成JSON数据；

   // table转JsonList
     function tableToJson(table: any) {
       const data: any = [];
       const headers = [];
       const tableCells = table?.rows?.[0]?.cells;
       for (let i = 0; i < tableCells?.length; i++) {
         headers[i] = tableCells[i].innerHTML.toLowerCase().replace(/ /gi, '');
       }
       for (let i = 1; i < table?.rows?.length; i++) {
         const tableRow = table?.rows?.[i].cells;
         const rowData = {};
         for (let j = 0; j < tableRow.length; j++) {
           rowData[headers[j]] = tableRow[j].innerHTML;
         }
         data.push(rowData);
       }
       return data;
     }
     
     // JsonList
     const initialDataMap = tableDOM?.map((table: any) => tableToJson(table));
   

6. 最后通过Json数据根据对应字段名生成需要的代码，效果如下：

ps:因为生成的代码展示为字符串数据，所以对应的key都会有双引号，如有将key双引号去除的需求可使用该方法清除key的双引号。

  const clearDoubleQuote = (content: string) => {
    return JSON.stringify(content, null, '\t')?.replace(/("(\\[^]|[^\\"])*"(?!\s*:))|"((\\[^]|[^\\"])*)"(?=\s*:)/g, '$1$3');
  };