Mark.js实现关键词高亮

[alanhe421]

轮子:https://markjs.io/

[alanhe421]

1. index.html资源引入

    <script src="https://cdn.bootcss.com/mark.js/8.11.1/mark.min.js"></script>

2. 声明

declare const Mark: any;

3. 检索高亮

declare const Mark: any;
...
export class HomeComponent implements OnInit {

    keyword$ = new Subject<string>();

    constructor() {
        this.keyword$.debounceTime(400).subscribe(keyword => {
            this.performMark(keyword);
        });
    }
    performMark(keyword: string) {
        const instance = new Mark('.home-content');
        instance.unmark();
        if (keyword) {
            instance.mark(keyword);
        }
    }

<input type="text" class="form-control" placeholder="关键词检索" #keyword
                                (keyup)="keyword$.next(keyword.value)">
<div class="home-content">...</div>