markdown目录锚点遍历实现

目录具体实现使用的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; 
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值