angular怎么实现页内检索功能?

Question

angular怎么实现页内检索功能，比如我现在有个输入框，后端回来一个字段content是个html文本,当我在输入框输入深圳，如何在改html把他高亮显示

是应该通过管道处理嘛

Answer 1

使用angular的通道处理，代码差不多是这样子，当然实际的代码比这个要难很多

import {Component} from '@angular/core';
import {FormsModule} from "@angular/forms";
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    standalone: true,
    name: 'highlightText'
})
export class HighlightTextPipe implements PipeTransform {
    transform(value: string, term: string): string {
        if (!term.trim()) {
            return value;
        }

        const escapedTerm = term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); // 转义特殊字符
        const regex = new RegExp(`(${escapedTerm})`, 'gi');
        return value.replace(regex, '<span class="highlight">$1</span>');
    }
}

@Component({
    selector: 'app-test',
    standalone: true,
    imports: [
        FormsModule,
        HighlightTextPipe
    ],
    template: `
        <input type="text" [(ngModel)]="keywords">
        <div [innerHTML]="content | highlightText: keywords"></div>
    `,
    styles: [`
        ::ng-deep {
            .highlight { color: red;}
        }
    `]
})
export class TestComponent {
    public keywords: string = '';
    public content: string = `
    <p>　　我们家的大花猫性格实在古怪。说它老实吧，它有时的确很乖。它会找个暖和的地方，成天睡大觉，无忧无虑，什么事也不过问。可是，决定要出去玩玩，就会出走一天一夜，任凭谁怎么呼唤，它也不肯回来。说它贪玩吧，的确是啊，要不怎么会一天一夜不回家呢?可是它听到老鼠的一点儿响动，又多么尽职。它屏息凝视，一连就是几个钟头，非把老鼠等出来不可!</p>
    <p>　　它要是高兴，能比谁都温柔可亲：用身子蹭你的腿，把脖子伸出来让你给它抓痒，或是在你写作的时候，跳上桌来在稿纸上踩印几朵小梅花。它还会丰富多腔地叫唤，长短不同，粗细各异,变化多端。在不叫的时候，它还会咕噜地给自己解闷儿。这可都凭它的高兴。它要是不高兴啊，无论谁说多少好话，它一声也不出。</p>
    <p>　　它什么都怕，总想藏起来。可是它又勇猛，不要说对付小虫和老鼠，就是遇上蛇也敢斗一斗。</p>
    <p>　　它小时候可逗人爱哩!才来无们家时刚好满月，腿脚还站不稳，已经学会了淘气。<em>一根</em><em>鸡毛</em>、一个线团，都是它的好玩具，耍个没完没了。一玩起来，不知要摔多少跟头，但是跌倒了马上起来，再跑再跌，头撞在门上、桌腿上，撞疼了也不哭。后来，胆子越来越大，就到院子去玩了，从这个花盆跳到那个花盆，还抱着花枝打秋千。院中的花草可遭了殃，被它折腾的枝折花落。</p>
    <p>　　我从来不责打它。看它那样生气勃勃，天真可爱，我喜欢还来不及，怎么会跟它生气呢?</p>
    `
}