Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
需求分析：
根據(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)鍵字替換成<span class='red'>關(guān)鍵字</span>
為了避免出現(xiàn)當(dāng)關(guān)鍵字為 'p' 時(shí)候，將標(biāo)簽<p>替換成<<span>p</span>>……等等的情況
所有匹配和替換操作只針對(duì)當(dāng)前DOM元素中文本節(jié)點(diǎn)，通過(guò)遞歸函數(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);
}
}
}
其他說(shuō)明：
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í)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
- JavaScript簡(jiǎn)單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
- javascript、php關(guān)鍵字搜索函數(shù)的使用方法
- JavaScript正則方法replace實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示
- angularjs實(shí)現(xiàn)搜索的關(guān)鍵字在正文中高亮出來(lái)
- js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼
- JS實(shí)現(xiàn)關(guān)鍵字搜索時(shí)的相關(guān)下拉字段效果
- 用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- javascript 自動(dòng)標(biāo)記來(lái)自搜索結(jié)果頁(yè)的關(guān)鍵字
- JS實(shí)現(xiàn)百度搜索框關(guān)鍵字推薦
相關(guān)文章
AngularJS通過(guò)$location獲取及改變當(dāng)前頁(yè)面的URL
本篇將介紹AngularJS中的$location服務(wù)的基本用法,$location服務(wù)的主要作用是用于獲取當(dāng)前url以及改變當(dāng)前的url,并且存入歷史記錄。本文通過(guò)示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09
Angular通過(guò)?HTTP?Interceptor?實(shí)現(xiàn)?HTTP?請(qǐng)求超時(shí)監(jiān)控的例子
這篇文章主要介紹了Angular?如何通過(guò)?HTTP?Interceptor?實(shí)現(xiàn)?HTTP?請(qǐng)求的超時(shí)監(jiān)控,本文通過(guò)例子給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了淺談Angular單元測(cè)試總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識(shí)別新的HTML語(yǔ)法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下2014-12-12
本篇文章主要介紹了詳解基于angular路由的requireJs按需加載js，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，僅供參考。具體請(qǐng)根據(jù)實(shí)際業(yè)務(wù)需求做相應(yīng)調(diào)整。2017-06-06
AngularJs 國(guó)際化（I18n/L10n）詳解
本文主要介紹AngularJs 國(guó)際化的知識(shí)，這里整理了詳細(xì)的資料來(lái)講解國(guó)際化，有需要的小伙伴可以參考下2016-09-09
AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法分析
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法,結(jié)合實(shí)例形式分析了AngularJS事件響應(yīng)與樣式動(dòng)態(tài)控制相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了在Angular中使用JWT認(rèn)證方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Angular使用Md5加密的解決方法,需要的朋友可以參考下2017-09-09