javascript将html表格转换成markdown表格

// 转换有合并单元格场景的html表格为Markdown表格 
function table2Markdown(table) {  
  //初始化一个数组存储原始表格信息
  let markdownMatrix = [];
  let rowLength = table.rows.length;
  let rowIndex = 0; 
  for (let i=0; i<rowLength; i++ ) { 
    markdownMatrix[rowIndex] = [];
    let row = table.rows[i];
    if(!(window.getComputedStyle(row).display === 'none')){
      let columnCells = row.cells;
      let columnLength = columnCells.length;
      for (let j=0; j<columnLength; j++) { 
        markdownMatrix[rowIndex][j] = columnCells[j]
      } 
      rowIndex++;  
    }
  } 
    
  rowLength = markdownMatrix.length;
  //根据单元格合并情况,调整数组中存储的表格元素个数。跨行、跨列拆分成多个单元格后,多个单元格内容都是拆分前的单元格内容。
  for (let i=rowLength-1; i>=0; i-- ) {  
    let columnCells = markdownMatrix[i];
    let columnLength = columnCells.length;
    for (let j=columnLength-1; j>=0; j--) { 
      let cell = columnCells[j];
      let rowSpan = cell.rowSpan;
      let colSpan = cell.colSpan;
      //插入位置举例结尾列的距离,这个数据跨行合并的单元格,每一行距离都是相等的
      let distanceToEndColumn = markdownMatrix[i].length - j;
      for(let k=0; k < rowSpan; k++){
        if(k==0){//本行少插入一个元素,因为cell已经算是本行的一个元素
          for(let m=1; m < colSpan; m++){
            markdownMatrix[i+k].splice(j+1, 0, cell);
          }
        }else{
          let insertIndex = markdownMatrix[i+k].length - distanceToEndColumn;
          for(let m=1; m <= colSpan; m++){
            markdownMatrix[i+k].splice(insertIndex + 1, 0, cell);
          }
        }
      }
    }   
  }  

  //生成markdown表格
  let markdown = "|" + markdownMatrix[0].map(cell => cell.textContent.trim() || " ").join("|") + "|" + newLineChar;  
  markdown += "|" + "--- ".repeat(markdownMatrix[0].length).split(' ').join("|") + newLineChar; 
  for (let row of markdownMatrix.slice(1)) {  
      markdown += "|" + row.map(cell => cell.textContent.trim() || " ").join("|") + "|" + newLineChar;
  }  
  return markdown;  
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值