Блог

У меня есть две строки

let old = "if(is_required(ABCD))then is_valid_numeric(ABCD,'3.0')";

let new = "if(is_required(PQR))then is_valid_numeric(PQR,'3.0')";

в приведенных выше двух строках единственным отличием является PQR в новой строке, поэтому я хочу выделить PQR желтым цветом.

Также могут возникнуть другие варианты использования, которые изображены на рисунке ниже

Я попробовал ниже approch в angular pipe.

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'highlighter'})
export class Highlighter implements PipeTransform {
  transform(value, ...args: any[]): number {
    if(!args[0]) return value;
    let text = '';
    value.split('').forEach((val,i)=>{
       if(val != args[0].charAt(i)){
         text  ="<span class='highlight'>"   val   "</span>";
       } else {
        text  =val;
       }
    });
    return text;
  }
}
 

HTML

 <p [innerHTML]="new | highlighter:old"></p>
 

вышеупомянутый подход использует проверку символов, которая не будет работать, если строки имеют разную длину.

Stackblitz

Совет: «прежде чем копировать и вставлять, попробуйте понять код»

Канал работает, создавая массив word с использованием split (‘ ‘) и сравнивая элементы массива со «словами», поэтому в вашем примере массив становится

 ['if(isrequired(MEQ_NUM))','then','isvalid'...]
 

Таким образом, любое слово — «MEQ_NUM»

Вам нужно изменить свой канал, используйте что-то вроде:

 export class Highlighter  implements PipeTransform {
  transform(value: string, ...args: any[]): string {
    if (!args[0])
      return value;
    args.forEach(x=>{
      value=value.split(x).join('<span class="highlight">'   x   '</span>')
    })
    return value
  }
}
 

Убедитесь, что этот канал «разделен» собственным словом, и соедините с <span class=...></span>

В предыдущем примере массив, который создается

 ["if(isrequired(',")', then isvalid"...]
 

Соединение выполняет «трюк», стекблитц