Angular 2使用管道突出显示多个值答案

【问题标题】：Angular 2 Highlight Multiple Values Using PipeAngular 2使用管道突出显示多个值
【发布时间】：2019-01-05 16:48:14
【问题描述】：

我目前实现了一个简单的搜索功能here，它允许用户搜索课程。用户可以输入查询以逗号分隔的多个查询，如果每个标记化查询存在匹配项（迭代完成），我将过滤结果：

search($event) {
      var re = /\s*,\s*/;
      let splitQuery = this.searchText.split(re);
      let numQueries = splitQuery.length;
      let tempCourses = this.courses;
      for (var i = 0;i < numQueries; i ++){
        tempCourses = this.rankAndFilter(tempCourses, splitQuery[i].toUpperCase())
      }
      this.courseResults = this.sortByRank(tempCourses);

我还希望在搜索结果中突出显示所有查询，以供用户查看。这是original highlight pipe，我尝试对其进行修改，但它不会返回突出显示的每个单词。

transform(value: string, args: string): any {

var re = /\s*,\s*/;

    if (args && value){
        let splitQuery = args.split(re);
        let numQueries = splitQuery.length;
        let returnedHighlighted: String = value; 
        console.log(`number of queries: ${numQueries}`)
        for (var i = 0; i < numQueries; i++){

          console.log(`${i}: ${splitQuery[i]}`)
          let startIndex = value.toUpperCase().indexOf(splitQuery[i].toUpperCase());
          if (startIndex != -1) {
                let endLength = args.length;
                let matchingString = value.substr(startIndex, endLength);
                returnedHighlighted = returnedHighlighted.replace(matchingString, "<mark>" + matchingString + "</mark>");
           }  
        }
        return returnedHighlighted
    }
    return value; }

一个测试用例是查询linear algebra返回89A Statistics和54 Mathematics，查询linear algebra, probability返回两个课程但突出显示单个单词，查询linear algebra, probability, data science将只返回89A Statistics突出显示每个单独的查询。

实际上，这将应用于数以万计的课程，因此对于突出显示或过滤的时间效率的任何指针/实现也将不胜感激。

谢谢！

【问题讨论】：

标签： angular angular-template angular-pipe

【解决方案1】：

您可以一步完成。创建一个搜索不同值的正则表达式，并用 value

替换

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {

    transform(value: string, args: string): any {

    if (args && value){
       var re = new RegExp(args.split(',').join('|'),"gi");
        //e.g. if args was linear,equa, the regExpr will become  /linear|equa/gi
        return value.replace(re,(x)=>"<mark>"+x+"</mark>");
    }
    return value; 
  }
}

注意：您必须检查是否使用特殊字符 $, ...

【讨论】：

【解决方案2】：

基于@Eliseo 的回答来处理“查询”和“查询”等边缘情况：

 transform(value: string, args: string): any {

     if (args && value){
           let re_noSpace = /\s*,\s*/;
           let queryList = args.split(re_noSpace).filter(String);
           let re_matchQueries = new RegExp(queryList.join('|'),"gi");
           return value.replace(re_matchQueries,(x)=>"<mark>"+x+"</mark>");
      }
      return value; 
 }

【讨论】：