用React實現一個自動生成文章目錄的組件

原文地址：小寒的博客

 

功能介紹

這個組件的效果吶，就是你在瀏覽這個頁面的時候點擊右上角的叉叉看到的那個文章目錄。

 

 

功能很簡單，就是根據文章內容自動生成這個目錄，可以快速跳轉。

需要的知識點

• 正則
• dom操作
• 利用錨點跳轉

實現原理

1. 首先我們拿到的是一個html字符串，並不是html哦，然后分析這個html字符串，獲取所有的h1 h2 h3 h4 h5 h6的生成一個錨點信息的列表
2. 然后給所有的這些標題標記一個id，用來進行錨點的跳轉
3. 渲染目錄

 

正則

正則是基礎中最難學和應用的一部分，但作為處理字符串最高效的一個方式，也是開發者進階必不可少的知識點。

獲取所有 h1-h6 標簽的正則

/<(h\d).*?>.*?<\/h\d>/

<(h\d).*?>是第一個標簽 \d表示數字 ，注意這個有個括號，用來分組匹配，這個分組可以獲得這個標簽

.*表示一個標簽的內容，不管是什么

?表示非貪婪的，抓夠就撤退

<\/h\d>是結尾的標簽

 String.prototype.replace

content.replace(/<(h\d)>.*?<\/h\d>/g, (match, tag) => {
  const hash = match.replace(/<.*?>/g, '')
  tables.push({ hash, tag })
  return `<a class="blog-content-anchor" href="#${hash}" id="${hash}">${match}</a>`
})

 

replace方法接受的第一個參數就是這個正則，第二個是一個匹配的函數，參數的第一個是匹配的結果，第二個就是分組匹配的結果

hash就是標題的內容，比如

 

<h1>我是標題</h1>

就會被轉化成

<a class="blog-content-anchor" href="#我是標題" id="我是標題"><h1>我是標題</h1></a>

 

所以我們可以用tables記錄這個目錄的信息，包括作為hash的標題內容和他的標簽，即他是h1還是h2還是h3，現在就可以實現點擊標題，自動定位到這個標題了

而此時生成的tables應該是這個樣子 

 

渲染

{tables.length > 0 &&
   <Drawer>
     <div className="blog-table" ref={this.table}>
        <h4>目錄</h4>
        {tables.map(({ hash, tag }, index) => (
           <div key={index} className="blog-table-item">
              <a
               className={"blog-table-item-" + tag}
               href={'#' + hash}
               onClick={e => this.handleScroll(e, hash)}
              >{hash}</a>
           </div>
        ))}
      </div>
   </Drawer>
 }

既然拿到目錄的信息，就可以生成目錄了

大功告成，最后吶，貼上我的源代碼，供大家參考

https://github.com/soWhiteSoColl/blog-web/blob/master/components/widgets/Blog.jsx