Axure高保真教程：段落文字搜尋

來源：水果怎麼吃釋出時間：2023-03-19 06:10

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

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

一、效果展示

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

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

二、製作教程

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）滑鼠單擊輔助互動文字元件時

我們首先要判斷記其實哪一位的文字值是否為空。

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

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

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

這裡要根據到第幾個輔助文字來新增，例如搜尋到的詞只有一個，其實就是分割一次，然後加最後的文字內容，如果搜搜到的詞有兩個，就分割兩次，然後加上最後的文字內容……