解析markdown生成目录

2021年03月16日 · Markdown

[TOC]

解析markdown自动生成目录

[TOC]不是会自动生成目录吗？

使用方案

代码实现

正则表达式匹配标签

function(value){
    let maxs = /<[Hh]([1-6])[^>]*>.*?[^/]+/g;
    let node = value.match(maxs);
}

处理匹配数据

function(node){
    let min = 10000;
    for(let i = 0; i < node.length; i++){
      let x = node[i];
      let index = parseInt(x[2]);
      let idx = x.indexOf('"');
      x = x.substring(idx + 1, (x.length));
      idx = x.indexOf('"');

      if(idx > 0){
        x = x.substring(0, idx);
      }

      min = Math.min(min, index);
	  //全局变量
      this.nodes.push({
        index:index,
        id:x
      });
    }
    this.nodes.forEach(c=>{
      c.index -= min;
    })
}

使用a标签显示出来

<a
  style="text-decoration: none"
  :href="'#' + node.id"
  v-for="node in nodes"
  :key="node"
  ><font color="black"
    ><span style="margin-left: 15px" v-for="j in node.index" :key="j"
      ></span
    >-<br /></font
></a>
<!--注意：因为这里&nbsp;不生效所以使用margin-left来做缩进-->

最后的效果如右边所示

总结

← 返回首页