突出顯示搜索詞在JavaScript中按照術語

Question

例如：

我想搜索「ency」（百科全書）。

的結果將是：百科全書搜索結果會使用的字符數高亮顯示 - >百科全書

會嘗試清除我的觀點....：

Ency - > * ency * clopedia

百科大全 - > * 百科大全 * opedia

任何想法怎麼辦呢......？

在此先感謝。

Answer 1

如果你準備使用jQuery那麼容易：

var searchPattern = new RegExp(searchString, 'g'); 
$elem.html($elem.html().replace(searchPattern, "<ACRONYM class='srch'>" + searchString + "</ACRONYM>")); 

其中，$elem是你在搜索HTML元素的jQuery對象。例如，如果是喜歡<div id='me'>some text</div>特定的div。您正在搜索的文本「一些」，那麼這將是這樣的：

var searchPattern = new RegExp('some', 'g'); 
$elem = $('#me'); 
$elem.html($elem.html().replace(searchPattern, "<ACRONYM class='srch'>" + searchString + "</ACRONYM>")); 

給予適當的高亮風格的CSS類「SRCH'。當您的搜索結束後，請不要忘記刪除''首字母縮寫詞''元素'srch'類。