-1

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. asd

Cem Özbey
  • 9
  • 3

1 Answers1

0
this.docViewerServiceService.getSubTitles.map((o) => {
  return o.subTitle.replace(
    new RegExp(query.trim().toLocaleLowerCase(), i),
    (match) => {
      return `<span>${match}</span>`;
    }
  );
});

on your template for loop, all the matches will be inside a span tag

<p [innerHTML]="mappedSubtitle"></p>
Shahriar Shojib
  • 867
  • 8
  • 16