平平博客平平博客
user side
平平
pingping@pingping6.com
平平网络pingping6.com

js元素遍历与正则实现文章自动目录

网站教程2020-03-28 321  0 
摘要:需求分析需求  平平在写milk主题的时候,发现文章太长的时候没有目录...

需求分析

需求

    平平在写milk主题的时候,发现文章太长的时候没有目录非常的不方便。虽然市面上有生成目录插件,但是兼容性差,代码冗余大,不够方便!

作用

    通过js实现对文章自动生成目录。

实现方法

    js元素遍历查询,正则表达式筛选,本文以js元素遍历查询为例子,以h2与h3标签为文章目录作展示。

代码思路

顺序遍历

    通过对文章内容h2与h3标签查询遍历,直接生成目录。
    部分代码:
let  titleh=$(".content h2,.content h3");
if(titleh.length>0){
 titleh.each(function(){
  console.log("目录:"+$(this).text()+",序号:"+$(this).index());
 });
}

后代遍历

    通过对文章内容h2标签查询遍历,对每一个h2标签查询其所有子元素,若为h3插入到父级目录,若不为h3,跳出循环,重复上一步骤。
    部分代码:
let titleh2=$(".content h2");
if (titleh2.length > 0 ) {
  titleh2.each(function(){
    console.log("目录:"+$(this).text()+",序号:"+$(this).index()+",子目录:");
    let titleh3=$(this).nextAll();
    if(titleh3.length > 0 && $(this).next().is('h3')){
      titleh3.each(function(){
        if(!$(this).is('h3')) return false;
          console.log("目录:"+$(this).text()+",序号:"+$(this).index());
      });
    }else{
       console.log("目录:"+$(this).text()+",序号:"+$(this).index());
    }
  });
}

两者优缺点

    顺序遍历简单,只需要查询出所有h2与h3按顺序生成目录即可,后代遍历兼容性好,不会出现不可预料的错误,如:把其他标签插入目录或者位置错误。

总结

    思路非常简单,代码也非常简单,重要的是需要自己实践,不能所有都依靠插件。
继续阅读
标签:主题milkjqjshtmlweb前端web前端目录遍历正则
写代码真的很累!麻烦点个赞,评论一下,然后分享给自己的小伙伴!
打赏
海报分享
发表评论
表情
快捷
私密

右滑验证