欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年01月17日 16:44:48   作者:1000px  
本篇文章主要介紹了Angularjs實現(xiàn)搜索關鍵字高亮顯示的方法,具有一定的參考價值,下面跟著小編一起來看下吧

需求分析:

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

細節(jié)分析:

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

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

代碼思路:

利用正則表達式匹配關鍵字

使用javascript字符串替換的方式,將關鍵字替換成<span class='red'>關鍵字</span>

為了避免出現(xiàn)當關鍵字為 'p' 時候,將標簽<p>替換成<<span>p</span>>……等等的情況

所有匹配和替換操作只針對當前DOM元素中文本節(jié)點,通過遞歸函數(shù)遍歷操作所有節(jié)點

前端框架:

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">這個是鏈接地址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é)點內(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ào)用該方法

$scope.myData 中的html字符串必須有一個根節(jié)點,比如這里的div

html頁面中加載該html字段需要ng-bind-html指令,該指令需要加載ngSanitize模塊

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關文章

  • Angular實現(xiàn)下拉框模糊查詢功能示例

    Angular實現(xiàn)下拉框模糊查詢功能示例

    這篇文章主要介紹了Angular實現(xiàn)下拉框模糊查詢功能,涉及AngularJS事件響應及字符串查詢等相關操作技巧,需要的朋友可以參考下
    2018-01-01
  • AngularJS模塊學習之Anchor Scroll

    AngularJS模塊學習之Anchor Scroll

    這篇文章主要介紹了AngularJS模塊學習之Anchor Scroll 的相關資料,需要的朋友可以參考下
    2016-01-01
  • 基于AngularJS的簡單使用詳解

    基于AngularJS的簡單使用詳解

    下面小編就為大家?guī)硪黄贏ngularJS的簡單使用詳解。小編覺得挺不錯的,現(xiàn)在就想給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 詳解如何在Angular中引入Mock.js

    詳解如何在Angular中引入Mock.js

    這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法

    angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法

    本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法,分別介紹了$http.post和$http.get請求的方法,有興趣的可以了解一下
    2017-05-05
  • 淺談Angular2 模塊懶加載的方法

    淺談Angular2 模塊懶加載的方法

    本篇文章主要介紹了淺談Angular2 模塊懶加載的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • AngularJS入門教程之Hello World!

    AngularJS入門教程之Hello World!

    這篇文章主要介紹了AngularJS入門教程之Hello World!,本文用經(jīng)典的應用程序“Hello World!”來講解AngularJS,要的朋友可以參考下
    2014-12-12
  • Angular6升級到Angular8報錯問題的解決合集

    Angular6升級到Angular8報錯問題的解決合集

    這篇文章主要介紹了Angular6升級到Angular8報錯問題的解決合集,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Angular 4 依賴注入學習教程之FactoryProvider的使用(四)

    Angular 4 依賴注入學習教程之FactoryProvider的使用(四)

    這篇文章主要給大家介紹了關于Angular 4 依賴注入之FactoryProvider使用的相關資料,文中介紹的非常詳細,對大家學習或者使用Angular4具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-06-06
  • Angular使用動態(tài)加載組件方法實現(xiàn)Dialog的示例

    Angular使用動態(tài)加載組件方法實現(xiàn)Dialog的示例

    這篇文章主要介紹了Angular使用動態(tài)加載組件方法實現(xiàn)Dialog的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05

最新評論