在文檔或系統(tǒng)中，經(jīng)常會(huì)用到文字搜索的功能，輸入文字內(nèi)容，快速定位出搜索文字所在的位置。本文作者分享了在Axure中如何快速定位并標(biāo)記段落文字的方法，一起來(lái)看一下吧。

在文檔或者系統(tǒng)中，我們經(jīng)常會(huì)用到文字搜索的功能，輸入文字內(nèi)容搜索，快速定位出搜索文字所在的位置，并且用對(duì)應(yīng)的顏色標(biāo)記出來(lái)。那今天作者就教大家在Axure中如何在段落文字中，快速定位并標(biāo)記段落文字。

一、效果展示

1、輸入關(guān)鍵字、詞、句進(jìn)行搜索，在段落中快速找到對(duì)應(yīng)內(nèi)容并且將文字顏色標(biāo)紅；

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

二、制作教程

1. 材料準(zhǔn)備

這個(gè)模板其實(shí)材料挺簡(jiǎn)單的，主要包含輸入框元件、搜索圖標(biāo)、文本段落元件、文本標(biāo)簽。其他材料可以按需增加。

輸入框：我們可以設(shè)置提交按鈕為搜索圖標(biāo)，輸入完成后按鍵盤(pán)回車鍵相當(dāng)于鼠標(biāo)單擊搜索圖片。

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

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

2. 思路講解

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

所以這里主要用到幾個(gè)函數(shù)：

indexof函數(shù)：可以找出第一個(gè)搜索詞出現(xiàn)在第幾位，例如木蘭出現(xiàn)在第6位；

length函數(shù)：可以獲取搜索文本的長(zhǎng)度，例如木蘭的長(zhǎng)度為2；

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

當(dāng)然這種是文本段落只有一個(gè)關(guān)鍵詞的情況，如果有多個(gè)關(guān)鍵詞的思路其實(shí)也是一樣，就是循環(huán)切割分段，直至文本里沒(méi)有找到搜索詞位為止。

3. 設(shè)置交互

1）鼠標(biāo)單擊搜索按鈕時(shí)

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

然后我們用設(shè)置文本的交互，將原始文本的的值，設(shè)置到輔助文本里，我們會(huì)通過(guò)輔助文本進(jìn)行文字切割。

然后設(shè)置設(shè)置原始文本為他本身的值，這一步是做了一個(gè)針對(duì)輸入框內(nèi)容為空的的處理。

最后觸發(fā)輔助文本單擊時(shí)的交互，我們?cè)谳o助文本內(nèi)處理分割文字。

2）鼠標(biāo)單擊輔助文本時(shí)

我們需要分兩種情況：

①文本段落里包含搜索詞

這時(shí)我們就要對(duì)文字進(jìn)行處理了，我們用indexof函數(shù)先找出搜索詞在哪一位；

然后我們要記錄前面的位置，就是前面文本的長(zhǎng)度，其實(shí)就是第一段內(nèi)容有多長(zhǎng)，就是第一個(gè)搜索詞的位置+搜索詞的長(zhǎng)度。

最后對(duì)段落文本設(shè)置，設(shè)置為搜索詞第一次出現(xiàn)后面的內(nèi)容，這里我們用slice提取就可以了。

完成后我們要再次觸發(fā)該交互，相當(dāng)于一個(gè)循環(huán)判斷，直到搜索詞被分隔完才會(huì)結(jié)束。

這里我們還要用特殊符號(hào)例如|對(duì)記錄在哪一個(gè)隔開(kāi)，例如木蘭出現(xiàn)了三次，分別是6、18、32的位置，那我們?cè)O(shè)置文本的時(shí)候，就記錄為|32|18|6，后續(xù)我們會(huì)對(duì)這個(gè)文本再次處理。

記錄前面文本的位置，在第二次的時(shí)候我們還要加上第一次的值，因?yàn)樵O(shè)置輔助文本的時(shí)候，我們把第一個(gè)搜索詞和前面的部分都去剔除了，所以我們要+剔除掉的長(zhǎng)度才是真正文本的位置，所以我們?cè)谠O(shè)置記錄前面位置的文本要+他原來(lái)記錄的值。

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

這樣相當(dāng)于分隔完成，我們用觸發(fā)記錄在哪一個(gè)位元件鼠標(biāo)單擊時(shí)的交互。

3）鼠標(biāo)單擊記錄在哪一個(gè)位元件時(shí)

我們用先用設(shè)置文本的交互，將原始文本的值設(shè)置到輔助文本上，因?yàn)楹罄m(xù)就要通過(guò)輔助文本重新提取并設(shè)置回原始文本內(nèi)。

然后用觸發(fā)的交互，觸發(fā)第一個(gè)鼠標(biāo)單擊時(shí)第一個(gè)輔助交互文本鼠標(biāo)單擊時(shí)的交互。

4）鼠標(biāo)單擊輔助交互文本元件時(shí)

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

如果不為空，就是沒(méi)有設(shè)置完成，例如文本還是|32|18|6，我們用設(shè)置文本的交互，將最后一位|后面的數(shù)字提取數(shù)來(lái)，例如上面的6，記錄在1文本的位置；然后在設(shè)置記錄在哪一位的文本為最后一位|前面的文本，例如|32|18，然后出發(fā)第二個(gè)輔助文本元件鼠標(biāo)單擊時(shí)的交互。

第二個(gè)輔助元件的思路和第一個(gè)是一樣的，就是分開(kāi)記錄搜索文本出現(xiàn)的位置，這里也是相當(dāng)于一個(gè)循環(huán)，案例中是用了10個(gè)輔助文本，最多可以標(biāo)記出10個(gè)搜索文字，一般情況都?jí)蛴?，如果不夠，可以用通用的方法增加?/p>

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

這是我們可以用設(shè)置文本的交互，將值設(shè)置回原始文本，這里要選擇富文本，因?yàn)楦晃谋究梢栽O(shè)置對(duì)應(yīng)文字的樣式。設(shè)置的內(nèi)容是從輔助文本里，0-第一個(gè)輔助元件的值（第一個(gè)搜索詞前面的位置）+第一個(gè)搜索詞所在位置（就是第一個(gè)輔助元件的值+搜索詞的長(zhǎng)度）這里要用紅色文字顯示+后面到第二個(gè)搜索詞之前的部分……+最后面的文本部分。

這里要根據(jù)到第幾個(gè)輔助文本來(lái)添加，例如搜索到的詞只有一個(gè)，其實(shí)就是分割一次，然后加最后的文本內(nèi)容，如果搜搜到的詞有兩個(gè)，就分割兩次，然后加上最后的文本內(nèi)容……

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

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。