高亮显示两个阿拉伯字符串（Javascript）的匹配词

我正在为阿拉伯语搜索引擎，该引擎应以红色突出显示匹配结果。给定2个字符串：

Keyword: بِسْمِ ٱلرحمن ٱلرحيم ملك
Result: بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ

我想在第二个字符串上突出显示匹配词和变音符号。第一张图片是要搜索的关键字，第二张图片是我希望实现的目标：

在所需的结果图像中，将仅突出显示匹配的单词和“变音符号/单词”。我尝试使用以下代码来实现此目的：

var keyword = removeDhabt('بِسْمِ ٱلرحمن ٱلرحيم ملك').split(' ');
var source = 'بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ'.split(' ');
for(var b=0; b<source.length; b++) {
    for(var c=0; c<keyword.length; c++) {
        if(keyword[c]==removeDhabt(source[b])) source[b] = '<red>'+source[b]+'</red>';
    }
}

$(target).html(source);

function removeDhabt(s) {
    return s.replace(/ِ/g,'').replace(/ُ/g,'').replace(/ٓ/g,'').replace(/ٰ/g,'').replace(/ْ/g,'').replace(/ٌ/g,'').replace(/ٍ/g,'').replace(/ً/g,'').replace(/ّ/g,'').replace(/َ/g,'');
}

结果：

然后我分割，循环并比较每个字符，但结果是垃圾：

然后，我在这里找到了零宽度的连接符：HTML中的部分阿拉伯语单词，实施该技术后，最终结果仍然不是100％准确：

这是我的最终代码，需要您的完善或建议：

var keyword = removeDhabt('بِسْمِ ٱلرحمن ٱلرحيم ملك').split(' ');
var source = 'بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ'.split(' ');
for(var b=0; b<source.length; b++) {
    for(var c=0; c<keyword.length; c++) {
        if(keyword[c]==removeDhabt(source[b])) {
            var newSource = source[b].split('');
            var e = 0;
            for(var d=0; d<keyword[c].length; d++) {
                while(keyword[c][d]!=newSource[e]) e++;
                newSource[e] = '<red>'+newSource[e]+'&zwj;</red>';
            }
            source[b] = newSource.join('');
        }
    }
}

$(target).html(source);

function removeDhabt(s) {
    return s.replace(/ِ/g,'').replace(/ُ/g,'').replace(/ٓ/g,'').replace(/ٰ/g,'').replace(/ْ/g,'').replace(/ٌ/g,'').replace(/ٍ/g,'').replace(/ً/g,'').replace(/ّ/g,'').replace(/َ/g,'');
}