js提取文章中的h标签生成文章目录

使用Markdown编辑编写文章时，我们会使用h1-h6标签来定义章节标题，Markdown原生是以

‘#’ 号开始的，如果页面中，有两个一样的 ，比如都是 # 我是h1，那就不好获取里面的domid，要获取Markdown转换成html的数据

一.本人这边用的Markdown的转换插件是marked

npm i marked

二.拿到转换的html生成目录树

 const htmlData = `
            <h1 id="我是h1">我<strong>是</strong>h1<em>斜体</em>介绍</h1>
            <p>测试</p>
            <h2 id="我是h2">我是h2</h2>
            <p>测试</p>
            <h3 id="我是h3">我是h3</h3>
            <p>测试</p>
            <h4 id="我是h4">我是h4</h4>
            <p>测试</p>
            <h5 id="我是h5">我是h5</h5>
            <h1 id="我是h1-1">我是h1</h1>
            <p>测试</p>
            <h2 id="我是h2-1">我是h2</h2>
            <p>测试</p>
            <h3 id="我是h3-1">我是h3</h3>
            <p>测试</p>
            <h4 id="我是h4-1">我是h4</h4>
            <p>测试</p>
            <h5 id="我是h5-1">我是h5</h5>
            <h1 id="文档1管理">文档1管理</h1>
            <p>测试</p>
            <h2 id="文档2管理">文档2管理</h2>
            <p>测试</p>
            <h3 id="文档3管理">文档3管理</h3>
            <p>测试</p>
            <h4 id="文档4管理">文档4管理</h4>
            <p>测试</p>
            <h5 id="文档5管理">文档5管理</h5>
            <h1 id="文档1管理-1">文档1管理</h1>
            <p>测试</p>
            <h2 id="文档2管理-1">文档2管理</h2>
            <p>测试</p>
            <h3 id="文档3管理-1">文档3管理</h3>
            <p>测试</p>
            <h4 id="文档4管理-1">文档4管理</h4>
            <p>测试</p>
            <h5 id="文档5管理-1">文档5管理</h5>`;

    function getContentDirTree(htmlData) {
        if (!htmlData) {
            return [];
        }
        let hDomList = htmlData.match(
            /<h[1-6]{1}[^>]*>([\s\S]*?)<\/h[1-6]{1}>/g
        );
        if (!Array.isArray(hDomList)) {
            return [];
        }
        const dirTree = [];
        let preDir;
        hDomList.forEach((hDom, index) => {
            const startIndex = hDom.indexOf("id=\"");
            const endIndex = hDom.indexOf("\">");
            if (startIndex != -1 && endIndex != -1) {
                const domId = hDom.slice(startIndex + 4, endIndex);
                const re = /<h([1-6]{1})[^>]*>([\s\S]*?)<\/h[1-6]{1}>/
                let hLevel = Number(hDom.replace(re, "$1"));
                let titleContent = hDom.replace(re, "$2");
                // 有可能匹配到的是这样
                 //’我<strong>是</strong>h1<em>斜体</em>介绍‘ 
                //里面还有标签（直接去掉标签）
                let title = titleContent.replaceAll(/<([\s\S]*?)>|<\/([\s\S]*?)>/g, "");
                const currentDir = {
                    id: (index + 1),//用于点击的时候选中态
                    title,
                    domId,
                    hLevel
                }
                if (preDir) {
                    if (currentDir.hLevel > preDir.hLevel) {
                        currentDir.pid = preDir.id
                    } else if (currentDir.hLevel < preDir.hLevel) {
                        currentDir.pid = 0
                    } else {
                        currentDir.pid = preDir.pid
                    }
                } else {
                    currentDir.pid = 0;
                }
                preDir = currentDir;
                dirTree.push(currentDir)
            }
        })
        dirTree.forEach((item) => {
            if (item.pid !== 0) {
                const findParent = dirTree.find(i => i.id === item.pid);
                if (findParent) {
                    if (!Array.isArray(findParent.children)) {
                        findParent.children = []
                    }
                    findParent.children.push(item)
                }
            }
        })
        return dirTree.filter((i) => i.pid === 0);
    }

    const contentDirTree = getContentDirTree(htmlData);
    console.log(contentDirTree)

三.其他参考(可以参考里面的生成逻辑)

https://segmentfault.com/a/1190000040462508