使用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