angular6 搜尋關鍵字高亮顯示

參考資料：

我現在用的angular 版本是8，發現該方法可用；效果圖：

首先建立乙個pipe，

import  from '@angular/core';

import from '@angular/platform-browser'; //
資料在頁面上繫結可以安全解析
@pipe()
export class keylightpipe implements pipetransform 
transform(val: string, keyword: string): any `); // 將匹配到的關鍵字替換
//console.log(res);
return
this
.sanitizer.bypasssecuritytrusthtml(res);}}}

import  from '@angular/core';

@pipe()
export class repeatpipe implements pipetransform }//
例項：在模板中呼叫 } 的結果是 okokok。即冒號 「:」 後面跟第二個引數

// html

<
tr *ngfor
="let data of ajaxtable.data"
>
<
td>
<
span 
[innerhtml]
="data.artifactid | keylight: pagedata.filter"
>
span
> // 這裡pagedate.filter 是 介面返回給的關鍵字，如果介面沒有返回，可以自行宣告建立或溝通後端給乙個~~~233333
td>
tr>

關鍵字的高亮搜尋

今天在開發中遇到乙個需求，是要求我們把我們搜尋到的那個關鍵字匹配到的字型改變顏色 平常我們不用框架，在傳值的時候用父子相傳這種方式的時候我們可以用以下 hhh text 另一種是我們路由跳轉時進行的傳參，比如 if data 符合資訊時跳轉 接收時 this.route.query.id 後台管理系...

vue 搜尋高亮關鍵字

在一些查詢中，我們希望我們查詢的關鍵字，可以在查詢內容中高亮出來 this.arr response.data this.caselist this.arr.foreach item this.caselist.map item brightkeyword val else arr是我們從後台獲取的...

WPF搜尋關鍵字高亮顯示

目標 在wpf中，對lucene.net進行全文檢索後的結果中包含的關鍵字進行高亮顯示。檢索結果中的關鍵字高亮顯示，在網頁中顯示是很簡單的，lucene中加標籤樣式就可以了，可是在wpf中就不行了。我在wpf中用gridcontrol顯示搜尋結果列表，gridcontrol的模板裡用textbloc...