快捷導(dǎo)航

angularjs實現(xiàn)搜索的關(guān)鍵字在正文中高亮出來

更新時間：2017年06月13日 10:43:33 作者：灰太大

這篇文章主要介紹了angularjs實現(xiàn)搜索的關(guān)鍵字在正文中高亮出來，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1、定義高亮 filter

我們希望搜索的關(guān)鍵字在正文中高亮出來，正文內(nèi)容就是過濾器的第一個參數(shù)，第二個參數(shù)就是搜索關(guān)鍵字，這樣，我們的過濾器將會有兩個參數(shù)了。

高亮的原理很簡單，將需要高亮的內(nèi)容使用 span 標(biāo)記隔離出來，再加上一個高亮的 class樣式進行描述就可以了。

app.filter("highlight", function($sce, $log){
  var fn = function(text, search){
    $log.info("text: " + text);
    $log.info("search: " + search);
    if (!search) {
      return $sce.trustAsHtml(text);
    }
    text = encodeURIComponent(text);
    search = encodeURIComponent(search);
    var regex = new RegExp(search, 'gi')
    var result = text.replace(regex, '<span class="highlightedTextStyle">$&</span>');
    result = decodeURIComponent(result);
    $log.info("result: " + result );
    return $sce.trustAsHtml(result);
  };
  return fn;
});

$sce, 和 $log 是 angular 提供的兩個服務(wù)，其中 $sce 服務(wù)需要使用 ngSanitize 模塊。關(guān)于這個模塊，可以參考：angular-ngSanitize模塊-$sanitize服務(wù)詳解

2、定義html視圖

<div ng-controller="search">
      <div>
        <input type="text" ng-model="notify.search" value=""/>
      </div>
      <!--text內(nèi)容會高亮顯示搜索關(guān)鍵字-->
      <div ng-bind-html="text | highlight:notify.search">
      </div>
</div>

3、控制器

app.controller("search", function($scope){
  $scope.text = "hello, world. hello, world. hello, world. this is filter example.";
  $scope.notify.search = "";
})

注意在控制器中引入過濾器highlight

當(dāng)搜索的關(guān)鍵字為數(shù)字時，如"1"，報如下錯誤：（輸入漢字時沒有問題）

一些解決辦法：

1.直接try catch處理，這樣太簡單了，并且會導(dǎo)致新的問題出現(xiàn)

2.把escape全部改成encodeURIComponent編碼，試了一下不能解決問題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解AngularJS中$http緩存以及處理多個$http請求的方法
$http 是 AngularJS 中的一個核心服務(wù)，用于讀取遠程服務(wù)器的數(shù)據(jù)，通過本文給大家介紹AngularJS中$http緩存以及處理多個$http請求的方法，希望的朋友一起學(xué)習(xí)吧
2016-02-02
AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
這篇文章主要介紹了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法,結(jié)合實例形式分析了AngularJS實現(xiàn)Request與response格式轉(zhuǎn)換操作的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-11-11
詳解Angular之路由基礎(chǔ)
單頁應(yīng)用中，組件時構(gòu)建應(yīng)用的基礎(chǔ)元素，頁面展示什么內(nèi)容均是靠頁面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫法。
2021-05-05
AngularJS自定義插件實現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
這篇文章主要介紹了AngularJS自定義插件實現(xiàn)網(wǎng)站用戶引導(dǎo)功能,結(jié)合實例形式分析了AngularJS自定義插件的實現(xiàn)步驟與相關(guān)功能技巧,需要的朋友可以參考下
2016-11-11
由淺入深剖析Angular表單驗證
這篇文章主要介紹了由淺入深剖析Angular表單驗證的相關(guān)資料,需要的朋友可以參考下
2016-07-07
angular4 獲取wifi列表中文顯示亂碼問題的解決
這篇文章主要介紹了angular4 獲取wifi列表中文顯示亂碼問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
angular2模塊和共享模塊詳解
這篇文章主要介紹了angular2模塊和共享模塊詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
Angular.JS學(xué)習(xí)之依賴注入$injector詳析
隨著javaEE的spring框架的興起，依賴注入（IoC）的概念徹底深入人心，它徹底改變了我們的編碼模式和思維。在AngularJS中也有依賴注入的概念，像spring中的依賴注入，但是又有所不同。Angular中只需要在需要的地方聲明一下即可，類似模塊的引用，因此十分方便。
2016-10-10
詳細分析使用AngularJS編程中提交表單的方式
這篇文章主要介紹了詳細分析使用AngularJS提交表單的方式,AngularJS是非常熱門的JavaScript庫,文中展示了AngularJS在前端與后端的PHP進行交互的場景,需要的朋友可以參考下
2015-06-06
基于AngularJS前端云組件最佳實踐
這篇文章主要為大家詳細介紹了基于AngularJS前端云組件最佳實踐,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10