for example i am searching "TEST" and in the results "THIS IS A TEST" if it writes i need to color the background of TEST text in this result

here is my code;

this.searchControl.valueChanges
  .pipe(
    distinctUntilChanged()
  )
  .subscribe((query: string) => {
    this.filteredSubtitles = []

    this.docViewerServiceService.getSubTitles
      .map(o => o.subTitle)
      .forEach(o => {
        //searching part
        const filtered = o.filter(subtitle => subtitle.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()))
        this.filteredSubtitles.push([...filtered]);
        //Matching part of the searched word with the word in the string
        this.filteredSubtitles.find(o => {
          if (o.filter(a => a.includes(query))) {
            yes i'm stuck here there is no need for this if maybe but i don't know
          }
        });

      })
    //as a whole to divide the words in the string we get and the time range into strings.  
   this.filteredSubtitles.forEach(findedSubTitles => this.pushFindedTitles = findedSubTitles)
  })}

my purpose here is if there is "LEKE" in the Array, enclose it in span tags and change its background.