使用js根据<H>标签获取文章目录

发布: 2020-07-27 00:47:22 标签: 前端开发

使用js根据标签获取文章目录

使用递归重写文章侧边栏目录生成方法

js代码

01// 获取H标签等级
02const getLevel = item => (item.match(/<h(\d+)/) || [])[1];
03
04// 获取H标签内容
05const getText = item => item.replace(/<[^>]+>/g, "");
06
07// 获取目录html
08function getTocHtml(html) {
09 const data = (html.match(/<h[1-6](.*)?<\/h[1-6]>/g) || []).map(item => ({
10 text: getText(item),
11 level: getLevel(item)
12 }));
13 let i = 0; // 循环下标
14
15 const getLiText = text => {
16 const href = `toc-link-${i}`;
17 return `\n<li><a name="link" class="toc-link ${href}" href="#${href}">${text}</a></li>\n`;
18 };
19 const getULText = text => (text ? `<ul class="toc-list">${text}</ul>\n` : "");
20
21 function createInner(item, data) {
22 let str = getLiText(item.text);
23 while (data.length && data[0].level >= item.level) {
24 i += 1;
25 const it = data.shift();
26 if (it.level === item.level) {
27 // 添加一个li
28 str += getLiText(it.text);
29 } else {
30 // 添加li内的ul
31 str += createInner(it, data);
32 }
33 }
34 return getULText(str);
35 }
36 // 防止出现先小等级标签在大等级标签下边的情况
37 let resStr = ''
38 while (data.length) {
39 resStr += createInner(data.shift(), data)
40 i += 1
41 }
42 return resStr
43}
44
45export default getTocHtml;
复制代码