记录利用js获取富文本目录

需求：根据富文本文章内容获取标题生成目录

<div id="content">
    <h1>标题1</h1>
    <p>段落1</p>
    <h2>标题2</h2>
    <p>段落2</p>
    <h3>标题3</h3>
    <p>段落3</p>
</div>
<div class="toc"></div>
<script>

 $(function() { // 获取所有的 h 标签

 var  headings = $('#content').find('h1,h2,h3,h4,h5,h6');

 if (headings.length) {

 var  tocHtml = '<ul>'; // 遍历所有获取到的 h 标签

 headings.each(function(i, heading) {

 var  id = $(heading).attr('id') || ('heading-' + i);

 $(heading).attr('id', id); // 子目录缩进

 var  indent = new  Array(parseInt(heading.tagName.substring(1)) - 1).join('&nbsp;&nbsp;');

 tocHtml += '<li>' + indent + '< a href="#' + id + '">' + $(heading).text() + '</ a></li>';

            });

 tocHtml += '</ul>';

 $('.toc').html(tocHtml); // 点击目录跳转至对应位置

 $('.toc a').click(function(e) {

 e.preventDefault();

 var  target = $($(this).attr('href'));

 $('html,body').animate({

 scrollTop:  target.offset().top

}, 500);

            });

        }

    });

</script>

科技改变生活，后端仔网上找了几个方案不太合适，要不是得服务端做正则，要不是缺少递归，直接chatgpt把我问题解决了

本作品采用《CC 协议》，转载必须注明作者和本文链接