Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果

更新時(shí)間：2017年01月17日 16:44:48 作者：1000px

本篇文章主要介紹了Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧

需求分析：

根據(jù)關(guān)鍵字搜索網(wǎng)頁(yè)內(nèi)容，并且高亮顯示內(nèi)容中的關(guān)鍵字

細(xì)節(jié)分析：

　1、每次執(zhí)行搜索操作，需清空上一次結(jié)果

　2、需區(qū)分html標(biāo)簽和正常文本內(nèi)容，否則為關(guān)鍵字添加樣式以后會(huì)出現(xiàn)標(biāo)簽內(nèi)容被顯示的情況

代碼思路：

利用正則表達(dá)式匹配關(guān)鍵字

使用javascript字符串替換的方式，將關(guān)鍵字替換成關(guān)鍵字

為了避免出現(xiàn)當(dāng)關(guān)鍵字為 'p'　時(shí)候，將標(biāo)簽替換成<p>……等等的情況

所有匹配和替換操作只針對(duì)當(dāng)前DOM元素中文本節(jié)點(diǎn)，通過遞歸函數(shù)遍歷操作所有節(jié)點(diǎn)

前端框架：

angularjs^1.2.9

$scope.myData = '<div>woshihight<h2>womei<b>bbb</b>shihigh<span>haha</span></h2><span>1000pxhight</span><ul><li>1high</li><li>2hight span light hight< p></li></ul><a href="index.html">這個(gè)是鏈接地址hight</a></div>';
 $scope.myDataCp = angular.copy($scope.myData);
 $scope.key = '';
 $scope.searchKey = function() {
 if($scope.key != '') {
 searchHighLight($scope.key);
 }
 }
 function searchHighLight(key) {
 var _element = angular.element($scope.myDataCp);
 nodeRecursion(_element[0],key);
 var _htmlStr = _element[0].innerHTML.toString();
 _htmlStr = _htmlStr.replace(/_1000px_/g, '<span class="red">').replace(/_xp0001_/g, '</span>');
 $scope.myData = _htmlStr;
 }
 //循環(huán)遍歷替換所有文本節(jié)點(diǎn)內(nèi)容
 function nodeRecursion(e, key) {
 var reg = new RegExp(key, 'g');
 var _count = e.childNodes.length;
 for(var _i=0; _i < _count; _i++) {
 if(e.childNodes.item(_i).nodeType == 3) {
 var _str = e.childNodes.item(_i).data;
 if(_str.indexOf(key)!=-1) {
 _str = _str.replace(reg,'_1000px_'+key+'_xp0001_');
 }
 e.childNodes.item(_i).data = _str;
 } else {
 nodeRecursion(e.childNodes.item(_i), key);
 }
 }
 }

其他說明：

searchKey //點(diǎn)擊搜索按鈕調(diào)用該方法

$scope.myData 中的html字符串必須有一個(gè)根節(jié)點(diǎn)，比如這里的div

html頁(yè)面中加載該html字段需要ng-bind-html指令，該指令需要加載ngSanitize模塊

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: