在文檔或系統中，經常會用到文字搜索的功能，輸入文字內容，快速定位出搜索文字所在的位置。本文作者分享了在Axure中如何快速定位并標記段落文字的方法，一起來看一下吧。

在文檔或者系統中，我們經常會用到文字搜索的功能，輸入文字內容搜索，快速定位出搜索文字所在的位置，并且用對應的顏色標記出來。那今天作者就教大家在Axure中如何在段落文字中，快速定位并標記段落文字。

一、效果展示

1、輸入關鍵字、詞、句進行搜索，在段落中快速找到對應內容并且將文字顏色標紅；

2、模板使用只需要替換段落中的文字，預覽時即可包含搜索關鍵詞高亮回顯的效果。

原型地址：https://2mwoa3.axshare.com/#g=1

二、制作教程

1. 材料準備

這個模板其實材料挺簡單的，主要包含輸入框元件、搜索圖標、文本段落元件、文本標簽。其他材料可以按需增加。

輸入框：我們可以設置提交按鈕為搜索圖標，輸入完成后按鍵盤回車鍵相當于鼠標單擊搜索圖片。

文本段落元件：分為原始文本和輔助文本，原始文本默認顯示，把文本內容輸入進去即可；輔助文本用于后續輔助交互，默認值為空，默認隱藏即可。

文本標簽：主要用于邏輯處理，默認隱藏，包括記錄搜索文本出現的位置、記錄前面文本的文字、輔助交互文本（根據需要添加，如果搜索詞在案例中多次出現，就要準備多個，案例中為10個，一般情況都通用，后續可以根據自身需求增加）。

2. 思路講解

其實這個模板主要用到文字拆分的思路，例如唧唧復唧唧，木蘭當戶織，這里搜索木蘭，我們就要把文本分割，前面是唧唧復唧唧，是前文本，當戶織是后文本，然后在通過設置文本中的富文本，將中間搜索的木蘭設置為紅色字體。

所以這里主要用到幾個函數：

indexof函數：可以找出第一個搜索詞出現在第幾位，例如木蘭出現在第6位；

length函數：可以獲取搜索文本的長度，例如木蘭的長度為2；

slice函數：可以對文本進行切割，例如提取木蘭前面的唧唧復唧唧，是slice(0,6)，提取木蘭后面的當戶織是slice(8)，這樣我們用設置文本就可以看成3段，只需要把這三段憑借起來，然后中間搜索詞設置字體顏色為紅色即可。

當然這種是文本段落只有一個關鍵詞的情況，如果有多個關鍵詞的思路其實也是一樣，就是循環切割分段，直至文本里沒有找到搜索詞位為止。

3. 設置交互

1）鼠標單擊搜索按鈕時

我們用設置文本的交互，將記錄在哪一位的文本設置為空，設置前面位置的文本為0，這一步相當于還原重置的操作。

然后我們用設置文本的交互，將原始文本的的值，設置到輔助文本里，我們會通過輔助文本進行文字切割。

然后設置設置原始文本為他本身的值，這一步是做了一個針對輸入框內容為空的的處理。

最后觸發輔助文本單擊時的交互，我們在輔助文本內處理分割文字。

2）鼠標單擊輔助文本時

我們需要分兩種情況：

①文本段落里包含搜索詞

這時我們就要對文字進行處理了，我們用indexof函數先找出搜索詞在哪一位；

然后我們要記錄前面的位置，就是前面文本的長度，其實就是第一段內容有多長，就是第一個搜索詞的位置+搜索詞的長度。

最后對段落文本設置，設置為搜索詞第一次出現后面的內容，這里我們用slice提取就可以了。

完成后我們要再次觸發該交互，相當于一個循環判斷，直到搜索詞被分隔完才會結束。

這里我們還要用特殊符號例如|對記錄在哪一個隔開，例如木蘭出現了三次，分別是6、18、32的位置，那我們設置文本的時候，就記錄為|32|18|6，后續我們會對這個文本再次處理。

記錄前面文本的位置，在第二次的時候我們還要加上第一次的值，因為設置輔助文本的時候，我們把第一個搜索詞和前面的部分都去剔除了，所以我們要+剔除掉的長度才是真正文本的位置，所以我們在設置記錄前面位置的文本要+他原來記錄的值。

②文本段落里不包含搜索詞

這樣相當于分隔完成，我們用觸發記錄在哪一個位元件鼠標單擊時的交互。

3）鼠標單擊記錄在哪一個位元件時

我們用先用設置文本的交互，將原始文本的值設置到輔助文本上，因為后續就要通過輔助文本重新提取并設置回原始文本內。

然后用觸發的交互，觸發第一個鼠標單擊時第一個輔助交互文本鼠標單擊時的交互。

4）鼠標單擊輔助交互文本元件時

我們首先要判斷記錄在哪一位的文本值是否為空。

如果不為空，就是沒有設置完成，例如文本還是|32|18|6，我們用設置文本的交互，將最后一位|后面的數字提取數來，例如上面的6，記錄在1文本的位置；然后在設置記錄在哪一位的文本為最后一位|前面的文本，例如|32|18，然后出發第二個輔助文本元件鼠標單擊時的交互。

第二個輔助元件的思路和第一個是一樣的，就是分開記錄搜索文本出現的位置，這里也是相當于一個循環，案例中是用了10個輔助文本，最多可以標記出10個搜索文字，一般情況都夠用，如果不夠，可以用通用的方法增加。

如果在哪一位的文本值是否為空，就是提取完成了。

這是我們可以用設置文本的交互，將值設置回原始文本，這里要選擇富文本，因為富文本可以設置對應文字的樣式。設置的內容是從輔助文本里，0-第一個輔助元件的值（第一個搜索詞前面的位置）+第一個搜索詞所在位置（就是第一個輔助元件的值+搜索詞的長度）這里要用紅色文字顯示+后面到第二個搜索詞之前的部分……+最后面的文本部分。

這里要根據到第幾個輔助文本來添加，例如搜索到的詞只有一個，其實就是分割一次，然后加最后的文本內容，如果搜搜到的詞有兩個，就分割兩次，然后加上最后的文本內容……

這樣我們就制作完成了段落文字搜索（高亮搜索）效果的原型模板了，下次使用時，只需要在修改原始文本的文字內容，預覽時即可自動生成高亮搜索的交互效果。

那以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。