angular6 搜尋關鍵字高亮顯示

2022-09-13 12:54:12 字數 1055 閱讀 2760

參考資料:

我現在用的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);}}}

ps: 普及一下pipe知識點:

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...