Angular 角度2使用管道高亮显示多个值

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

搜索（$event）{
变量re=/\s*，\s*/；
让splitQuery=this.searchText.split（re）；
设numquerys=splitQuery.length；
让tempCourses=this.courses；
对于（var i=0；i

我还希望在搜索结果中突出显示所有查询，以便用户可以查看。这是我尝试过修改的，但它不会返回突出显示的每个单词

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

transform（值：string，参数：string）：任意{
变量re=/\s*，\s*/；
if（参数和值）{
让splitQuery=args.split（re）；
设numquerys=splitQuery.length；
让returnedHighlighted:String=value；
log（`number of querys:${numquerys}`）
对于（var i=0；i

测试用例是查询

线性代数

返回

89A统计

和

54数学

，查询

线性代数，概率

返回两个过程，但突出显示单个词，查询

线性代数，概率，数据科学

只返回

89A统计cs

，突出显示每个单独的查询

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

事实上，这将应用于数以万计的课程，因此对于突出显示或过滤的时间效率的任何指针/实现也将受到赞赏

---

谢谢！

您可以一步完成。创建一个regexpression，搜索不同的值，并替换为值

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

@Pipe（{name:'highlight'}）
导出类HighlightPipe实现PipeTransform{
转换（值：字符串，参数：字符串）：任意{
if（参数和值）{
var re=new RegExp（args.split（‘，’）.join（‘|’），“gi”）；
//e、 g.如果args是线性的，equa，regExpr将变成/linear | equa/gi
返回值。替换（re，（x）=>“”+x+“”）；
}
返回值；
}
}

---

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

构建@Eliseo的答案来处理边缘情况，如“查询”和“查询”：

transform（值：string，参数：string）：任意{
if（参数和值）{
设re_noSpace=/\s*，\s*/；
让queryList=args.split（re_noSpace）.filter（String）；
让re_matchQueries=newregexp（queryList.join（“|”），“gi”）；
返回值。替换（重新匹配查询，（x）=>“”+x+“”）；
}
返回值；
}

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