大佬教程收集整理的这篇文章主要介绍了以角度查找并突出显示两个字符串中的不同单词，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有两个字符串
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。
还可以出现更多用例，如下图所示
我在角管中尝试了以下方法。
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
提示：“在复制和粘贴之前，尝试理解代码”
管道使用 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"...]
加入是“诡计”，the stackblitz
以上是大佬教程为你收集整理的以角度查找并突出显示两个字符串中的不同单词全部内容，希望文章能够帮你解决以角度查找并突出显示两个字符串中的不同单词所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。