目录具体实现使用的antd
代码主要是把markdown文件中的标题取出来,按照层级关系遍历,转化成antd中Anchor的实现形式
比如,markdown文件中标题是一下形式
<a id="1" style="position: relative;top: -120px;">1</a>
<a id="2" style="position: relative;top: -90px;">2</a>
<a id="2.1" style="position: relative;top: -90px;">2.1</a>
转换成以下这种形式
<Link href="#1" title="1" key="1"></Link>
<Link href="#2" title="2" key="2">
<Link href="#2.1" title="2.1" key="2.1"></Link>
</Link>
实现代码
import React from 'react'
import { Anchor } from 'antd';
const { Link } = Anchor;
/**
* @param {string} text 读取的md文件内容字符串
*/
export function traverseLink(text){
//匹配a标签
let aReg = /<a\b[^>]+[^>]*>([\s\S]*?)<\/a>/g;
let map = text.match(aReg);
//匹配id
let idReg = /id="([\s\S]*?)"/;
let ids = map ? map.map(a => {
let result = a.match(idReg)
return result && result[1]
}) : [];
//匹配title
let titleReg = />([\s\S]*?)</
let titles = map ? map.map(a => {
let result = a.match(titleReg)
return result && result[1]
}) : [];
let targetLink =[];
let tree = {root:true};
function transfer(node,arr,index){
if(arr.length === 0){
return;
}else{
//子节点
if(node[arr[0]]){
transfer(node[arr[0]],arr.slice(1),index)
}else{
//根节点
node[arr[0]]={
title:titles[index],
id:ids[index],
};
transfer(node[arr[0]],arr.slice(1),index)
}
}
}
ids.forEach((id,i)=>{
let temp = id ? id.replace(/\s+/g,"").split('.'): '';
transfer(tree,temp,i);
})
function transLink(node,result){
let temp = [];
for(let key in node){
if(key !== 'title' && key !== 'id' && key !== 'root'){
transLink(node[key],temp);
}
}
result.push(
!node.root?
<Link href={"#"+node.id} title={node.title} key={node.id}>
{temp}
</Link>
:temp
)
}
transLink(tree,targetLink);
return targetLink;
}