用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