突出显示HTML页面中的文本

Question

我正在尝试使用import random import time import threading import os def intns(x): y = random.randint(5,10) print(y) print('begin') time.sleep(y) print('end') return x thr = threading.Thread(target=intns, args=([10]), kwargs={}) thr.start() st = time.clock(); while(thr.is_alive() == True): if(time.clock() - st > 9): os._exit(0) 功能来突出显示搜索文本。 这是观点。

当然我使用了filter离子（版本3）。

正如您所看到的，我成功解析了包含搜索文本的ion-search标记的DOM元素和scrollIntoView（目前，我只限制p个标记）

在我插入的HTML页面中：

p

以下是在搜索栏中侦听keyup的方法：

<!-- Search -->
<ion-searchbar [(ngModel)]="myInput" [showCancelButton]="shouldShowCancel" (ionInput)="onInput($event)"
(ionCancel)="onCancel($event)" placeholder="Search..." debounce=500>
</ion-searchbar>

在这里：

  onInput(ev) {
    let searchedText = ev.target.value;
    if (searchedText && searchedText.trim() != '') {
      this.pTagsArray = Array.from(this.content.nativeElement.getElementsByTagName('p'));
      this.pTagsArray = this.pTagsArray.filter((item) => {
        if (item.innerHTML.toLowerCase().includes(searchedText.toLowerCase())) {
          item.scrollIntoView();
          this.heighlight(item, searchedText);
          return true;
        }
        return false;
      })
    }
  }

非常重要的一点是，在控制台中，我看到新 heighlight(pTag: any, text: any) { var r = pTag.innerHTML.replace(text, '<span style="color:red">' + text + '</span>'); console.log(r); } 的插入，但页面未呈现，因为我在chrome的控制台中看到了：

Answer 1

替换方法不会更改初始数据。你可以这样做：

pTag.innerHTML = r;