Javascript NgbHighlight：按行限制为一个高亮部分

我使用NgbHighlight让用户查看列表

我的问题是强调结果。 我只想突出显示第一场比赛

我使用的基本知识如下所述：

代码：

列表：

['ABCD AAAA ABCD'，'bbbbbb ABCD'，'CCCC']

搜索：
'ABCD'

我想要的输出：

'**ABCD** AAAA ABCD'
'BBBB **ABCD** BBBB'

我得到的输出：

'**ABCD** AAAA **ABCD**'
'BBBB **ABCD** BBBB'

我应该如何将突出显示限制在第一部分

例如：

HTML


搜索wiki页面：
搜索。。。
很抱歉，无法加载建议。

打字稿

import {Component, Injectable} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {Observable, of} from 'rxjs';
import {catchError, debounceTime, distinctUntilChanged, map, tap, switchMap} from 'rxjs/operators';

const WIKI_URL = 'https://en.wikipedia.org/w/api.php';
const PARAMS = new HttpParams({
  fromObject: {
    action: 'opensearch',
    format: 'json',
    origin: '*'
  }
});

@Injectable()
export class WikipediaService {
  constructor(private http: HttpClient) {}

  search(term: string) {
    if (term === '') {
      return of([]);
    }

    return this.http
      .get(WIKI_URL, {params: PARAMS.set('search', term)}).pipe(
        map(response => response[1])
      );
  }
}

@Component({
  selector: 'ngbd-typeahead-http',
  templateUrl: './typeahead-http.html',
  providers: [WikipediaService],
  styles: [`.form-control { width: 300px; display: inline; }`]
})
export class NgbdTypeaheadHttp {
  model: any;
  searching = false;
  searchFailed = false;

  constructor(private _service: WikipediaService) {}

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.searching = true),
      switchMap(term =>
        this._service.search(term).pipe(
          tap(() => this.searchFailed = false),
          catchError(() => {
            this.searchFailed = true;
            return of([]);
          }))
      ),
      tap(() => this.searching = false)
    )
}

从'@angular/core'导入{Component，Injectable}；
从'@angular/common/http'导入{HttpClient，HttpParams}；
从'rxjs'导入{可观察的}；
从“rxjs/operators”导入{catchError、debounceTime、distinctUntilChanged、map、tap、switchMap}；
const WIKI_URL='1〕https://en.wikipedia.org/w/api.php';
const PARAMS=新的HttpParams({
fromObject：{
操作：“opensearch”，
格式：“json”，
来源：'*'
}
});
@可注射（）
导出类维基百科服务{
构造函数（私有http:HttpClient）{}
搜索（术语：字符串）{
如果（术语==''）{
归还（[]）；
}
返回此文件。http
.get（WIKI_URL，{params:params.set（'search'，term）}）.pipe(
映射（响应=>响应[1]）
);
}
}
@组成部分({
选择器：“ngbd typeahead http”，
templateUrl:'./typeahead http.html'，
提供者：[维基百科服务]，
样式：[`.form控件{width:300px；display:inline；}`]
})
导出类NgbdTypeaheadHttp{
型号：任意；
搜索=假；
searchFailed=false；
构造函数（私有_服务：WikipediaService）{}
搜索=（文本$：可观察）=>
文本$.pipe(
去BounceTime（300），
distinctUntilChanged（），
点击（（）=>this.search=true），
开关映射（术语=>
此.u服务.search（术语）.pipe(
点击（（）=>this.searchFailed=false），
捕获错误（（）=>{
this.searchFailed=true；
归还（[]）；
}))
),
点击（（）=>this.search=false）
)
}
NgbHighlight无法执行此操作。您可以轻松地实现所需的组件。这是一个很小的组成部分和一个很小的变化。您只需稍微更改正则表达式，使其仅在术语首次出现时拆分

  ngOnChanges(changes: SimpleChanges) {
    const result = toString(this.result);

    const terms = Array.isArray(this.term) ? this.term : [this.term];
    const escapedTerms = terms.map(term => regExpEscape(toString(term)))
        .map(term => `${term}(.+)`)
        .filter(term => term);


    this.parts = escapedTerms.length ? result.split(new RegExp(`(${escapedTerms.join('|')})`, 'gmi')) : [result];
  }


代码从未被测试过（：不确定它是否能与多个术语一起工作
为了避免触碰ngb typeahead的代码，我已经对CSS进行了“修复”。
这不是最漂亮的解决方案，但至少在视觉上是可行的

以下是ngb typeahead生成的HTML（未触及，我只是删除了注释）。
搜索词：“ABCD”

<ngb-highlight ng-reflect-result="'ABCD AAAA ABCD" ng-reflect-term="act">
    <span class="ngb-highlight">ABCD</span>
    &nbsp;AAAA&nbsp;
    <span class="ngb-highlight">ABCD</span>
</ngb-highlight>


正如你所看到的，这不是最漂亮的，但至少我不需要修改任何可能在未来被覆盖的东西

无论如何，谢谢大家的帮助！
你有一些代码可以分享吗？这里有一个例子：链接被破坏，导致stackblitz root。请编辑你的帖子，以包含你所询问的代码。你可能想看看这里现在应该很好了。我复制了错误的链接facepalm，我将编辑它以添加几行代码。但是正如我所说的，我正在使用第一个链接中描述的基本实现。（）因为这将迫使我做比我准备做的更多的更改（要么重新实现完整的typeahead，要么在每次更新时直接修改ng引导和风险覆盖），我提出了另一个解决方案。但非常感谢您的帮助！非常感谢：）
<ngb-highlight ng-reflect-result="'ABCD AAAA ABCD" ng-reflect-term="act">
    <span class="ngb-highlight">ABCD</span>
    &nbsp;AAAA&nbsp;
    <span class="ngb-highlight">ABCD</span>
</ngb-highlight>


.ngb-highlight {
  font-weight: normal !important;
}

ngb-highlight .ngb-highlight:first-child {
  font-weight: bold !important;
}