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

Question

我目前实现了一个简单的搜索功能 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);

我还希望在搜索结果中突出显示所有查询，以便用户查看。这是，我试图修改它，但它并没有 return 每个单独的单词突出显示。

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 returns 89A Statistics 和 54 Mathematics，一个查询 linear algebra, probability returns 两个课程但是突出显示了单个单词，并且查询 linear algebra, probability, data science 只会 return 89A Statistics 突出显示每个单独的查询。

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

谢谢！

Answer 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; 
  }
}

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

Answer 2

建立@Eliseo 的答案来处理边缘情况，例如"query," 和"query, "：

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

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

Angular 2 Highlight Multiple Values Using Pipe

angular

angular-template

angular-pipe