如果结果中有一个单词与我在数组中寻找的单词匹配，我该如何显示彩色？

发布于 2025-01-25 08:08:43 字数 1227 浏览 4 评论 0原文

例如，我正在搜索“测试”，在结果中“这是一个测试”，如果它写入我需要在此结果中为测试文本的背景上色，

这是我的代码；

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

我的目的是，如果阵列中有“ leke”，请将其包装在跨度标签中并更改其背景。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾听心声的旋律 2025-02-01 08:08:43

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

在循环模板上，所有匹配都将在跨度标签内

<p [innerHTML]="mappedSubtitle"></p>

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