三款開源全文搜索高亮插件，輕松實現(xiàn)文檔搜索功能
最近在研發(fā)多模態(tài)文檔編輯器(flowmix/docx)的時候，遇到一個比較有意思的功能需求——實現(xiàn)全文的搜索和替換，比如下面的功能場景：
圖片
總結一下就是我們需要實現(xiàn)如下核心功能：
- 全文搜索并對搜索文本進行高亮處理
- 支持搜索結果自動定位和切換
- 支持對搜索的文本進行一鍵替換
我的第一反應就是采用 selection API 來實現(xiàn)文本的匹配搜索。
圖片
Selection對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區(qū)，可能橫跨多個元素。文本選區(qū)由用戶拖拽鼠標經(jīng)過文字而產(chǎn)生。要獲取用于檢查或修改的 Selection 對象，我們可以調(diào)用 window.getSelection()。
從瀏覽器兼容性上來看 selection API 還是非?？孔V的，目前很多云文檔編輯器大多類似的功能也都采用這個JS API來實現(xiàn)的。
所以順藤摸瓜，開源市場上一定也有比較成熟的開源庫可以幫助們實現(xiàn)類似的功能，所以我花時間調(diào)研了幾款比較成熟的文本搜索高亮的庫， 方便大家更高效的實現(xiàn)類似的功能。
1. mark.js
圖片
markjs 是一個用 JavaScript 編寫的文本高亮工具。
它具有以下特點：
- 可以動態(tài)標記搜索詞或自定義正則表達式??。
- 提供了眾多內(nèi)置選項，如支持變音字符、單獨單詞搜索、自定義同義詞、iframe 支持、自定義過濾器、準確性定義、自定義元素、自定義類名等。
- 提供多種使用方式，可配合純 JavaScript 使用或作為 jQuery 插件。
- 下載方式多樣，可通過 npm 或 Bower 安裝，也可手動下載。
- 提供 CDN 服務，方便使用。
- API 豐富，包括初始化實例、標記關鍵詞（mark ()）、標記自定義正則表達式（markRegExp ()）、標記范圍（markRanges ()）、去除標記（unmark ()）等方法，每個方法都有詳細的參數(shù)說明??。
- 兼容性好，可在所有現(xiàn)代瀏覽器中使用。
- 提供教程，詳細解釋了一些可能不太容易理解的選項，如元素和類名、排除、單獨單詞搜索、準確性、變音符號等。
如果大家感興趣可以在github上參考體驗一下：
github地址：https://github.com/julmot/mark.js
2. texthighlighter
Text Highlighter 是一個輕量級JavaScript類，用于在文本區(qū)域高亮顯示搜索結果。支持多文本區(qū)域、響應式設計和原始背景保留。提供大小寫敏感搜索、單詞匹配、結果計數(shù)和導航功能。無需配置，簡單易用，適用于需要增強文本搜索體驗的網(wǎng)頁應用。
github地址：https://github.com/funktechno/texthighlighter
3. Vue-Search-Highlight
圖片
vue-search-highlight 是一款基于Vue實現(xiàn)的搜索高亮組件，支持HTML內(nèi)容跨標簽匹配關鍵字。我們可以使用組件的方式來使用，非常簡單，下面是它的安裝和實現(xiàn)方式：
圖片
如果大家熟悉vue， 也可以參考學習這款開源項目。
github地址：https://github.com/wintc23/vue-search-highlight
以上這些是我發(fā)現(xiàn)的能通過二次開發(fā)快速實現(xiàn)文本搜索高亮的方案，當然目前瀏覽器還有些比較新的特性，可以通過css來實現(xiàn)內(nèi)容的搜索高亮，官方名稱叫做 CSS Custom Highlight API，有了它，我們可以在不改變 dom 結構的情況下自定義任意文本的樣式，例如：
圖片
這上面是我在MDN上寫的一個案例， 確實只需要幾行代碼就能實現(xiàn)文本搜索高亮，感興趣的小伙伴也可以研究一下， 筆者親測瀏覽器兼容性不是特別好， 所以大家要謹慎使用。
最后
后續(xù)我們也會在flowmix/docx多模態(tài)文檔編輯器中實現(xiàn)全文搜索高亮的功能，大家可以參考我上面提供的幾種方案，來低成本高效率的實現(xiàn)需求。
最近我們做了一款文檔管理類Saas系統(tǒng), 底層基于 Flowmix/Docx 多模態(tài)文檔引擎, 這里簡單和大家分享一下:
圖片
大家可以注冊使用來管理自己的內(nèi)容知識文檔, 同時能一鍵生成自己的專屬知識庫.
體驗地址: http://orange.turntip.cn/doc
每個月我們都會根據(jù)用戶的需求和規(guī)劃的迭代計劃持續(xù)迭代, 大家可以關注 flowmix視界 獲取最新更新的信息。
當然從體驗上來講, 我們會持續(xù)優(yōu)化和迭代, 并結合業(yè)界最佳體驗實踐, 將文檔搭建能力發(fā)揮出最大的價值.
圖片
編輯器版本體驗地址: http://flowmix.turntip.cn/docx
