Wyróżnij słowa dopasowania dwóch arabskich ciągów znaków (Javascript)

Question

Robię wyszukiwarkę dla języka arabskiego, która powinna podkreślać wynik meczu na czerwono. Biorąc pod uwagę 2 ciąg:

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

Chcę wyróżnić słowa meczowe i znaki diakrytyczne na drugim ciągu. Pierwszy obraz jest kluczowe do wyszukiwania, drugi obraz jest tym, co mam nadzieję osiągnąć:

W pożądany efekt obrazu, tylko dopasowane słowa i „diakrytyczną/dhabt” zostanie podświetlona. Starałem się to osiągnąć z tych kodów:

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

a wynik:

Potem Split, pętli i porównania dla każdego znaku, ale wynik jest śmieci:

Potem znalazłem stolarz o zerowej szerokości tutaj: Partially colored Arabic word in HTML i po wdrożeniu technologii nique, wynik końcowy jeszcze nie w 100% dokładne:

Here're moje ostatnie kody i trzeba pomóc wypolerować lub rada:

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

Answer 1

Znalazłem rozwiązanie mojego problemu. Powielam słowa kluczowe do innej warstwy nad wynikami wyszukiwania i wyrównuję je za pomocą CSS. Dzięki temu nie tylko mogę podkreślić słowa meczu + diakrytyczną ale również pokazać brakującą diakrytykę:

Oto kod:

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

oto css:

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

Oto wynik:

Answer 2

można zwinąć swoje zamienniki ciągów. Na przykład:

'test string'.replace(/e|t|n/g,'') Wyjścia 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>