HTMLページのハイライトテキスト

Question

ユーザーにfilter機能を試して、検索テキストを強調表示しようとしています。 こちらが表示されます。もちろん

Iはイオン性（バージョン3）のion-searchを用います。

あなたが見ることができるように、私は、検索テキスト（現在、私はpタグに制限しています）が含まれていpタグのDOM要素とscrollIntoViewを解析することに成功しました。

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); 
    } 

ここ

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

は、検索バーにkeyUpイベントに耳を傾ける方法である：私はことを挿入したHTMLページで

非常にインポ

Answer 1

Replaceメソッドは、初期データを変更しない：rtantノートでは、私はクロームのコンソールに表示するので、コンソールでは、私は、ページがレンダリングされていない新しいspanの挿入を参照してくださいが、ということです。あなたは次のようにすることができます：

pTag.innerHTML = r;