css - Markera matchande ord i två arabiska strängar (Javascript)

Jag skapar en sökmotor för arabiska som ska markera matchande resultat i rött. Givet 2 strängar:

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

Jag vill markera matchande ord och diakritiska tecken på den andra strängen. Den första bilden är nyckelordet att söka efter, den andra bilden är vad jag hoppas uppnå:

I den önskade resultatbilden kommer bara matchade ord och "diakrit/ dhabt" att markeras. Jag försökte åstadkomma detta med dessa koder:

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,'');
}

Och resultatet:

Sedan delar jag upp, loopar och jämför för varje tecken, men resultatet är skräp:

Sedan hittade jag information om nollbreddsanslutare här: Delvis färgad arabiskt ord i HTML och efter att ha implementerat tekniken är det slutliga resultatet fortfarande inte 100% korrekt:

Här är mina slutgiltiga koder och jag behöver din hjälp att finslipa eller ge råd:

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,'');
}

Svar #1

Du kan sammanfoga dina strängersättningar. Till exempel:

'test string'.replace(/e|t|n/g,'') ger s srig.

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,'');
}

body {
  font-size: 3em;
}
red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

Svar #2

Jag hittade en lösning på mitt problem. Jag duplicerar nyckelorden till ett annat lager ovanpå sökresultatet och justerar dem med CSS. Med detta kan jag inte bara markera de matchande orden + diakritiska tecken utan också visa de saknade diakritiska tecknen:

Här är koden:

for(var b=0; b<source.length; b++) {
    for(var c=0; c<keyword.length; c++) {
        if(removeDhabt(keyword[c])==removeDhabt(source[b])) {
            source[b] = '<m0><m1>'+keyword[c]+'</m1>'+source[b]+'</m0>';
        }
    }
}

Här är css:

m0 {
    color: #3498DB;
}
m0 m1 {
    color: #CC425B;
    position: absolute;
    top: 0;
    right: 0;
}

Här är resultatet: