最近在研發(fā)多模態(tài)文檔編輯器(flowmix/docx)的時(shí)候，遇到一個(gè)比較有意思的功能需求——實(shí)現(xiàn)全文的搜索和替換，比如下面的功能場(chǎng)景：

圖片

總結(jié)一下就是我們需要實(shí)現(xiàn)如下核心功能：

• 全文搜索并對(duì)搜索文本進(jìn)行高亮處理
• 支持搜索結(jié)果自動(dòng)定位和切換
• 支持對(duì)搜索的文本進(jìn)行一鍵替換

我的第一反應(yīng)就是采用 selection API 來(lái)實(shí)現(xiàn)文本的匹配搜索。

圖片

Selection對(duì)象表示用戶選擇的文本范圍或插入符號(hào)的當(dāng)前位置。它代表頁(yè)面中的文本選區(qū)，可能橫跨多個(gè)元素。文本選區(qū)由用戶拖拽鼠標(biāo)經(jīng)過(guò)文字而產(chǎn)生。要獲取用于檢查或修改的 Selection 對(duì)象，我們可以調(diào)用 window.getSelection()。

從瀏覽器兼容性上來(lái)看 selection API 還是非?？孔V的，目前很多云文檔編輯器大多類似的功能也都采用這個(gè)JS API來(lái)實(shí)現(xiàn)的。

所以順藤摸瓜，開(kāi)源市場(chǎng)上一定也有比較成熟的開(kāi)源庫(kù)可以幫助們實(shí)現(xiàn)類似的功能，所以我花時(shí)間調(diào)研了幾款比較成熟的文本搜索高亮的庫(kù)， 方便大家更高效的實(shí)現(xiàn)類似的功能。

1. mark.js

圖片

markjs 是一個(gè)用 JavaScript 編寫(xiě)的文本高亮工具。

它具有以下特點(diǎn)：

1. 可以動(dòng)態(tài)標(biāo)記搜索詞或自定義正則表達(dá)式??。
2. 提供了眾多內(nèi)置選項(xiàng)，如支持變音字符、單獨(dú)單詞搜索、自定義同義詞、iframe 支持、自定義過(guò)濾器、準(zhǔn)確性定義、自定義元素、自定義類名等。
3. 提供多種使用方式，可配合純 JavaScript 使用或作為 jQuery 插件。
4. 下載方式多樣，可通過(guò) npm 或 Bower 安裝，也可手動(dòng)下載。
5. 提供 CDN 服務(wù)，方便使用。
6. API 豐富，包括初始化實(shí)例、標(biāo)記關(guān)鍵詞（mark ()）、標(biāo)記自定義正則表達(dá)式（markRegExp ()）、標(biāo)記范圍（markRanges ()）、去除標(biāo)記（unmark ()）等方法，每個(gè)方法都有詳細(xì)的參數(shù)說(shuō)明??。
7. 兼容性好，可在所有現(xiàn)代瀏覽器中使用。
8. 提供教程，詳細(xì)解釋了一些可能不太容易理解的選項(xiàng)，如元素和類名、排除、單獨(dú)單詞搜索、準(zhǔn)確性、變音符號(hào)等。

如果大家感興趣可以在github上參考體驗(yàn)一下：

github地址：https://github.com/julmot/mark.js

2. texthighlighter

Text Highlighter 是一個(gè)輕量級(jí)JavaScript類，用于在文本區(qū)域高亮顯示搜索結(jié)果。支持多文本區(qū)域、響應(yīng)式設(shè)計(jì)和原始背景保留。提供大小寫(xiě)敏感搜索、單詞匹配、結(jié)果計(jì)數(shù)和導(dǎo)航功能。無(wú)需配置，簡(jiǎn)單易用，適用于需要增強(qiáng)文本搜索體驗(yàn)的網(wǎng)頁(yè)應(yīng)用。

github地址：https://github.com/funktechno/texthighlighter

3. Vue-Search-Highlight

圖片

vue-search-highlight 是一款基于Vue實(shí)現(xiàn)的搜索高亮組件，支持HTML內(nèi)容跨標(biāo)簽匹配關(guān)鍵字。我們可以使用組件的方式來(lái)使用，非常簡(jiǎn)單，下面是它的安裝和實(shí)現(xiàn)方式：

圖片

如果大家熟悉vue， 也可以參考學(xué)習(xí)這款開(kāi)源項(xiàng)目。

github地址：https://github.com/wintc23/vue-search-highlight

以上這些是我發(fā)現(xiàn)的能通過(guò)二次開(kāi)發(fā)快速實(shí)現(xiàn)文本搜索高亮的方案，當(dāng)然目前瀏覽器還有些比較新的特性，可以通過(guò)css來(lái)實(shí)現(xiàn)內(nèi)容的搜索高亮，官方名稱叫做 CSS Custom Highlight API，有了它，我們可以在不改變 dom 結(jié)構(gòu)的情況下自定義任意文本的樣式，例如：

圖片

這上面是我在MDN上寫(xiě)的一個(gè)案例， 確實(shí)只需要幾行代碼就能實(shí)現(xiàn)文本搜索高亮，感興趣的小伙伴也可以研究一下， 筆者親測(cè)瀏覽器兼容性不是特別好， 所以大家要謹(jǐn)慎使用。

最后

后續(xù)我們也會(huì)在flowmix/docx多模態(tài)文檔編輯器中實(shí)現(xiàn)全文搜索高亮的功能，大家可以參考我上面提供的幾種方案，來(lái)低成本高效率的實(shí)現(xiàn)需求。

最近我們做了一款文檔管理類Saas系統(tǒng), 底層基于 Flowmix/Docx 多模態(tài)文檔引擎, 這里簡(jiǎn)單和大家分享一下:

圖片

大家可以注冊(cè)使用來(lái)管理自己的內(nèi)容知識(shí)文檔, 同時(shí)能一鍵生成自己的專屬知識(shí)庫(kù).  

體驗(yàn)地址: http://orange.turntip.cn/doc

每個(gè)月我們都會(huì)根據(jù)用戶的需求和規(guī)劃的迭代計(jì)劃持續(xù)迭代, 大家可以關(guān)注 flowmix視界 獲取最新更新的信息。

當(dāng)然從體驗(yàn)上來(lái)講, 我們會(huì)持續(xù)優(yōu)化和迭代, 并結(jié)合業(yè)界最佳體驗(yàn)實(shí)踐, 將文檔搭建能力發(fā)揮出最大的價(jià)值.

圖片

編輯器版本體驗(yàn)地址: http://flowmix.turntip.cn/docx