使用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;
复制代码