JavaScript之生成文章大纲

根据一片文章，获取里面的 h1,h2,h3,h4,h5,h6,h7 自动生成文章的大纲。如下图：

1、js写法

/**
         * 生成随机数
         * @param len 长度
         * @constructor
         */
        function randomString(len) {
            len = len || 32;
            /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
            var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
            var maxPos = $chars.length;
            var pwd = '';
            for (i = 0; i < len; i++) {
                pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        }
        /**
         * 标题元素
         * @param tag 标签，h1 ==> 1 , h2 ==> 2
         * @param title 标题
         * @param level 层级
         * @param id 随机生成的id
         * @constructor
         */
        function TitleElement(tag,title,level,id) {
            this.tag = tag;
            this.title = title;
            this.level = level;
            this.id = id;
        }
        /**
         * 是否是标题元素
         */
        function isTitleTag($tag) {
            if($tag.is("h1")){
                return true;
            }
            if($tag.is("h2")){
                return true;
            }
            if($tag.is("h3")){
                return true;
            }
            if($tag.is("h4")){
                return true;
            }
            if($tag.is("h5")){
                return true;
            }
            if($tag.is("h6")){
                return true;
            }
            if($tag.is("h7")){
                return true;
            }
            return false;
        }
        /**
         * 生成大纲
         * @param $articleContent 文章容器
         * @constructor
         */
        function getOutline($articleContent) {

            /** 全部元素 */
            var $eles = $articleContent.find("*");

            /** 标题元素列表 */
            var titleElementArr = new Array();

            /** 上一个元素 */
            var preTitleElement = null;

            $.each($eles,function (index,item) {

                if(isTitleTag($(item))){

                    var id = randomString(20);
                    var level = 1;
                    var tag = parseInt($(item).get(0).tagName.replace('h',"").replace('H',""));
                    var title = $(item).text();

                    if( null != preTitleElement){
                        var tagPre = preTitleElement.tag;
                        var levelPre = preTitleElement.level;

                        if(tagPre > tag){
                            level = levelPre - 1;
                        }else if(tagPre < tag){
                            level = levelPre + 1;
                        }else{
                            level = levelPre;
                        }

                    }

                    if( title.trim().length > 0 ){

                        $(item).attr("id",id);

                        var titleElement = new TitleElement(tag,title,level,id);

                        titleElementArr.push(titleElement);

                        preTitleElement = titleElement;

                    }


                }

            })

            return titleElementArr;
        }

        /** 获取大纲数组 */
        var outline = getOutline($('.modong-doc-content'));
        /** 大纲容器 */
        var $outlineBox = $(".directoryUL");
        /** 大纲结果 */
        var _outlineHtml = '';
        /** 生成结果 */
        $.each(outline,function(index,item){
            var thisID = item.id;
            var thisTitle = item.title;
            var thisTag = item.tag;

            _outlineHtml += '<li class="directory-item">'+
                '<a class="directory-item-link directory-item-link-'+thisTag+'" title="'+thisTitle+'" href="#'+thisID+'">'+
                    '<span>'+thisTitle+'</span>'+
                '</a>'+
            '</li>';
        });
        /** 放入大纲容器 */
        $outlineBox.html(_outlineHtml);

2、html写法

<div class="modong-doc-content">
  ...
   /** 文章内容，带了H1、H2标签 */
</div>

<nav class="doc-page-nav">
  <div class="doc-page-nav-toc">
    <div class="toc" style="height: 270px;">
      <ul class="directoryUL">

      </ul>
    </div>
  </div>
</nav>