ハイライト一致する2つのアラビア文字列（Javascript）

Question

アラビア語の検索エンジンで、一致結果を赤で強調表示しています。与えられた2文字列：

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

2番目の文字列に一致する単語と発音区別記号を強調したいとします。

望ましい結果の画像で

、唯一のマッチ言葉と「発音区別符号/ dhabtが」強調表示されます：最初の画像は、第2の画像は、私が達成したいと考えて何で、検索するためのキーワードです。私はこれらのコードでこれを実現しようとした：

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

そして結果：

は、それから私は、ループを分割し、各文字の比較が、結果はゴミです：

次に、幅がゼロのジョイナを見つけました：Partially colored Arabic word in HTML niqueまだない100％正確、最終結果：

Here're私の最終的なコードとあなたが磨いたりアドバイスするのに役立つ必要があります。

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

私は私の問題の解決策を見つけました。私は検索結果の上に別のレイヤーにキーワードを複製し、CSSを使ってそれらを整列させます。これにより、だけでなく、私は分音+マッチの単語をハイライトだけでなく、不足している付加記号を表示することができます。

ここでは、コードです：

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

がここにCSSです：

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

ここでの結果です：

Answer 2

あなたは、文字列置換を折りたたむことができます。たとえば、

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