Javascript 如何在angular 7中突出显示两个字符串对象中的不同值？

当在两个文本区域中输入数据时，我有两个文本区域。因此，如何突出显示数据中的不同键或值。 例如：在我的html页面中包含两个文本区域，将数据粘贴到两个文本区域后，单击差异按钮，突出显示不同的字符串，并使用angular7计算总差异

string1=”{
“id”：“101”，
“创建时间”：1603302391，
“已创建用户id”：“58749658”，
“已创建用户”：“湿婆”，
},
{
“id”：“102”，
“创建时间”：1603302394，
“已创建用户id”：“32145678”，
“已创建用户”：“湿婆”，
}"
字符串2=”{
“id”：“111”，
“创建时间”：1603382391，
“已创建用户id”：“7894569”，
“已创建用户”：“湿婆”，
“注释”：“segrsegeg”
},
{
“id”：“102”，
“创建时间”：1603302394，
“已创建用户id”：“32145678”，
“已创建用户”：“湿婆”，
“注释”：“segrsegeg”
}“

基本上，您必须找到字符串和html之间的区别所在。 您可以使用HighligtPipe。在.ts文件中添加标记，其中是两个单词之间的区别。然后在html中，您可以像这样使用它

{ $implicit: item | highlight: toHighlight : searchWord}

@Pipe({name: 'highlight'})
export class HighlightPipe implements PipeTransform {
 transform(text: any, search: any, searchKeyword?: any): any { 
 const regex = new RegExp(pattern, 'gi');
  const name = text[searchWord].replace(regex, (match) => `<b>${match}</b>`);
  const text2 = {...text};
  // set bold value into searchWord
  text2[searchWord] = name;
  return text2;
 }
}

{$implicit:item | highlight:toHighlight:searchWord}
@管道（{name:'highlight'}）
导出类HighlightPipe实现PipeTransform{
转换（文本：任意，搜索：任意，搜索关键字？：任意）：任意{
const regex=new RegExp（模式'gi'）；
const name=text[searchWord].replace（regex，（match）=>`${match}`）；
常量text2={…text}；
//将粗体值设置为searchWord
text2[searchWord]=名称；
返回文本2；
}
}